IE z-index bug? Any soluions?

**Hendricus** · 05-17-2008, 12:38 PM

Hi all,

I've been working on a horizontal css menu with a horizontal submenu. I thought I had things up and running until I encountered the IE z-index bug (well I think that is the reason). I've been spending blood sweat and tears on this one and can't find the solution to it, you know what Linus says; given enough eyeballs, all bugs are shallow....

Here's the code which works as expected in Firefox;

Code:

<!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">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("header_nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
</script>
<style>
* {
	outline: none;
	margin: 0;
	padding: 0;
	border: 0;
}
html, body {
	height: 100%;
	width: 100%;
	font-family: "Arial", "Helvetica", "Verdana";
	font-size: 11px;
	color: #FFF;
	background: #FCC101;
}
#header_navigation {
	position: relative;
	height: 65px;
	width: 100%;
	overflow: hidden;
	background: red;
}
#header_nav a {
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	padding: 0 30px 6px 0;
	display: block;
	text-decoration: none;
}
#header_nav li {
	position: relative;
	display: inline;
	float:left;
	list-style: none;
}
#header_nav li ul {
	position: absolute;
	top: 21px;
	left: 0;
	width: 1500px;
	padding-top: 10px;
	border-left: 1px solid #FFF;
}
#header_nav li .block {
	height: 29px;
	width: 2000px;
	position: absolute;
	top: 21px;
	left: -500px;
	display: none;
}
#header_nav li.off ul {
	display: none;
}
#header_nav li ul li a {
	font-size: 11px;
	font-weight: normal;
	padding: 0 9px 5px 3px;
	display: block;
	float: left;
	background: green;
}
#header_nav li ul li span {
	padding: 0 9px 5px 3px;
	float: left;
}
#header_nav li ul li:first-child span {
	display: none;
} 
#header_nav li:hover a, #header_nav li.over a {
	text-decoration: none;
}
#header_nav li:hover li a, #header_nav li.over li a {
	text-decoration: none;
}
#header_nav li li a:hover {
	text-decoration: underline;
}
#header_nav li:hover .block, #header_nav li.over .block {
	display: block;
	z-index: 9998;
	background: silver;
}
#header_nav li:hover ul, #header_nav li.over ul {
	display: block;
	z-index: 9999;
}
</style>
</head>
<body>
		<div id="header_navigation">
			<ul id="header_nav">
				<li class="off"><a href="#">topic 1</a>
					<div class="block">&nbsp;</div>
					<ul>
						<li><span>//</span><a href="#">option A01</a></li>
						<li><span>//</span><a href="#">option A02</a></li>
						<li><span>//</span><a href="#">option A03</a></li>
					</ul>			
				</li>
				<li class="off"><a href="#">longer topic 2</a>
					<div class="block">&nbsp;</div>
					<ul>
						<li><span>//</span><a href="#">option B01</a></li>
						<li><span>//</span><a href="#">option B02</a></li>
						<li><span>//</span><a href="#">option B03</a></li>
					</ul>			
				</li>
				<li class="on"><a href="#">topic 3</a>
					<div class="block">&nbsp;</div>
					<ul id="tmp">
						<li><span>//</span><a href="#">option C01</a></li>
						<li><span>//</span><a href="#">option C02</a></li>
						<li><span>//</span><a href="#">option C03</a></li>
					</ul>			
				</li>
				<li class="off"><a href="#">very long topic 4</a>
					<div class="block">&nbsp;</div>
					<ul>
						<li><span>//</span><a href="#">option D01</a></li>
						<li><span>//</span><a href="#">option D02</a></li>
						<li><span>//</span><a href="#">option D03</a></li>
					</ul>			
				</li>
				<li class="off"><a href="#">topic 5</a>
					<div class="block">&nbsp;</div>
					<ul>
						<li><span>//</span><a href="#">option E01</a></li>
						<li><span>//</span><a href="#">option E02</a></li>
						<li><span>//</span><a href="#">option E03</a></li>
					</ul>			
				</li>
			</ul>
		</div>

</body>
</html>

Hope you guys can help me out with this one!
Hendricus

**jscheuer1** · 05-17-2008, 06:41 PM

Code:

li.over, li.over * {
	z-index: 9999;
}

**Hendricus** · 05-17-2008, 10:42 PM

Hi John,

Thanx for the reply! I was just about to post here that that was the solution indeed... I guess looking at it for too long made me go code blind

Well another one bit the dust...

thanx again!
Cheers

Thread: IE z-index bug? Any soluions?

Thread Tools

Search Thread

IE z-index bug? Any soluions?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions