z-index doesn't work in my dropdownmenu in IE

Two things you might want to try.

(1) Get IE into its hasLayout mode for the elements concerned. As a testing kludge you can do

#navigation, #navigation * {zoom:1}

If that fixes things, you should then apply the fix a little more specifically until you determine which elements require it, before finally changing to the holly hack and a valid width or height value to ensure your html/css will pass validators.

(2) IE can be fussy about z-indexes. Ensure you are setting the z-index at the level where the elements are siblings.

<ul>
  <li  z-index:10> <!-- li:hover z-index:15; -->
    <ul z-index:20>
      <li>
      <li>
   </ul>
  </li>
  <li z-index:10> <!-- li:hover z-index:15; -->
  ...
</ul>

Thanks for your reply.
I tried inserting the second solution you provided, yet it didn't help IE fix it.

The menu we use will have 2 to 5 siblings, do I need to specify a z-index for each li:hover?

I use the following z-indexes by the way:

/*z indexes*/
#navigation ul ul { z-index: 50; }
#navigation ul ul ul { z-index: 60; }
#navigation ul ul ul ul { z-index: 70; }

Still no replies.

How would I integrate that haslayout idea?

*bump*
sorry for the double post, just haven't had any replies.

Its just adding that line anywhere in your CSS

#navigation, #navigation * {zoom:1}

In this case it doesn't solve the problem.

However, my other possibility does.

#navigation li {z-index:1;}
#navigation li:hover {z-index: 2;}

For anyone struggling to understand the way that IE deals with z-index values, this will either help you or confuse you even more :? > http://www.aplus.co.yu/css/z-pos/

Erm, I know how to do the z-index, it's the jumping thing that annoys me.

Nevermind, I killed the menu for IE, and have decided to convert it to a menu apart for IE.

Can anyone hep me converting it?

:?

Whats the jumping thing?

PS, excellent link Roy.

When you hovered over a link in IE, the link jumped 1 pixel to the left.

I didn't see that and it doesn't seem to effect my version of your page ... http://wiki.jalakai.co.uk/tester146 with those style changes.

However, from the look of your link above its all solved now.

I love you

edit: It looks like the jumping thing still happens. Would this be because of the background? Or is it the min-max? And why the togglecontent thing?

Right, I see it now. It could be a manifestation of the guillotine bug. I don't have a link for it, but a quick search on google should give you the details and info on how to fix it.

I build pages in a standard template. Thats one of things that comes in useful from time to time - it saves having to make different versions of a page to see how the layout behaves if one column is longer than the other or if a particular container has more or less content.

Can anyone help me kill that 1px bug please? I don't know how to kill the instance of that quillotine bug.

Because the menu is generated automaticly, do I even need the holly hack?

Would switching to xhtml 1.0 strict help?

Would it help using increased margins on the a:hover with IE conditional commands?

Anything?

You dont need to create another menu, its a bug in ie that places form controls above everything else,

I hit it on http://www.ossip-zadkine.com/ and to fix it, just place an absolutely positioned iframe ( same size as the menu) behind the menu, it will overlay the form element and allow your menu to be shown

dh2, the CMS i'm using doesn't allow me to put inline frames in the generated code :S. I think you don't understand me, the list items jump 1 pixle to the left when you hover over them.

IE is having problems with

#navigation li {margin:1px}

it seems to lose the style when :hover is active. Duplicating that style attribute in the #navigation li:hover rule makes no difference. It may be a problem with the :hover behaviour or an internal IE issue I can't tell which.

My solution would be to move the margin/border/background styles over to #navigation li a & #navigation li a:hover

giving you:

#navigation li {
	position:relative;
	padding: 1px;
}

#navigation li:hover { /* no styles required */	}
	
#navigation ul a {
    /* background:transparent -- replaced, see below */
	display: block;
	color: #fff;
	font:bold 11px/1em tahoma, arial, sans-serif;
	text-decoration: none;
	padding: 4px;

    /* transferred styles */
    border: 1px solid #0037A6;
    background: #ED9400 url(http://www.encyclue.nl/images/navbg.png) no-repeat top left;
}

#navigation ul a:hover {
    background-position: bottom right;
}

Its wasn't a difficult problem to diagnose and solve. Simply, deconstruct the concerned part of the page to isolate what is causing the problem then look for alternative ways to accomplish the same thing.

But then you don't have that sort of tree where you are hovering.

Well, too bad for IE users, they'll just have to work with a less advanced menu.

Note that a:hover must have a different bgcolor as well.

My changes make no difference to that, it sounds like you broke something else :?

No, I didn't broke something, you did

Using the li:hover I could create a "tree" menu like shown below. That in firefox 1.04.

I think we are going in the circles here. The page in the link above (my changes) generates a tree menu just like in your picture. At least it does in FF and IE6. I can't speak for any other browsers as I haven't tried it in them.

The code I pasted above, isn't intended to be a whole CSS, but only to replace the three style rules below. All the other styles in your CSS should remain as is. I am sorry if that wasn't clear.

#navigation li {
	position:relative;
	margin: 1px;
	border: 1px solid #0037A6;
	background: #ED9400 url(/images/navbg.png) repeat-x left top;
	}

#navigation li:hover {
	background: #0037A6 url(/images/navbg.png) repeat-x right bottom;
	}

#navigation ul a {
	background: transparant;
	display: block;
	color: #fff;
	font:bold 11px/1em tahoma, arial, sans-serif;
	text-decoration: none;
	padding: 4px;
	}

erm...

http://www.csscreator.com/css-forum/download.php?id=1393
http://www.csscreator.com/css-forum/download.php?id=1394

See what I mean? I do that by styling the li:hover...

I think i'll have to nix that tree idea then...
Anyway, Thanks for the help!

Ok, ok, I get it. I must be slow today.

Put the styles back the way they were. Add these styles at the end of your style sheet.

* html #navigation li {
	margin:0; 
	padding:1px;
	border-style:double; 
	border-width: 3px;
	height:1px;
}

* html #navigation ul a {
    padding:2px;
    height:1px;
}

You can't use this code for Firefox. IE places the margin colour between the lines of the double margin, where as FF places the margin colour between the top/left lines and the background between the bottom/right lines (and reverses this on :hover).

I relealise its not exactly the same in both browsers, but its pretty close and you get the basic look you are after