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

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

Posted: Mon, 2005-06-20 10:08

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; }

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

Posted: Tue, 2005-06-21 10:07

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

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

Posted: Tue, 2005-06-21 11:21

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/

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

Posted: Tue, 2005-06-21 12:03

Whats the jumping thing?

PS, excellent link Roy.

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

Posted: Wed, 2005-06-22 10:11

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.

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

Posted: Thu, 2005-06-23 09:26

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.

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

Posted: Wed, 2005-06-29 18:59

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

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

Posted: Thu, 2005-06-30 00:02

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.

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

Posted: Thu, 2005-06-30 09:47

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

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

Posted: Thu, 2005-06-30 12:30

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;
	}

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

Posted: Thu, 2005-06-30 13:33

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