Simple Tab script works on IE but not FF

JavaScript
1

Hello,

In below page there a simple Tab script has been used. Both HTML and CSS codes are validated.

http://reorex.com/tt/en/index11.php

The script works on IE but not FF (if I change the header to html1 transitional instead of strict it starts to work).

I tried to debug the script and it seems to me that somewhere in below section FireFox terminates and does not continue into the Tab changing section.

  if(firstFlag == true){
     currentTab = Tab1;
     firstFlag = false;
  }

Other than that part of the code, the remaining seems to work (I guess this because I tried the alert commands to debug the script).

Could someone please help me with this? I really appreciate your time.

This is the page code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ReoRex Translation Services, Your One Stop Translation Partner</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src= "scripts.js" type="text/javascript"></script>
</head>
<body onload="init()">
<p>&nbsp;</p>

            <table id="TabTable1" cellspacing="0" cellpadding="0" border="0" width="100%" class="tabTable" onclick="changeTabs(event)">
             <tr>
              <td class="SelectedTab" id="Tab1">Services</td>
              <td class="UnselectedTab" id="Tab2">Solutions</td>
              <td class="UnselectedTab" id="Tab3">Internal Processes</td>
              <td class="NonTab">&nbsp;</td>
             </tr>
             <tr>
              <td colspan="4" id="tabContents" class="tabContent">&nbsp;</td>
             </tr>
            </table>


            <div class="HiddenContents" id="Tab1Contents">
                 <div style="padding:30px">Tab1 Content</div>
            </div>

            <div class="HiddenContents" id="Tab2Contents">
                 <div style="padding:30px">Tab2 Content</div>
            </div>

            <!-- Menu Tab 3 -->
            <div class="HiddenContents" id="Tab3Contents">
                 <div style="padding:30px">Tab3 Content</div>
            </div>
            <!-- Menu Tab 2 ends -->

</body>
</html>

And the Javascript code:

//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3){
 document.getElementById('Tab1').innerText = label1;
 document.getElementById('Tab2').innerText = label2;
 document.getElementById('Tab3').innerText = label3;
}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, content3){
 document.getElementById('Tab1Contents').innerHTML = contents1;
 document.getElementById('Tab2Contents').innerHTML = contents2;
 document.getElementById('Tab3Contents').innerHTML = contents3;
 init();
}

//sets the default display to tab 1
function init(){
 document.getElementById('tabContents').innerHTML = document.getElementById('Tab1Contents').innerHTML;
 window.onclick = changeTabs; // IE6 ignores this. mozilla firefox uses this to pass the window event.
} 

 //this is the tab switching function
 var currentTab=null;
 var firstFlag = true;
 var srcEle=null;

function changeTabs(event){

  if (window.event) {
    // IE event model
     srcEle = window.event.srcElement;
     //alert("IE:"+srcEle.id + " Class:"+ srcEle.className);
  }
  else {
    // DOM event model
     srcEle = event.target;
     //alert("DOM:"+srcEle.id + " Class:"+ srcEle.className);
  }
 
  if(firstFlag == true){
     currentTab = Tab1;
     firstFlag = false;
  }

  
  //alert("Change Comparison-> "+ srcEle.className + ":" + "UnselectedTab");
  if(srcEle.className == "UnselectedTab") {
     //alert("changing");
    
     currentTab.className = "UnselectedTab";
     currentTab = srcEle;
     tabContentID = currentTab.id + "Contents";
     tabContent = document.getElementById(tabContentID);
     currentTab.className = "SelectedTab";
     document.getElementById('tabContents').innerHTML = tabContent.innerHTML;
  }
}