So im using this right now:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<STYLE>
#maincontent {
width: 860px;
position: relative;
margin-bottom: 20px;
margin-top: 40px;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
margin-right: auto;
margin-left: auto;
}
#tabContents {
vertical-align: top;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #336633;
border-right-color: #336633;
border-bottom-color: #336633;
border-left-color: #336633;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #21A54F;
padding-bottom: 10px;
}
#TabHidden {
position: absolute;
width: 834px;
left: 57px;
top: 277px;
height: 260px;
clear: both;
visibility: hidden;
overflow: hidden;
}
#redirect {
width: 746px;
margin-left: 56px;
margin-bottom: 15px;
font-family: Verdana, Geneva, sans-serif;
font-style: italic;
color: #276B3F;
font-size: 10px;
text-align: center;
}
#TabDivPic {
height: auto;
width: 175px;
margin-right: 30px;
float: left;
}
.conts {
visibility:hidden
}
.tab {
font-family:Verdana, Geneva, sans-serif;
font-size:10pt;
text-align:center;
font-weight:normal;
color: #FFF;
background-color: #21A54F;
border-right-style: solid;
border-left-style: solid;
border-right-width: thin;
border-left-width: thin;
border-right-color: #CCC;
border-left-color: #CCC;
}
.selTab {
font-weight:bold;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
background-color: #276B3F;
font-size: 12px;
}
#tabstyle #td {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
}
#tabtable {
width: 656px;
}
</STYLE>
<SCRIPT language="javascript" type="text/javascript">
//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3, label4, label5, label6, label7){
t1.innerText = label1;
t2.innerText = label2;
t3.innerText = label3;
t4.innerText = label4;
t5.innerText = label5;
t6.innerText = label6;
t7.innerText = label7;
}
//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){
t1Contents.innerHTML = contents1;
t2Contents.innerHTML = contents2;
t3Contents.innerHTML = contents3;
t4Contents.innerHTML = contents4;
t5Contents.innerHTML = contents5;
t6Contents.innerHTML = contents6;
t7Contents.innerHTML = contents7;
init();
}
//sets the default display to tab 1
function init(){
tabContents.innerHTML = t1Contents.innerHTML;
}
//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;
function changeTabs(event){
if(firstFlag == true){
currentTab = t1;
tabBase = t1base;
firstFlag = false;
}
if(event.target.className == "tab"){
currentTab.className = "tab";
tabBase.style.backgroundColor = "white";
currentTab = event.target;
tabBaseID = currentTab.id + "base";
tabContentID = currentTab.id + "Contents";
tabBase = document.getElementById(tabBaseID);
tabContent = document.getElementById(tabContentID);
currentTab.className = "selTab";
tabBase.style.backgroundColor = "";
tabContents.innerHTML = tabContent.innerHTML;
}
}
</SCRIPT>
</HEAD>
<BODY>
<div id="maincontent">
<DIV STYLE="position:relative; top:0px; height:400; width:746px; left:56px; border:none thin gray" onClick="changeTabs(event)" onload="init()">
<TABLE id="tabtable" CELLPADDING=0 CELLSPACING=0>
<TR id="tabstyle">
<TD ID=t1 CLASS=selTab HEIGHT=25>TAB ONE</TD>
<TD ID=t2 CLASS=tab>TAB TWO</TD>
<TD ID=t3 CLASS=tab>TAB THREE</TD>
<TD ID=t4 CLASS=tab>TAB FOUR</TD>
<TD ID=t5 CLASS=tab>TAB FIVE</TD>
<TD ID=t6 CLASS=tab>TAB SIX</TD>
<TD ID=t7 CLASS=tab>TAB SEVEN</TD>
</TR>
<TR>
<TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
<TD ID=t2base STYLE="height:2; background-color:white"></TD>
<TD ID=t3base STYLE="height:2; background-color:white"></TD>
<TD ID=t4base STYLE="height:2; background-color:white"></TD>
<TD ID=t5base STYLE="height:2; background-color:white"></TD>
<TD ID=t6base STYLE="height:2; background-color:white"></TD>
<TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD>
</TR>
<TR>
<TD HEIGHT="*" COLSPAN=7 ID=tabContents>
content<br>
content<br>
content<br>
content<br>
</TD>
</TR>
</TABLE>
</DIV>
<div id="TabHidden">
<DIV CLASS=conts ID=t1Contents>
content<br>
content<br>
content<br>
content<br>
</DIV>
<DIV CLASS=conts ID=t2Contents>
content<br>
content<br>
content<br>
content<br>
</DIV>
<DIV CLASS=conts ID=t3Contents>
content<br>
content<br>
content<br>
content<br>
</DIV>
<DIV CLASS=conts ID=t4Contents>
content<br>
content<br>
content<br>
content<br>
</DIV>
<DIV CLASS=conts ID=t5Contents>
content<br>
content<br>
content<br>
content<br>
</DIV>
<DIV CLASS=conts ID=t6Contents>
content<br>
content<br>
content<br>
content<br>
</DIV>
<DIV CLASS=conts ID=t7Contents>
content<br>
content<br>
content<br>
content<br>
</DIV>
</div>
</DIV>
</BODY>
</HTML>
The tab works perfectly fine for Chrome and IE. But doesnt work for Fire Fox. Need help
sorry if its messy, first time using this forum
