• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

Javascript Not working in Mozilla + Netscape

I have a html file called test.htm and a style sheet called Gr_style.css and i use javascript to display and hide rows.

This work fine in IE but not mozilla firefox or netscape.

I have attached the file code and css code whoever can get it to work in all browsers gets 430 points

Thanks



// Code for htm file //


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
      <head>
            <title></title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <link href="GR_style.css" rel="stylesheet" type="text/css">
      </head>
      <body>
            <table class="TableBody" cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table1">
                  <tr vAlign="middle">
                        <td id="td1" class="tr221" onmouseover="RollOverIt(0,1,0,0,0,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td2" class="tr222" onmouseover="RollOverIt(0,0,1,0,0,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td3" class="tr223" onmouseover="RollOverIt(0,0,0,1,0,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td4" class="tr224" onmouseover="RollOverIt(0,0,0,0,1,0,1)" onmouseout="RollOutIt()" width="20%"></td>
                        <td id="td5" class="tr225" onmouseover="RollOverIt(0,0,0,0,0,1,1)" onmouseout="RollOutIt()" width="20%"></td>
                  </tr>
            </table>
            <table cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table2">
                  <tr id="A1">
                        <td class="TDHeight"></td>
                  </tr>
                  <tr id="A2">
                        <td onmouseover="RollOverIt(0,1,0,0,0,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A3">
                        <td onmouseover="RollOverIt(0,0,1,0,0,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A4">
                        <td onmouseover="RollOverIt(0,0,0,1,0,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A5">
                        <td onmouseover="RollOverIt(0,0,0,0,1,0,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
                  <tr id="A6">
                        <td onmouseover="RollOverIt(0,0,0,0,0,1,1)" onmouseleave="RollOutIt()"></td>
                  </tr>
            </table>
            <script language="JavaScript" type="text/JavaScript">
<!--

function RollOverIt(obj1,obj2,obj3,obj4,obj5,obj6,j)
{
      
 if(obj2 == 1)
 {
      
            document.getElementById('td1').className = 'tr221Over';
      
      document.getElementById('A1').className = 'sub1Over';
      document.getElementById('A2').className = 'sub2Over';
      
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
 }
 if(obj3 == 1)
 {
      
            document.getElementById('td2').className = 'tr222Over';
      document.getElementById('A3').className = 'sub3Over';
      document.getElementById('A1').className = 'sub1Over';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
      document.getElementById('A2').className = 'sub2';
 }
 if(obj4 == 1)
 {
      
            document.getElementById('td3').className = 'tr223Over';
      document.getElementById('A4').className = 'sub4Over';
      document.getElementById('A1').className = 'sub1Over';
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
 }
 if(obj5 == 1)
 {
      
            document.getElementById('td4').className = 'tr224Over';
      document.getElementById('A5').className = 'sub5Over';
      document.getElementById('A1').className = 'sub1Over';
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      
      document.getElementById('A6').className = 'sub6';
 }
 if(obj6 == 1)
 {
      
            document.getElementById('td5').className = 'tr225Over';
      document.getElementById('A6').className = 'sub6Over';
      document.getElementById('A1').className = 'sub1Over';
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      
 }
 
}
function BodyLoaded()
{
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
      document.getElementById('A1').className = 'TDHeight';

}

function RollOutIt()
{
      
      document.getElementById('A2').className = 'sub2';
      document.getElementById('A3').className = 'sub3';
      document.getElementById('A4').className = 'sub4';
      document.getElementById('A5').className = 'sub5';
      document.getElementById('A6').className = 'sub6';
      document.getElementById('A1').className = 'TDHeight';
      document.getElementById('td1').className = 'tr221';
      document.getElementById('td2').className = 'tr222';
      document.getElementById('td3').className = 'tr223';
      document.getElementById('td4').className = 'tr224';
      document.getElementById('td5').className = 'tr225';
      
}


            </script>
      </body>
</html>



// Code for css // This is essential to get the colors working //


body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      background-color: #FFECD4;
}

body,td,th {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #333333;
}
a:link {
      color: #FB8538;
      text-decoration: none;
}
a:visited {
      text-decoration: none;
      color: #FEA762;
}
a:hover {
      text-decoration: underline;
      color: #005787;
}
a:active {
      text-decoration: none;
      color: #FC7316;
}
.contentBox {
      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 50px;
      background-color: #ffffff;
}
.tr225
{
      border-right: #ffffff 0px solid;
      border-top: #ffffff 1px solid;
      
      border-left: #ffffff 0px solid;
      border-bottom: #ffffff 1px solid;
      height: 20px;
      background-color: #005787;
}
.tr224 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #008493;
      
}
.tr223 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #86112a;
      
}
.tr222 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #767615;
      
}
.tr221 {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #fc7316;
      
}


.tr225Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 0px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #80ABC3;
}
.tr224Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #80C2C9;
}
.tr223Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #C38895;
}
.tr222Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #BBBB8A;
}
.tr221Over {
      height: 20px;
      border-top-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      background-color: #FEB98B;
      
}
.botTable
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      font-size: 11px;
      padding-bottom: 2px;
      border-left: #ffffff 1px solid;
      color: #ffffff;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}
.botTable2
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      padding-bottom: 2px;
      border-left: #ffffff 0px solid;
      color: #ffffff;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}

.botTableOver2
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      font-size: 11px;
      padding-bottom: 2px;
      border-left: #ffffff 1px solid;
      color: #008493;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}
.botTable2Over
{
      border-right: #ffffff 1px solid;
      padding-right: 2px;
      border-top: #ffffff 1px solid;
      padding-left: 15px;
      padding-bottom: 2px;
      border-left: #ffffff 0px solid;
      color: #008493;
      padding-top: 2px;
      border-bottom: #ffffff 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      height: 22px;
}

.TableTD
{      height: 80px;
      background-color: #fea762;
}
.TableBody
{
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
      
}
.TDColor
{
      background-color: #fb8538;
}
.TDBorderColor
{
      height: 22;
      border-top-color: #FFFFFF;
      border-right-color: #FFFFFF;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
}
.TDColorHeight
{
      height: 43px;
      background-color: #fea762;
}
.TDHeight1
{
      background-image: url(images/scroll_tests/200132035-003.jpg);
      height: 213px;

}
.TableHeight
{
      height: 80;
}
.TDHeight
{
      height: 22px;
}

.sub1
{
      height: 22px;
      background-color: #fea762;

}

.sub2
{
      height: 22px;
      background-color: #fb8538;
      display: none;
      
}

.sub3
{
      height: 22px;
      background-color: #767615;
      display: none;
}

.sub4
{
      height: 22px;
      background-color: #86112a;
      display: none;
}

.sub5
{
      height: 22px;
      background-color: #008493;
      display: none;
}

.sub6
{
      height: 22px;
      background-color: #005787;
      display: none;
}


.sub1Over
{
      height: 22px;
      background-color: #fea762;
      display: none;
}

.sub2Over
{
      background-color: #fb8538;
      display: block;
      height: 22px;
      
}

.sub3Over
{
      height: 22px;
      background-color: #767615;
      
}

.sub4Over
{
      height: 22px;
      background-color: #86112a;
      
}

.sub5Over
{
      height: 22px;
      background-color: #008493;
      
}

.sub6Over
{
      height: 22px;
      background-color: #005787;
      
}
.thistab {
      BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 1; BACKGROUND: #ffffff; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond; TEXT-ALIGN: center
}
.tab {
      BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 20; BACKGROUND: #091889; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond; HEIGHT: 25px; TEXT-ALIGN: center
}
.contents {
      BORDER-TOP: white 1px solid; BACKGROUND: #5a35c5; LEFT: 0px; WIDTH: 100%; COLOR: white; BORDER-BOTTOM: white 1px solid; POSITION: absolute; TOP: 125px; HEIGHT: 27px; TEXT-ALIGN: center
}
0
jon6
Asked:
jon6
  • 3
  • 2
1 Solution
 
jon6Author Commented:
By the way if you look at it in IE 5 or 6 you will see you can go a color and a sub color appears. you can hover over that one but when you go of it, it disapears
0
 
dakydCommented:
Your css can be cleaner, but let's make sure that we can get it to do what you want first.  Give the following a shot (I took the contents of your <link>'ed stylesheet and put it in <style></style> to make it easier to test).  Hopefully that'll help, does it do what you want now?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD PUBLIC HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <head>
          <title></title>
          <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
          <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
          <style type="text/css">
body {
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     background-color: #FFECD4;
}

body,td,th {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
}
a:link {
     color: #FB8538;
     text-decoration: none;
}
a:visited {
     text-decoration: none;
     color: #FEA762;
}
a:hover {
     text-decoration: underline;
     color: #005787;
}
a:active {
     text-decoration: none;
     color: #FC7316;
}
.contentBox {
     padding-top: 20px;
     padding-right: 20px;
     padding-bottom: 20px;
     padding-left: 50px;
     background-color: #ffffff;
}
.tr225
{
     border-right: #ffffff 0px solid;
     border-top: #ffffff 1px solid;
     
     border-left: #ffffff 0px solid;
     border-bottom: #ffffff 1px solid;
     height: 20px;
     background-color: #005787;
}
.tr224 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #008493;
     
}
.tr223 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #86112a;
     
}
.tr222 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #767615;
     
}
.tr221 {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #fc7316;
     
}


.tr225Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 0px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #80ABC3;
}
.tr224Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #80C2C9;
}
.tr223Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #C38895;
}
.tr222Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #BBBB8A;
}
.tr221Over {
     height: 20px;
     border-top-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     background-color: #FEB98B;
     
}
.botTable
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     font-size: 11px;
     padding-bottom: 2px;
     border-left: #ffffff 1px solid;
     color: #ffffff;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}
.botTable2
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     padding-bottom: 2px;
     border-left: #ffffff 0px solid;
     color: #ffffff;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}

.botTableOver2
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     font-size: 11px;
     padding-bottom: 2px;
     border-left: #ffffff 1px solid;
     color: #008493;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}
.botTable2Over
{
     border-right: #ffffff 1px solid;
     padding-right: 2px;
     border-top: #ffffff 1px solid;
     padding-left: 15px;
     padding-bottom: 2px;
     border-left: #ffffff 0px solid;
     color: #008493;
     padding-top: 2px;
     border-bottom: #ffffff 1px solid;
     font-family: Arial, Helvetica, sans-serif;
     height: 22px;
}

.TableTD
{     height: 80px;
     background-color: #fea762;
}
.TableBody
{
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
     
}
.TDColor
{
     background-color: #fb8538;
}
.TDBorderColor
{
     height: 22;
     border-top-color: #FFFFFF;
     border-right-color: #FFFFFF;
     border-bottom-color: #FFFFFF;
     border-left-color: #FFFFFF;
}
.TDColorHeight
{
     height: 43px;
     background-color: #fea762;
}
.TDHeight1
{
     background-image: url(images/scroll_tests/200132035-003.jpg);
     height: 213px;

}
.TableHeight
{
     height: 80px;
}
.TDHeight
{
     height: 22px;
}

.sub1
{
     height: 22px;
     background-color: #fea762;

}

.sub2
{
     height: 22px;
     background-color: #fb8538;
     display: none;
     
}

.sub3
{
     height: 22px;
     background-color: #767615;
     display: none;
}

.sub4
{
     height: 22px;
     background-color: #86112a;
     display: none;
}

.sub5
{
     height: 22px;
     background-color: #008493;
     display: none;
}

.sub6
{
     height: 22px;
     background-color: #005787;
     display: none;
}


.sub1Over
{
     height: 22px;
     background-color: #fea762;
     display: none;
}

.sub2Over
{
     background-color: #fb8538;
     display: block;
     height: 22px;
     
}

.sub3Over
{
     height: 22px;
     background-color: #767615;
     display: block;
}

.sub4Over
{
     height: 22px;
     background-color: #86112a;
     display: block;
}

.sub5Over
{
     height: 22px;
     background-color: #008493;
     display: block;
}

.sub6Over
{
     height: 22px;
     background-color: #005787;
     display: block;
}
.thistab {
     BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 1; BACKGROUND:

#ffffff; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond;

TEXT-ALIGN: center
}
.tab {
     BORDER-RIGHT: white 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10pt; Z-INDEX: 20; BACKGROUND:

#091889; BORDER-LEFT: white 1px solid; CURSOR: hand; COLOR: white; FONT-FAMILY: garamond; HEIGHT:

25px; TEXT-ALIGN: center
}
.contents {
     BORDER-TOP: white 1px solid; BACKGROUND: #5a35c5; LEFT: 0px; WIDTH: 100%; COLOR: white;

BORDER-BOTTOM: white 1px solid; POSITION: absolute; TOP: 125px; HEIGHT: 27px; TEXT-ALIGN: center
}
          </style>
     </head>
     <body>
          <table class="TableBody" cellSpacing="0" cellPadding="0" width="100%" border="0"

ID="Table1">
               <tr vAlign="middle">
                    <td id="td1" class="tr221" onmouseover="RollOverIt(0,1,0,0,0,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td2" class="tr222" onmouseover="RollOverIt(0,0,1,0,0,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td3" class="tr223" onmouseover="RollOverIt(0,0,0,1,0,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td4" class="tr224" onmouseover="RollOverIt(0,0,0,0,1,0,1)"

onmouseout="RollOutIt()" width="20%"></td>
                    <td id="td5" class="tr225" onmouseover="RollOverIt(0,0,0,0,0,1,1)"

onmouseout="RollOutIt()" width="20%"></td>
               </tr>
          </table>
          <table cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table2">
               <tr id="A1">
                    <td class="TDHeight"></td>
               </tr>
               <tr id="A2">
                    <td onmouseover="RollOverIt(0,1,0,0,0,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A3">
                    <td onmouseover="RollOverIt(0,0,1,0,0,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A4">
                    <td onmouseover="RollOverIt(0,0,0,1,0,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A5">
                    <td onmouseover="RollOverIt(0,0,0,0,1,0,1)" onmouseleave="RollOutIt()"></td>
               </tr>
               <tr id="A6">
                    <td onmouseover="RollOverIt(0,0,0,0,0,1,1)" onmouseleave="RollOutIt()"></td>
               </tr>
          </table>
          <script language="JavaScript" type="text/JavaScript">
<!--

function RollOverIt(obj1,obj2,obj3,obj4,obj5,obj6,j)
{
     
 if(obj2 == 1)
 {
     document.getElementById('td1').className = 'tr221Over';
     
     document.getElementById('A1').className = 'sub1Over';
     document.getElementById('A2').className = 'sub2Over';
     
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
 }
 if(obj3 == 1)
 {

     document.getElementById('td2').className = 'tr222Over';
     document.getElementById('A3').className = 'sub3Over';
     document.getElementById('A1').className = 'sub1Over';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
     document.getElementById('A2').className = 'sub2';
 }
 if(obj4 == 1)
 {
     
     document.getElementById('td3').className = 'tr223Over';
     document.getElementById('A4').className = 'sub4Over';
     document.getElementById('A1').className = 'sub1Over';
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
 }
 if(obj5 == 1)
 {
     
     document.getElementById('td4').className = 'tr224Over';
     document.getElementById('A5').className = 'sub5Over';
     document.getElementById('A1').className = 'sub1Over';
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     
     document.getElementById('A6').className = 'sub6';
 }
 if(obj6 == 1)
 {
     
     document.getElementById('td5').className = 'tr225Over';
     document.getElementById('A6').className = 'sub6Over';
     document.getElementById('A1').className = 'sub1Over';
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     
 }
 
}
function BodyLoaded()
{
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
     document.getElementById('A1').className = 'TDHeight';

}

function RollOutIt()
{
     
     document.getElementById('A2').className = 'sub2';
     document.getElementById('A3').className = 'sub3';
     document.getElementById('A4').className = 'sub4';
     document.getElementById('A5').className = 'sub5';
     document.getElementById('A6').className = 'sub6';
     document.getElementById('A1').className = 'TDHeight';
     document.getElementById('td1').className = 'tr221';
     document.getElementById('td2').className = 'tr222';
     document.getElementById('td3').className = 'tr223';
     document.getElementById('td4').className = 'tr224';
     document.getElementById('td5').className = 'tr225';
}
          </script>
     </body>
</html>
0
 
jon6Author Commented:
I have moved away from that idea, however i used some code from dynamic crive which should work in all browsers, but it does not work in mozilla or netscape.

If you still want to try for the points you could have a look at that instead

Thanks
0
 
dakydCommented:
Sure, I could look at the code for you.  I have no idea which code you're referring to, though, so could you post it here?  If that's too big, then post a link.  Let me know and I'll try to help you out.
0
 
dakydCommented:
>> This is the code, it works fine, i think there is a ie 4 problem dont know if you could fix that, but the main problem is that i cant get a mouse over on the submenus to work as it is a div tag. I have put a mouse over on a hyper link which fires an event but dont know how i could make the whole row turn a different color instead of setting the whole submenu a different color

Sorry didn't respond, didn't check email till now.  That said, I'm not sure I follow what you want - you want each of the sub-menus to do something when the mouse hovers over them?  When you say "whole row turn a different color", do you mean that you want a row within the submenu to turn a different color, or do you want the row of menu tabs to turn a different color?  Let me know what you mean and I'll get back to you.

By the way, if anyone else is interested, I put up a copy of the code that jon6 is working with here:
http://www.freewebs.com/dakyd/ee/dropdown/dropdown.htm
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now