http://bapinder.myfreeforum.org/viewcardforum.php?f=8
The template looks wrong it is overflow.
I know the css code for overflow but it will hide the conent how else can i fix this.
The code:
The template looks wrong it is overflow.
I know the css code for overflow but it will hide the conent how else can i fix this.
The code:
<style type="text/css">
<!--
.tabs {position:relative; height: 27px; margin: 0; padding: 0; background:url("bar_off.gif") repeat-x; overflow:hidden}
.tabs li {display:inline;}
.tabs a:hover, .tabs a.tab-active {background:#fff url("bar_on.gif") repeat-x; border-right: 1px solid #fff}
.tabs a {height: 27px; font:12px verdana, helvetica, sans-serif;font-weight:bold;
position:relative; padding:6px 10px 10px 10px; margin: 0px -4px 0px 0px;
color:#2B4353;text-decoration:none; border-left:1px solid #fff; border-right:1px solid #6D99B6}
.tab-container {background: #fff; border:1px solid #6D99B6;}
.tab-panes { margin: 0px;}
// -->
</style>
<script language="JavaScript1.3">
var panes = new Array();
function setupPanes(containerId, defaultTabId) {
// go through the DOM, find each tab-container
// set up the panes array with named panes
// find the max height, set tab-panes to that height
panes[containerId] = new Array();
var maxHeight = 0; var maxWidth = 0;
var container = document.getElementById(containerId);
var paneContainer = container.getElementsByTagName("div")[0];
var paneList = paneContainer.childNodes;
for (var i=0; i < paneList.length; i++ ) {
var pane = paneList;
if (pane.nodeType != 1) continue;
if (pane.offsetHeight > maxHeight) maxHeight = pane.offsetHeight;
if (pane.offsetWidth > maxWidth ) maxWidth = pane.offsetWidth;
panes[containerId][pane.id] = pane;
if (i == 0)
{
pane.style.display = "none";
}
else
{
pane.style.display = "none";
}
}
paneContainer.style.height = maxHeight + "px";
paneContainer.style.width = maxWidth + "px";
document.getElementById(defaultTabId).onclick();
}
function showPane(paneId, activeTab) {
// make tab active class
// hide other panes (siblings)
// make pane visible
for (var con in panes) {
activeTab.blur();
activeTab.className = "tab-active";
if (panes[con][paneId] != null) { // tab and pane are members of this container
var pane = document.getElementById(paneId);
pane.style.display = "block";
var container = document.getElementById(con);
var tabs = container.getElementsByTagName("ul")[0];
var tabList = tabs.getElementsByTagName("a")
for (var i=0; i<tabList.length; i++ ) {
var tab = tabList;
if (tab != activeTab) tab.className = "tab-disabled";
}
for (var i in panes[con]) {
var pane = panes[con];
if (pane == undefined) continue;
if (pane.id == paneId) continue;
pane.style.display = "none"
}
}
}
return false;
}
</script>
<form method="post" action="{S_POST_DAYS_ACTION}">
<table width="100%" cellspacing="2" cellpadding="2" border="0" align="center">
<tr>
<td align="left" valign="middle" width="50"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a></td>
<td align="left" valign="middle" class="nav" width="100%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a></span></td>
<td align="right" valign="bottom" class="nav" nowrap="nowrap"><span class="gensmall"><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></span></td>
</tr>
</table>
<div class="tab-container" id="container1">
<ul class="tabs">
<!-- BEGIN letter -->
<li><a href="#" onClick="return showPane('pane{letter.LETTER}', this)" id="tab{letter.LETTER}">{letter.LETTER}</a></li>
<!-- END letter -->
</ul>
<div class="tab-panes" >
<!-- BEGIN letter -->
<div id="pane{letter.LETTER}" style="display: block">
<table border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
<tr>
<th colspan="2" align="center" height="30" class="thCornerL" nowrap="nowrap"> {L_TOPICS} </th>
<th width="50" align="center" class="thTop" nowrap="nowrap"> {L_REPLIES} </th>
<th width="100" align="center" class="thTop" nowrap="nowrap"> {L_AUTHOR} </th>
<th width="50" align="center" class="thTop" nowrap="nowrap"> {L_VIEWS} </th>
<th align="center" class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
</tr>
<!-- BEGIN topicrow -->
<tr>
<td class="row1" align="center" valign="middle" width="20"><img src="{letter.topicrow.TOPIC_FOLDER_IMG}" width="30" height="30" alt="{letter.topicrow.L_TOPIC_FOLDER_ALT}" title="{letter.topicrow.L_TOPIC_FOLDER_ALT}" /></td>
<td class="row1" width="100%"><span class="topictitle">{letter.topicrow.NEWEST_POST_IMG}{letter.topicrow.TOPIC_TYPE}<a href="{letter.topicrow.U_VIEW_TOPIC}" class="topictitle">{letter.topicrow.TOPIC_TITLE}</a></span><span class="gensmall"><br />
{letter.topicrow.GOTO_PAGE}</span></td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{letter.topicrow.REPLIES}</span></td>
<td class="row3" align="center" valign="middle"><span class="name">{letter.topicrow.TOPIC_AUTHOR}</span></td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{letter.topicrow.VIEWS}</span></td>
<td class="row3Right" align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{letter.topicrow.LAST_POST_TIME}<br />{letter.topicrow.LAST_POST_AUTHOR} {letter.topicrow.LAST_POST_IMG}</span></td>
</tr>
<!-- END topicrow -->
</table>
</div>
<!-- END letter -->
</div>
</div>
<script>
setupPanes("container1","taba");
</script>
<table width="100%" cellspacing="2" border="0" align="center" cellpadding="2">
<tr>
<td align="left" valign="middle" width="50"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a></td>
<td align="left" valign="middle" width="100%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a></span></td>
</tr>
</table>
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">{JUMPBOX}</td>
</tr>
</table>
<!--
.tabs {position:relative; height: 27px; margin: 0; padding: 0; background:url("bar_off.gif") repeat-x; overflow:hidden}
.tabs li {display:inline;}
.tabs a:hover, .tabs a.tab-active {background:#fff url("bar_on.gif") repeat-x; border-right: 1px solid #fff}
.tabs a {height: 27px; font:12px verdana, helvetica, sans-serif;font-weight:bold;
position:relative; padding:6px 10px 10px 10px; margin: 0px -4px 0px 0px;
color:#2B4353;text-decoration:none; border-left:1px solid #fff; border-right:1px solid #6D99B6}
.tab-container {background: #fff; border:1px solid #6D99B6;}
.tab-panes { margin: 0px;}
// -->
</style>
<script language="JavaScript1.3">
var panes = new Array();
function setupPanes(containerId, defaultTabId) {
// go through the DOM, find each tab-container
// set up the panes array with named panes
// find the max height, set tab-panes to that height
panes[containerId] = new Array();
var maxHeight = 0; var maxWidth = 0;
var container = document.getElementById(containerId);
var paneContainer = container.getElementsByTagName("div")[0];
var paneList = paneContainer.childNodes;
for (var i=0; i < paneList.length; i++ ) {
var pane = paneList;
if (pane.nodeType != 1) continue;
if (pane.offsetHeight > maxHeight) maxHeight = pane.offsetHeight;
if (pane.offsetWidth > maxWidth ) maxWidth = pane.offsetWidth;
panes[containerId][pane.id] = pane;
if (i == 0)
{
pane.style.display = "none";
}
else
{
pane.style.display = "none";
}
}
paneContainer.style.height = maxHeight + "px";
paneContainer.style.width = maxWidth + "px";
document.getElementById(defaultTabId).onclick();
}
function showPane(paneId, activeTab) {
// make tab active class
// hide other panes (siblings)
// make pane visible
for (var con in panes) {
activeTab.blur();
activeTab.className = "tab-active";
if (panes[con][paneId] != null) { // tab and pane are members of this container
var pane = document.getElementById(paneId);
pane.style.display = "block";
var container = document.getElementById(con);
var tabs = container.getElementsByTagName("ul")[0];
var tabList = tabs.getElementsByTagName("a")
for (var i=0; i<tabList.length; i++ ) {
var tab = tabList;
if (tab != activeTab) tab.className = "tab-disabled";
}
for (var i in panes[con]) {
var pane = panes[con];
if (pane == undefined) continue;
if (pane.id == paneId) continue;
pane.style.display = "none"
}
}
}
return false;
}
</script>
<form method="post" action="{S_POST_DAYS_ACTION}">
<table width="100%" cellspacing="2" cellpadding="2" border="0" align="center">
<tr>
<td align="left" valign="middle" width="50"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a></td>
<td align="left" valign="middle" class="nav" width="100%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a></span></td>
<td align="right" valign="bottom" class="nav" nowrap="nowrap"><span class="gensmall"><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></span></td>
</tr>
</table>
<div class="tab-container" id="container1">
<ul class="tabs">
<!-- BEGIN letter -->
<li><a href="#" onClick="return showPane('pane{letter.LETTER}', this)" id="tab{letter.LETTER}">{letter.LETTER}</a></li>
<!-- END letter -->
</ul>
<div class="tab-panes" >
<!-- BEGIN letter -->
<div id="pane{letter.LETTER}" style="display: block">
<table border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
<tr>
<th colspan="2" align="center" height="30" class="thCornerL" nowrap="nowrap"> {L_TOPICS} </th>
<th width="50" align="center" class="thTop" nowrap="nowrap"> {L_REPLIES} </th>
<th width="100" align="center" class="thTop" nowrap="nowrap"> {L_AUTHOR} </th>
<th width="50" align="center" class="thTop" nowrap="nowrap"> {L_VIEWS} </th>
<th align="center" class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
</tr>
<!-- BEGIN topicrow -->
<tr>
<td class="row1" align="center" valign="middle" width="20"><img src="{letter.topicrow.TOPIC_FOLDER_IMG}" width="30" height="30" alt="{letter.topicrow.L_TOPIC_FOLDER_ALT}" title="{letter.topicrow.L_TOPIC_FOLDER_ALT}" /></td>
<td class="row1" width="100%"><span class="topictitle">{letter.topicrow.NEWEST_POST_IMG}{letter.topicrow.TOPIC_TYPE}<a href="{letter.topicrow.U_VIEW_TOPIC}" class="topictitle">{letter.topicrow.TOPIC_TITLE}</a></span><span class="gensmall"><br />
{letter.topicrow.GOTO_PAGE}</span></td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{letter.topicrow.REPLIES}</span></td>
<td class="row3" align="center" valign="middle"><span class="name">{letter.topicrow.TOPIC_AUTHOR}</span></td>
<td class="row2" align="center" valign="middle"><span class="postdetails">{letter.topicrow.VIEWS}</span></td>
<td class="row3Right" align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{letter.topicrow.LAST_POST_TIME}<br />{letter.topicrow.LAST_POST_AUTHOR} {letter.topicrow.LAST_POST_IMG}</span></td>
</tr>
<!-- END topicrow -->
</table>
</div>
<!-- END letter -->
</div>
</div>
<script>
setupPanes("container1","taba");
</script>
<table width="100%" cellspacing="2" border="0" align="center" cellpadding="2">
<tr>
<td align="left" valign="middle" width="50"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a></td>
<td align="left" valign="middle" width="100%"><span class="nav"> <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a></span></td>
</tr>
</table>
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">{JUMPBOX}</td>
</tr>
</table>







