8 replies [Last post]
Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 2 days ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

I created a nice Suckerfish dropdown menu for my subnavigation, but I'm having one problem with it in IE. The dropdown menu wants to go behind my transparent content area below... rendering the dropdown menu useless. It works fine in Firefox, Safari, and Opera. I checked both the CSS and HTML code for validation and it's all fine. Is this a z-index issue? I tried that for a while, but if it is the solution, I wasn't finding the right place to put it.

I'm terribly jet-lagged and suspect that this is a big part of the problem. My brain is several hours behind my body. Is there some obvious thing I'm missing? Thanks in advance for any help.

Click here to view it.

Here's my HTML 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" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />
	<meta name="author" content="Jenn" />
	<meta name="keywords" content="emily davidson-niedoba, personal trainer, personal training, fitness, health, acting, 
	actor, actress, theatre" />
	<meta name="description" content="Emily Davidson-Niedoba is an actor and personal trainer." />
	<meta name="robots" content="all" />
<title>Emily Davidson-Niedoba: Acting and Personal Training</title>
<!-- to correct the ugly Flash of Unstyled Content. -->
	<script type="text/javascript"></script>
	<style type="text/css" media="all">
		@import "./elf.css";
	</style>
</head>
<body>
<div id="bkgd_left">
<div id="bkgd_right">
<div id="bkgd_bottom">
	<div id="globalcontent">
		<div id="header">
		<h1>Emily Davidson-Niedoba</h1>
			<ul class="nav IR">
				<li class="homemenu"><a href="../index.html" title="Main page" class="active"><em></em>Home</a>
				</li>
				<li class="servicesmenu"><a href="../services/services.html" title="What Emily can do"><em></em>Services</a>
					<ul>
						<li><a href="./services/training.html">General Overview</a></li>
						<li><a href="./services/training.html">Personal Training</a></li>
						<li><a href="./services/acting.html">Acting</a></li>
					</ul>
				</li>
				<li class="aboutmenu"><a href="../about/about.html" title="Information about Emily"><em></em>About</a>
					<ul>
						<li><a href="./about/training.html">All About Emily</a></li>
						<li><a href="./about/training.html">Photo Gallery</a></li>
						<li><a href="./about/acting.html">Testimonials</a></li>
					</ul>
				</li>
				<li class="contactmenu"><a href="../contact/contact.html" title="How to reach Emily"><em></em>Contact</a></li>
				<li class="linksmenu"><a href="../links/links.html" title="Connect to related sites"><em></em>Links</a></li>
			</ul>
		</div>
		<div id="inner_container">
			<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada gravida posuere. Nam id odio ligula, id sagittis 
libero. Duis vel imperdiet eros. Proin viverra arcu nec odio sodales scelerisque. Proin eget lectus in felis faucibus porta. 
Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Vivamus rutrum scelerisque odio quis viverra. Curabitur vitae venenatis metus. Aliquam et lorem metus. Pellentesque vel dolor 
ut felis placerat sagittis. Duis vehicula, ligula eget viverra porttitor, turpis purus eleifend lectus, vitae faucibus neque arcu at 
sem. Nullam quis velit nunc, vel auctor erat. Sed tortor erat, tincidunt dapibus feugiat ut, gravida id neque.</p>
 
			<p>Pellentesque accumsan tellus id nulla tincidunt consequat. Sed quis odio leo, eu eleifend lectus. Integer eu mi orci, quis 
convallis lorem. Integer orci libero, luctus a eleifend id, laoreet sit amet libero. Praesent at ante condimentum odio viverra 
hendrerit eget non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl nisl, consectetur in consequat 
eget, posuere id nisi. Morbi velit mauris, iaculis non porta eu, ultricies in nulla. Fusce vulputate, lacus eget viverra dignissim, 
libero turpis vulputate velit, id eleifend nibh odio id nulla. Donec purus justo, ultricies nec ullamcorper at, eleifend quis lacus. 
Sed dictum convallis sodales. Etiam risus felis, euismod id aliquam sed, ullamcorper in libero. Curabitur sit amet vulputate nibh.</p>
			</div>
		</div>
			<div id="footer">
			<p class="copyright">Copyright &copy; 2009 Emily Davidson-Niedoba</p>
			<p class="webcredit">Site designed &amp; devleoped by <a href="http://www.digitalpawprint.com">Digital Paw Print</a></p>
			</div>
		</div>
</div>
</div>
</div>
</body>
</html>

Here's my CSS code:

html	
	{
	min-width: 740px;
	}
 
/* Helpers and base rules */
 
img	{
	border: 0;
	}
 
img.counter
	{
	display: inline;
	margin-left: 5px;
	}
 
/* Primary layout divisions */
 
body
	{
	text-align: center;
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
	background-position: top center;
	height: 100%;
	color: #000;
	font: small/18px "Gils Sans", arial, helvetica, sans-serif;
	}
 
#bkgd_left
	{
	margin: 0 auto;
	padding: 0;
	background-image: url(./images/left_vine_bkgd.gif);
	background-repeat: repeat-y;
	background-position: left;
	overflow: hidden;
	}
 
#bkgd_right
	{
	margin: 0 auto;
	padding: 0;
	background-image: url(./images/right_vine_bkgd.gif);
	background-repeat: repeat-y;
	background-position: right;
	overflow: hidden;
	}
 
#globalcontent
	{
	background-position: top center;
	position: relative;
	margin: 0 auto;
	padding: 0 0 25px 0;
	border: 0;
	height: 100%;
	width: 740px;
	background-color: transparent;
	color: #000;
	}
 
 
/* header starts here */
 
#header
	{
 
	width: 740px;
	background-position: top center;
	background-color: transparent;
	position: relative;
	color: #000;
	margin: 0 auto;
	padding: 0;
	}
 
#header h1
	{
	text-indent: -9999px;
	height: 150px;
	background: url(./images/emily_topper.gif) no-repeat;
	background-position: center;
	}
 
/* header ends here */	
 
/* main nav starts here */
 
ul.IR li
	{
	position: relative;
	font-size: 0.9em;
	}
 
.IR em
	{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	}
 
/* For IE5.x mac only */
* html>body .IR
	{
	position: static;
	font-size: 10px;
	}
 
* html>body .IR em
	{
	position: static;
	}
 
.nav
	{
	margin: 0 auto;
	padding: 0;
	width: 740px;
	height: 25px;
	list-style: none;
	text-indent: -9999px;
	background: transparent url(./images/transparent_white.gif);
	color: #000;
	position: relative;
	border: dotted #ccc;
 
	}
 
.nav li
	{
	float: left;
	}
 
.nav li, .nav li em
	{
	height: 25px;
	}
 
.homemenu em, .servicesmenu em, .aboutmenu em, .contactmenu em, .linksmenu em
	{
	background: url(./images/menu.gif) no-repeat;
	cursor: pointer;
	}
 
.homemenu, .homemenu em, .servicesmenu, .servicesmenu em, .servicesmenu, .servicesmenu em,
.aboutmenu, .aboutmenu em, .contactmenu, .contactmenu em, .linksmenu, .linksmenu em 
	{ 
	width: 140px; 
	}
 
 
.homemenu { left: 0px; }
.homemenu em { background-position: 0px -25px; }
.homemenu:hover em, .homemenu:active em { background-position: 0px -25px; }
 
.servicesmenu { left: 0px}
.servicesmenu em { background-position: -149px 0; }
.servicesmenu:hover em, .servicesmenu:active em { background-position: -149px -25px; }
 
.aboutmenu { left: 0px; }
.aboutmenu em { background-position: -298px 0; }
.aboutmenu:hover em, .aboutmenu:active em { background-position: -298px -25px; }
 
.contactmenu { left: 0px; }
.contactmenu em { background-position: -447px 0; }
.contactmenu:hover em, .contactmenu:active em { background-position: -447px -25px; }
 
.linksmenu { left: 0px; }
.linksmenu em { background-position: -596px 0; }
.linksmenu:hover em, .linksmenu:active em { background-position: -596px -25px; }
 
 
/* sub nav function starts here */
.nav a
	{
	display: block;
	}
 
/* The Holly Hack for IE up to v.6*/
* html .nav a
	{
	height: 1%;
	}
 
.nav li ul
	{
	position: absolute;
	z-index: 1;
	top: 25px;
	left: -9999em;
	width: 10em;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	border: 1px solid #ccc;
	background: #fff;
	color: #000;
	}
 
.nav li:hover ul 
	{ 
	left: 50px; 
	display: block;
	}
 
.nav li li
	{
	height: auto;
	font-size: 110%;
	border-bottom: 1px solid #ccc;
	text-indent: 0;
	}
 
.nav li ul a
	{
	text-align: left;
	width: 8.6em;
	padding: 0.25em;
	color: #999;
	background: #fff;
	text-decoration: none;
	}
 
.nav li ul a:hover
	{
	color: #009900;
	background: #fff;
	}
 
.nav li li
	{
	height: auto;
	font-size: 110%;
	border-bottom: 1px solid #ccc;
	}
 
.nav li ul a
	{
	text-align: left;
	width: 8.6em;
	padding: 0.25em;
	color: #999;
	background: #fff;
	text-decoration: none;
	}
 
.nav li ul a:hover
	{
	color: #009900;
	background: #fff;
	}
 
/* sub nav ends here */
 
/* end of header & main nav */
 
 
/* content areas */
 
#inner_container
	{
	margin: 25px 0 0 0;
	padding: 0; 
	width: 740px;
	height: 100%;
	background: transparent url(./images/transparent_white.gif);
	color: #000;
	position: relative;
	border: dotted #ccc;
	overflow: hidden;
	}
 
#content
	{
	margin: 0 auto;
	padding: 20px; 
	width: 700px;
	height: 100%;
	background: transparent;
	color: #000;
	position: relative;
	overflow: hidden;
	}
 
/* end of content areas */
 
 
/* footer */
 
#footer
	{
	margin: 25px 0 0 0;
	width: 740px;
	padding: 0;
	background: transparent url(./images/transparent_white.gif);
	border: dotted #ccc;
	position: relative;
	color: #000;
	}
 
.copyright
	{
	margin: 10px 0 0 0;
	}
 
.webcredit
	{
	margin: 0 0 10px 0;
	}
 
#bkgd_bottom
	{
	margin: 0 auto;
	padding: 0;
	background: transparent url(./images/bottom_vine_bkgd.gif) no-repeat;
	background-position: bottom center;
	position: relative;
	z-index: 10;
	}
 
/* end of footer */

flamenco
flamenco's picture
Offline
Enthusiast
US, East Coast
Last seen: 11 years 18 weeks ago
US, East Coast
Timezone: GMT-5
Joined: 2009-04-13
Posts: 240
Points: 144

Hi, Ah, good old Suckerfish.

Hi, Ah, good old Suckerfish. Pretty great, yet as sensitive as a grenade when you start to style and change it. Smile It's tough to troubleshoot something like this without testing, but I think you're on the right track with z-index.

I feel your pain... I just set up a menu with some frou frou images floating over it (don't ask), got it all working great, except in stupid IE - the appearance was fine, but the links were not clickable. Deadline loomed, so I scrapped the overlapping images part.

I wonder if something like this would help... in the following area, you could try adding something like the code below:

.nav li ul a {
  position: relative;
  z-index: 33;
.....
}

The links may be vanishing under #inner_container or #globalcontent, for instance. Good luck! and get some sleep.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

z-index bug?

Does this help?
http://annevankesteren.nl/2005/06/z-index

I put the high z-index not on the li's but on the main ul (or any box surrounding the main ul). IE doesnt' care how high you set it for the subs.

Of course you only get this bug when the box coming after the menu is position: relative. If you don't really need that, remove that instead. Easier.

PS long time no see, lamb!

I'm no expert, but I fake one on teh Internets

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 2 days ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Still strugging with it!

Thank you both. Yes, long time no see indeed! I've had much going on over the last six months, which has kept me away from here for far too long. It's nice to be back.

I tried what each of you suggested (and some combinations of both suggestions) but IE is holding rather stubbornly. That article about z-index was quite helpful, but the wording of the article in spots got a bit confusing for me. I do believe I got the basic idea, though I wasn't able to sort out the problem, so who knows. Puzzled

Here's the chunk of CSS code (with slight moderations) containing all of the navigation guts:

/* main nav starts here */
 
ul.IR li
	{
	position: relative;
	font-size: 0.9em;
	}
 
.IR em
	{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	}
 
/* For IE5.x mac only */
* html>body .IR
	{
	position: static;
	font-size: 10px;
	}
 
* html>body .IR em
	{
	position: static;
	}
 
.nav
	{
	margin: 0 auto;
	padding: 0;
	width: 740px;
	height: 25px;
	list-style: none;
	text-indent: -9999px;
	background: transparent url(./images/transparent_white.gif);
	color: #000;
	position: relative;
	border: dotted #ccc;
 
	}
 
.nav li
	{
	float: left;
	}
 
.nav li, .nav li em
	{
	height: 25px;
	}
 
.homemenu em, .servicesmenu em, .aboutmenu em, .contactmenu em, .linksmenu em
	{
	background: url(./images/menu.gif) no-repeat;
	cursor: pointer;
	}
 
.homemenu, .homemenu em, .servicesmenu, .servicesmenu em, .servicesmenu, .servicesmenu em,
.aboutmenu, .aboutmenu em, .contactmenu, .contactmenu em, .linksmenu, .linksmenu em 
	{ 
	width: 140px; 
	}
 
 
.homemenu { left: 0px; }
.homemenu em { background-position: 0px -25px; }
.homemenu:hover em, .homemenu:active em { background-position: 0px -25px; }
 
.servicesmenu { left: 0px}
.servicesmenu em { background-position: -149px 0; }
.servicesmenu:hover em, .servicesmenu:active em { background-position: -149px -25px; }
 
.aboutmenu { left: 0px; }
.aboutmenu em { background-position: -298px 0; }
.aboutmenu:hover em, .aboutmenu:active em { background-position: -298px -25px; }
 
.contactmenu { left: 0px; }
.contactmenu em { background-position: -447px 0; }
.contactmenu:hover em, .contactmenu:active em { background-position: -447px -25px; }
 
.linksmenu { left: 0px; }
.linksmenu em { background-position: -596px 0; }
.linksmenu:hover em, .linksmenu:active em { background-position: -596px -25px; }
 
 
/* sub nav function starts here */
.nav a
	{
	display: block;
	}
 
/* The Holly Hack for IE up to v.6*/
* html .nav a
	{
	height: 1%;
	}
 
.nav li ul
	{
	position: absolute;
	z-index: 1000;
	top: 25px;
	left: -9999em;
	width: 10em;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	border: 1px solid #ccc;
	background: #fff;
	color: #000;
	}
 
.nav li:hover ul 
	{ 
	left: 50px; 
	display: block;
	}
 
.nav li li
	{
	height: auto;
	font-size: 110%;
	border-bottom: 1px solid #ccc;
	text-indent: 0;
	}
 
.nav li ul a
	{
	position: relative;
	z-index: 33;
	text-align: left;
	width: 8.6em;
	padding: 0.25em;
	color: #999;
	background: #fff;
	text-decoration: none;
	}
 
.nav li ul a:hover
	{
	color: #009900;
	background: #fff;
	}
 
.nav li li
	{
	height: auto;
	font-size: 110%;
	border-bottom: 1px solid #ccc;
	}
 
.nav li ul a:hover
	{
	color: #009900;
	background: #fff;
	}
 
/* sub nav ends here */
 
/* end of header & main nav */

And the link is here to see it up and running. Thank you so much for any help!!!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

It doesn't help that the same

It doesn't help that the same menu is referenced multiple times by two different names (.nav and .IR), but this still looks like your main ul:

.nav
	{
	margin: 0 auto;
	padding: 0;
	width: 740px;
	height: 25px;
	list-style: none;
	text-indent: -9999px;
	background: transparent url(./images/transparent_white.gif);
	color: #000;
	position: relative;
	border: dotted #ccc;
 
	}

Where is the z-index: BAZILLION;?

You have it on the subs:

.nav li ul
	{
	position: absolute;
	z-index: BAZILLION;
	top: 25px;
	left: -9999em;
	width: 10em;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	border: 1px solid #ccc;
	background: #fff;
	color: #000;
	}

Because the main parent, the ul itself, does not have a z-index, then IE feels free to ignore the high one you set on a child of ul, the sub-ul.

The item who follows is, for whatever reason, set to position: relative. And is later in the code. So IE sees that and figures it needs to be able to sit over your submenu. Like later-coming code who is rel-po'd otherwise would.

I don't bother at all with z-index on my subs. They're already pos: abso, they don't need it. But Anne put it on the parents of the sub uls (the li's) and I just throw it on the ul itself.

.nav {
z-index: BAZILLION;
}
.nav li ul {
pos: abso;
no mention of z-index necessary
}

Looking at the site I still don't know what pos: rel is doing on main content. Does it have something somehow to do with the use of the even-odd white gif?

Again, removing pos: rel on inner-container would/should also fix the issue without needing to do anything with z-index on anyone.

So what did you do different, explicitly?

I'm no expert, but I fake one on teh Internets

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 2 days ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Yay Stomme poes!

Ahhhhh! Laughing out loud

It worked! It worked! I get it finally, with your much better and much-more-clear explanation than the one on that website. The best part about this is not just that it worked, but that I actually GET it. Oh yay! Party

Before when I removed postion: relative from the inner container, it threw everything out of whack for some reason... so I didn't think that was the answer. I forgot to mention that in my last post. Perhaps I had accidentally adjusted something else which screwed it up. But after following your explanation this time, I realized that it really DID sound like the logical solution... and when I tried it, the subnav sat over top of the border of the inner container (showing that this was the correction thing to do) but still sat beneath the "content" div... so I just had to remove position:relative from that one as well, and it all came together beautifully.

Thank you SO much for helping me to understand this. I feel like I just won some money because I learned something new. Thank you thank you!!!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Great.

I will give you the address to which you can ship some chocolate chip cookies pls. : )

I'm no expert, but I fake one on teh Internets

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 2 days ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Deal.

Ha! Now that's a good deal. I bake a wicked cookie too. Believe me... if you actually gave me the address, you'd be getting them in the mail. I can't tell you how many times I've wished that I could give something in return for all I've gotten from this site. Hugo would be buried in cookies by now if I'd sent them to him every time he helped me in the past.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Heh

Unless you're in the EU, I'm not sure they'd survive the postal service : ) I'm in the Netherlands.

As for Hugo... he helps so much, he'd get a weight problem!

I'm no expert, but I fake one on teh Internets