visibility - CROSS BROWSER COMPATIBILITY

[sunny]

I am currently trying to create a website for my parents chimney sweeping business in Austria ... but I got stucked with the cross-browser compatibility when using div-visibility ... what I want to do is to create a button that sets various divs(tables) visible/invisible (menu) ...

the 'movein/out' - functions sets the <td> bgr.colour of the section menu in a highlight colour ...

the 'menuAction' - function is supposed to set the submenu visible/invisible ... - i put that on the different buttons in the sections as well as on the visible/invisible tables itself so that when u move over the submenu it stays visible ...

I'd be really thankful if someone could help me out with this ... I also realised that although giving the <td> a width (with text in it) works on a mac but wont work on a pc - does anyone know why that is??

------------------------

<script language="javascript">

function menuAction(myElement,on) {
if (on) { myElement.style.visibility = "visible" }
else { myElement.style.visibility = "hidden" }
}

function movein(which,html,mycolor){
which.style.background=mycolor
if (document.getElementById)
document.getElementById("boxdescription").outerHTML=html
else
boxdescription.outerHTML=html
}

function moveout(which,mycolor){
which.style.background=mycolor
if (document.getElementById)
document.getElementById("boxdescription").outerHTML='&nbsp;'
else
boxdescription.outerHTML='&nbsp;'
}

</script>

------------------------

<table width="1500" border="0" cellpadding="0" cellspacing="0" ID="topnavbar">
<tr>
<td width="102" align="center" valign="middle" bgcolor="767E8C" class="topnav" id="firmen"><a href="firmen.html" style="cursor:hand" onmouseover="TOPmovein(firmen,'Firmen','#98C964',firmenTOP,'#98C964')" onmouseout="TOPmoveout(firmen,'#767E8C',firmenTOP,'#c2c2c2')"">Firmen</a></td>
<td width="20" align="center" valign="middle" bgcolor="767E8C" class="topnav">|</td>
<td width="122" align="center" valign="middle" bgcolor="767E8C" class="topnav" id="arbeit"><a href="arbeiten.html" style="cursor:hand" onmouseover="TOPmovein(arbeit,'Arbeiten','#98C964',arbeitTOP,'#98C964')" onmouseout="TOPmoveout(arbeit,'#767E8C',arbeitTOP,'#c2c2c2')"">Arbeiten</a></td>
<td bgcolor="767E8C"><!--DWLayoutEmptyCell-->&nbsp;</td></tr></table>

<div ID="middlenavDIV" style="left: 0px; top: 45px" class="middlenav"><table width="1500" border="0" cellpadding="0" cellspacing="0" bgcolor="98C964" ID="middlenavbar">
<tr>
<td width="91" align="center" valign="middle" class="middlenav" id="reinigung" onmouseover="menuAction(reinigungDIV,true)" onmouseout="menuAction(reinigungDIV,false)"><a href="#" style="cursor:hand" onmouseover="movein(reinigung,'Reinigungen','#c8f09c')" onmouseout="moveout(reinigung,'#98C964')"">Reinigungen</a></td>
<td width="15" align="center" valign="middle" class="middlenav">|</td>
<td width="75" align="center" valign="middle" class="middlenav" id="messung" ><a href="#" style="cursor:hand" onmouseover="movein(messung,'Messungen','#c8f09c')" onmouseout="moveout(messung,'#98C964')"">Messungen</a></td>
<td><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr></table></div>

<div ID="reinigungDIV" style="left: 0px; top: 63px; visibility=hidden" CLASS="bottomnav">
<table width="1500" border="0" cellpadding="0" cellspacing="0" bgcolor="98C964" ID="bottomnavbar" onmouseover="menuAction(reinigungDIV,true)" onmouseout="menuAction(reinigungDIV,false)">
<tr>
<td width="90" align="center" valign="middle" class="bottomnav" id="hauptkehrung"><a href="" style="cursor:hand" onmouseover="movein(hauptkehrung,'Hauptkehrung','#c2c2c2')" onmouseout="moveout(hauptkehrung,'#c8f09c')"">Hauptkehrung</a></td>
<td width="15" align="center" valign="middle" class="bottomnav">|</td>
<td width="90" align="center" valign="middle" class="bottomnav" id="kehrung"><a href="" style="cursor:hand" onmouseover="movein(kehrung,'Kehrung','#c2c2c2')" onmouseout="moveout(kehrung,'#c8f09c')"">Kehrung</a></td></table></div>
------------------------

[sunny]

when I use netscape the div visibility script doesn't work

here's a link to the full file:
http://www.fruechtl.at/RAUCHFANG_working/nav2.html

[dimpie]

Hi Sunny,

I think I found a very good site that can give you some answers to your questions.

The author says:
"You can use JavaScript to access and change the properties of your CSS-P element. However, some of the syntax differs between Netscape 4.0 and Internet Explorer 4.0. By knowing where the differences lie, I'll show you an easy way to create cross-browser JavaScripts - scripts that will work in both N4 and IE4."

You really should have a look at it. Go to
http://www.dansteinman.com/dynduo/index.html
and click on the link "4. Hiding and showing".

Hope this helps.

:) Dimpie.