Trying to setup a simple 'menu' that appears when you mouse over a div. The divs that you mouse over are stacked vertically. The absolute div is positioned underneath. When mouse over the 'menu' div appears but the divs below show through. This happens regardless of z-index. Here's a link to an example of this problem. http://www.myvrad.com/problem.html Here's the code I'm using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script language="javascript" type="text/javascript" > function MakeVisibilityHidden(elementName) { var el = document.getElementById(elementName); el.style.visibility = 'hidden'; } function MakeVisibilityVisible(elementName) { var el = document.getElementById(elementName); el.style.visibility = 'visible'; } </script> <p style="font-size: 11pt;"> Problem is div underneath shows through. This happens even when z-index is set so it should not. This happens in IE6 and FF2 if I define a z-index for both divs. Problem is fixed in FF2 if I don't define a z-index for the containing div (the relative defined div). I can't figure this out. Please help. rvarcher1 at the yahoo dot com </p> <style type="text/css"> body { font-size: 10pt; font-family: Arial; } .CssPopUpMenuContainer { height: 20px; position: relative; z-index: 98; } .CssPopUpMenuContainerWithoutZIndex { height: 20px; position: relative; } .CssPopUpMenu { position: absolute; display: block; visibility: hidden; width: 300px; background-color: #EEEEEE; padding: 2px; top: 19px; left: 0px; border: solid 1px #AAAAAA; z-index: 99; } </style> <title>Banging Head Against Wall - Hurts Much</title> </head> <body> <br /> Here it is with z-index defined on both divs. <br />- Problem exists in IE 6 <br />- Problem exists in FF 2 <pre> CSS IS: .CssPopUpMenuContainer { height: 20px; position: relative; z-index: 98; } .CssPopUpMenu { position: absolute; display: block; visibility: hidden; width: 300px; background-color: #EEEEEE; padding: 2px; top: 19px; left: 0px; border: solid 1px #AAAAAA; z-index: 99; } </pre> <table cellspacing="0" cellpadding="3" rules="all" border="1" style="background-color:White; font-size:9pt; border-collapse:collapse;"> <tr> <td> <div id="PopUpMenuContainer1" class="CssPopUpMenuContainer" onmouseover='MakeVisibilityVisible("PopUpMenu1"); this.style.backgroundColor="silver";' onmouseout='MakeVisibilityHidden("PopUpMenu1"); this.style.backgroundColor="Transparent";' > MouseOverHere <div id="PopUpMenu1" class="CssPopUpMenu" > <p>Line 1 - My awesome popup menu.</p> <p>Line 2 - I sure wish I could figure this out.</p> <p>Line 3 - Why is this so hard?</p> </div> </div> </td> </tr> <tr> <td> <div id="PopUpMenuContainer2" class="CssPopUpMenuContainer" onmouseover='MakeVisibilityVisible("PopUpMenu2"); this.style.backgroundColor="silver";' onmouseout='MakeVisibilityHidden("PopUpMenu2"); this.style.backgroundColor="Transparent";' > MouseOverHere <div id="PopUpMenu2" class="CssPopUpMenu" > <p>Line 1 - My awesome popup menu.</p> <p>Line 2 - I sure wish I could figure this out.</p> <p>Line 3 - Why is this so hard?</p> </div> </div> </td> </tr> <tr> <td> <div id="PopUpMenuContainer3" class="CssPopUpMenuContainer" onmouseover='MakeVisibilityVisible("PopUpMenu3"); this.style.backgroundColor="silver";' onmouseout='MakeVisibilityHidden("PopUpMenu3"); this.style.backgroundColor="Transparent";' > MouseOverHere <div id="PopUpMenu3" class="CssPopUpMenu" > <p>Line 1 - My awesome popup menu.</p> <p>Line 2 - I sure wish I could figure this out.</p> <p>Line 3 - Why is this so hard?</p> </div> </div> </td> </tr> </table> <br /><hr /><br /> Here it is with z-index removed on the div you move your mouse over. <br />- Problem still exists in IE 6 <br />- Problem is fixed in FF 2 <pre> CSS IS: .CssPopUpMenuContainerWithoutZIndex { height: 20px; position: relative; } .CssPopUpMenu { position: absolute; display: block; visibility: hidden; width: 300px; background-color: #EEEEEE; padding: 2px; top: 19px; left: 0px; border: solid 1px #AAAAAA; z-index: 99; } </pre> <table cellspacing="0" cellpadding="3" rules="all" border="1" style="background-color:White; font-size:9pt; border-collapse:collapse;"> <tr> <td> <div id="PopUpMenuContainer4" class="CssPopUpMenuContainerWithoutZIndex" onmouseover='MakeVisibilityVisible("PopUpMenu4"); this.style.backgroundColor="silver";' onmouseout='MakeVisibilityHidden("PopUpMenu4"); this.style.backgroundColor="Transparent";' > MouseOverHere <div id="PopUpMenu4" class="CssPopUpMenu" > <p>Line 1 - My awesome popup menu.</p> <p>Line 2 - I sure wish I could figure this out.</p> <p>Line 3 - Why is this so hard?</p> </div> </div> </td> </tr> <tr> <td> <div id="PopUpMenuContainer5" class="CssPopUpMenuContainerWithoutZIndex" onmouseover='MakeVisibilityVisible("PopUpMenu5"); this.style.backgroundColor="silver";' onmouseout='MakeVisibilityHidden("PopUpMenu5"); this.style.backgroundColor="Transparent";' > MouseOverHere <div id="PopUpMenu5" class="CssPopUpMenu" > <p>Line 1 - My awesome popup menu.</p> <p>Line 2 - I sure wish I could figure this out.</p> <p>Line 3 - Why is this so hard?</p> </div> </div> </td> </tr> <tr> <td> <div id="PopUpMenuContainer6" class="CssPopUpMenuContainerWithoutZIndex" onmouseover='MakeVisibilityVisible("PopUpMenu6"); this.style.backgroundColor="silver";' onmouseout='MakeVisibilityHidden("PopUpMenu6"); this.style.backgroundColor="Transparent";' > MouseOverHere <div id="PopUpMenu6" class="CssPopUpMenu" > <p>Line 1 - My awesome popup menu.</p> <p>Line 2 - I sure wish I could figure this out.</p> <p>Line 3 - Why is this so hard?</p> </div> </div> </td> </tr> </table> </body> </html> Code (markup):
Well first, menu items are usually a word or two, not even a sentence fragment, so using paragraphs on them is completely pointless. Second, if it's a menu that's a LIST of options, so you should be marking them up as lists. Third, while you might need to throw javascript at JUST IE6/earlier, you really shouldn't be using Javascript to do CSS' job. Finally, you are declaring absolute position and the same z-index on like elements, of course they are going to overlap. Of course, the use of a table for single TD's per TR is also a miserable /FAIL/, as is the paragraph in the HEAD, etc, etc, etc. Basically you have completely overthought your markup and your method for handling the mouseover effects. Even though NONE of that is your actual problem. Absolute positioned elements are relative to their parent's z-index - since the menu item after it is a sibling to that parent, it will render it's content (or at least the text inside that content) over it. You can overcome that particular problem in all browsers BUT IE by simply only stating z-index on the hover state of the child menu and nowhere else. I am NOT aware of a solution for this in IE - which is why usually menus of this nature put their subsections off to the side instead of over thier siblings - especially with the problem of trying to select the second two categories after you open the first one - usability hell. That alone would make me NOT have the top menu open up over the two children below it since it makes trying to open those two annoying at best. If I were to write a menu like that, positioning them where it's accessable off to the right side, it would look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Better </title> <style type="text/css"> * { margin:0; padding:0; } body { font:normal 85%/130% arial,sans-serif; } * html body { /* IE6/earlier has no support for :hover on anything but anchors, so we use the behavior file from Peterned's website to implement it. Grab it from: http://www.xs4all.nl/~peterned/htc/csshover2.htc for more information see: http://www.xs4all.nl/~peterned/csshover.html */ behavior:url(csshover2.htc); } #testMenu { list-style:none; line-height:2em; width:6em; border:solid #000; border-width:1px 1px 0; } #testMenu li { position:relative; display:block; height:2em; /* trip haslayout */ text-align:center; border-bottom:1px solid #000; } #testMenu li:active, #testMenu li:hover { background:#EEE; } #testMenu ul { position:absolute; /* IE has a 'bug' in rendering hovered content, setting display:inline here and display:block in the hover state fixes this. */ display:inline; width:20em; right:-999em; top:-1px; /* account for the border */ background:#EEE; border:solid #000; border-width:1px 1px 0; } #testMenu li li { padding:0 0.4em; text-align:left; } #testMenu li:active ul, #testMenu li:hover ul { display:block; /* see comment in #testMenu ul */ right:-20em; /* same as our declared width */ margin-right:-2px; /* sneaky trick to do add the 2px for the border to our EM width */ } #testMenu li li:active, #testMenu li li:hover { background:#DDD; } </style> </head><body> <ul id="testMenu"> <li> Top Level 1 <ul> <li>Line 1 - My awesome popup menu.</li> <li>Line 2 - I sure wish I could figure this out.</li> <li>Line 3 - Why is this so hard?</li> </ul> </li><li> Top Level 2 <ul> <li>Line 1 - My awesome popup menu.</li> <li>Line 2 - I sure wish I could figure this out.</li> <li>Line 3 - Why is this so hard?</li> </ul> </li><li> Top Level 3 <ul> <li>Line 1 - My awesome popup menu.</li> <li>Line 2 - I sure wish I could figure this out.</li> <li>Line 3 - Why is this so hard?</li> </ul> </li> </ul> </body></html> Code (markup): Positioning the popup menu OVER the other menu items next to it's 'parent' - that's just made of /FAIL/.
Anne van Kesteren ran across this once and realised that in IE you have to move the z-index to the parent, or grandparent, to get z-index to work. I ran into the problem on my goofy testing stommepoes page-- absolutely positioned h1 in the header needed to have the z-index moved because the stuff underneath it was also absolutley positioned. IE was the only one who couldn't count. http://annevankesteren.nl/2005/06/z-index
Quite correct - hadn't had my morning caffiene when I posted that. If you put the z-index on the topmost LI's and changed it on the hover state, that would solve the problem just fine.