1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div below shows through div above, regardless of z-index

Discussion in 'CSS' started by rvarcher, Aug 15, 2008.

  1. #1
    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
    SEMrush
    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):
     
    rvarcher, Aug 15, 2008 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,171
    Likes Received:
    1,725
    Best Answers:
    239
    Trophy Points:
    515
    #2
    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/.
     
    deathshadow, Aug 15, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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
     
    Stomme poes, Aug 19, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,171
    Likes Received:
    1,725
    Best Answers:
    239
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Aug 19, 2008 IP