CSS nav in Gecko browsers gives you epilepsy

rolling between text areas makes menu disappear

[Don_Hoagie]

Has anyone come across this before, or am I doing something wrong...

I've created a CSS-styled definition list as navigation... it tests successfully in IE6, IE5.5, Opera, Safari, and IE:Mac.

Gecko Browsers? EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEHTTTT! (that would be a buzzer sound in case I spelled it wrong).

The nav has a nasty habit of disappearing when you move off one text area, then reappearing as you roll over the text area of the next nav item... overall it causes an epileptic effect, and (possibly) worse, it seems to lead to other wacky issues, like the menu staying up even though you've moused off it, or disappearing totally if you mouse over too slowly... very annoying. Is it an attribute of the <dl>?

What am I doing wrong? I got rid of all margins and padding to make sure that wasn't the issue, and placed the menu on the highest z-index. Still a problem. I'll post the somewhat lengthy code if the replies don't have a "seen it before" answer.

[xfinx]

That is strange, I never had an experience like that with Gecko alike browsers..
Can you post your css code?

[garann]

I think I know the problem you mean... I've found it sometimes helps to play with margins and padding. (But I guess you've done that - were they all set to 0?)

If that's not the problem, maybe try something with backgrounds and borders?

[Don_Hoagie]

Code time:

(all border/padding/margin removed. Still flickers when mousing between menu items, and still tends to stay "dropped-down" when you mouse out)

The CSS (yes it could use some cleaning... still tweaking the menu style though):

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
bottom: 266px;
left: 1px;
z-index: 999;
width: 800px;
}

#menu dl {
float: left;
width: 114px;
position: relative;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 0;
background: #000;
margin: 0;
padding: 0;
}

#menu dd {
display: none;
background-color: #000;
border: 0;
margin: 0;
position: absolute;
bottom: 2px;
left: -1px;
width: 100%;
}

#menu li {
text-align: center;
margin: 0;
}

#menu li a, #menu dt a {
color: #ccc;
text-decoration: none;
font-weight: bold;
display: block;
height: 100%;
border: 0 none;
background-color: #181818;
padding: 0;
}

#menu li a:hover, #menu dt a:hover {
background: #333;
color: #fff;
}

Thanks in advance for any help

[garann]

You could try...

margin: 0;

for your anchors

position: relative;

for your inner elements

Since you're using Javascript, not CSS, to control the menu, it might help to see some of the html, just to see where the functions to open and close the menu are attached.

The only thing that consistently works for me is giving everything really obnoxious colors to see what element the mouse is over when the menu flickers.

[Don_Hoagie]

This is the nav's JS:

window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('menu'+i)) {document.getElementById('menu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

And an example of the HTML menu:

<div id="menu">
<dl>
<dt onmouseover="javascript:show('menu1');" class="p2">Menu1<dt>
<dd id="menu1" onmouseover="javascript:show('menu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="example.html">Item1</a></li>
<li><a href="example.html">Item2</a></li>
<li><a href="example.html">Item3</a></li>
<li><a href="example.html">Item4</a></li>
</ul>
</dd>
</dl>
</div>

[edited by: createErrorMsg at 2:25 am (utc) on Sep. 22, 2005]