Having problem Hiding Menu

Problem in IE, Mozilla Hiding A Menu

[tgpo]

I've been working on a new design for my website, but have hit a snag. The site operates perfectly under Safari, but IE and Mozilla have having trouble. Under IE the first menu is always visible, which it shouldn't. The second menu operates as it should. The thing is that the same code is used on both.

I want it so that if you click on Tutorials and Programs a small menu appears underneath the buttons. Then if you click on a link the menu hides.

Safari does this perfectly, but I'm having trouble with other browsers and have run out of ideas. Any help would be great.

The website in question is <No personal URLs, thanks. See TOS [webmasterworld.com]>

[edited by: DrDoc at 2:39 pm (utc) on June 22, 2004]

[tgpo]

I think I may have fixed it. I had the div tag inside of a table, which IE didn't like. I took it out and repositioned the div with css and it appears to be working.

[DrDoc]

Welcome to WebmasterWorld!

Were you using JavaScript to toggle the menu? I don't know if you're happy with just having solved the problem, or if you're still looking for an answer to why it happened in the first place?

[tgpo]

Howdy DrDoc.

Actually it isn't completely fixed. IE on a Mac works, but IE on a PC doesn't. On a PC the menu is too far right and is cut off halfway. Plus FireFox still doesn't display anything.

I fixed IE on the Mac by taking the div out of a table. Could the problem be that it is still in a larger table?

Any ideas on how to fix it?

[DrDoc]

Got some sample [webmasterworld.com] CSS and/or JavaScript we can look at?

[tgpo]

I do, but I belive to fix the problem I'll have to post almsot all the code. In the page linked from the sample code guidelines page it said try not to code dump. So if I post what you feel is too much, then by all means filter some out.

My Javascript Hide Menu & Hide All Functions:

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
 if(document.layers) //NN4+
 {
 document.layers[szDivID].visibility = iState? "show" : "hide";
 }
 else if(document.getElementById) //gecko(NN6) + IE 5+
 {
 var obj = document.getElementById(szDivID);
 obj.style.visibility = iState? "visible" : "hidden";
 }
 else if(document.all) // IE 4
 {
 document.all[szDivID].style.visibility = iState? "visible" : "hidden";
 }
}
function hide() // 1 visible, 0 hidden
{
 if(document.layers) //NN4+
 {
 document.layers.dropmenu0.visibility = 0? "show" : "hide";
 document.layers.dropmenu1.visibility = 0? "show" : "hide";
 }
 else if(document.getElementById) //gecko(NN6) + IE 5+
 {
 var obj = document.getElementById('dropmenu0');
 obj.style.visibility = 0? "visible" : "hidden";
 var obj = document.getElementById('dropmenu1');
 obj.style.visibility = 0? "visible" : "hidden";
 }
 else if(document.all) // IE 4
 {
 document.all.dropmenu0.style.visibility = 0? "visible" : "hidden";
 document.all.dropmenu1.style.visibility = 0? "visible" : "hidden";
 }
}
// -->
</script>

The Code for the two menus:

<span style="position:relative">
<div class="menu" id="dropmenu0" style="z-index:1;position:absolute;left:20;top:-70;layer-background-color:white;background-color:white;width:725;visibility:hidden;border:1px solid black;padding:2px">
<table border=0 bgcolor=black colspan=6 cellpadding=2 width=725>
<tr>
<td valign="top" bgcolor=white>
<font size=2>
DVD to VCD:<br>
<a href=test.htm class=drop>Using Forty-Two</a><br>
<a href=test.htm class=drop>OS 9</a></font></td>
<td valign="top" bgcolor=white><font size=2>
DVD to DVD-R:<br>
<a href=test.htm class=drop>Using DVDBackup, DVD2OneX, Toast</a></font></td>
<td valign="top" bgcolor=white><font size=2>
DVD to Divx:<br>
<a href=test.htm class=drop>Using Handbrake</a></font></td>
<td valign="top" bgcolor=white><font size=2>
Divx to VCD<br>
<a href=test.htm class=drop>Using Divx Doctor II</a></font></td>
<td valign="top" bgcolor=white><font size=2>
Divx to VCD<br>
<a href=test.htm class=drop>Using Sizzle</a><br>
<a href=test.htm class=drop>MP42 to DVD</a></font></td>
<td valign="top" bgcolor=white><font size=2>
Video Tutorials:<br>
<a href=test.htm class=drop>DVD Studio Pro 2</a><br>
<a href=test.htm class=drop>QT Mutator</a></font></td></tr></table>
</div>
<div id="dropmenu1" style="z-index:1;position:absolute;left:20;top:-70;layer-background-color:white;background-color:red;width:725;visibility:hidden;border:1px solid black;padding:2px">
<table border=0 bgcolor=black colspan=6 cellpadding=2 width=725>
<tr>
<td valign="top" bgcolor=white>
<font size=2>
DVD to VCD:<br>
<a href=test.htm class=drop>Using Forty-Two</a><br>
<a href=test.htm class=drop>OS 9</a></font></td>
<td valign="top" bgcolor=white><font size=2>
DVD to DVD-R:<br>
<a href=test.htm class=drop>Using DVDBackup, DVD2OneX, Toast</a></font></td>
<td valign="top" bgcolor=white><font size=2>
DVD to Divx:<br>
<a href=test.htm class=drop>Using Handbrake</a></font></td>
<td valign="top" bgcolor=white><font size=2>
Divx to VCD<br>
<a href=test.htm class=drop>Using Divx Doctor II</a></font></td>
<td valign="top" bgcolor=white><font size=2>
Divx to VCD<br>
<a href=test.htm class=drop>Using Sizzle</a><br>
<a href=test.htm class=drop>MP42 to DVD</a></font></td>
<td valign="top" bgcolor=white><font size=2>
Video Tutorials:<br>
<a href=test.htm class=drop>DVD Studio Pro 2</a><br>
<a href=test.htm class=drop>QT Mutator</a></font></td></tr></table>
</div>
</span>

How I am calling the menus:

 <area shape="rect" coords="130,10,255,40" href="javascript:toggleBox('dropmenu1',0);" title="Tutorials" alt="" target="body" onClick="toggleBox('dropmenu0',1);">
 <area shape="rect" coords="430,10,570,40" href="javascript:toggleBox('dropmenu0',0);" title="Programs" alt="" target="body" onClick="toggleBox('dropmenu1',1);">

The two menus are declared inside of a table, that is inside of a table if it makes any difference. I've been messing with this for about 3 days now and have made a little headway, but have hit a brick wall here and not sure how to continue.

[mattglet]

*bump*

(I'm looking for the solution to a similar problem)

-Matt