Hi guys, i'm new here.
I've got a problem with my css dropdownmenu in IE, z-index doesn't seem to work, and the rollovers jump a bit around.
link to my page: http://www.encyclue.nl/etomite/index.html
Can anyone help me fix this for IE? Maybe using conditional statements?
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>
thats not html, but you should get the idea.
z-index doesn't work in my dropdownmenu in IE
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
Still no replies.
How would I integrate that haslayout idea?
z-index doesn't work in my dropdownmenu in IE
*bump*
sorry for the double post, just haven't had any replies.
z-index doesn't work in my dropdownmenu in IE
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;}
z-index doesn't work in my dropdownmenu in IE
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
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?
z-index doesn't work in my dropdownmenu in IE
:?
Whats the jumping thing?
PS, excellent link Roy.
z-index doesn't work in my dropdownmenu in IE
When you hovered over a link in IE, the link jumped 1 pixel to the left.
z-index doesn't work in my dropdownmenu in IE
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
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?
z-index doesn't work in my dropdownmenu in IE
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.
And why the togglecontent thing?
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
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?
z-index doesn't work in my dropdownmenu in IE
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
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.
z-index doesn't work in my dropdownmenu in IE
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
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.
z-index doesn't work in my dropdownmenu in IE
But then you don't have that sort of tree where you are hovering.![]()
My changes make no difference to that, it sounds like you broke something else :?
z-index doesn't work in my dropdownmenu in IE
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.
z-index doesn't work in my dropdownmenu in IE
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
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!
z-index doesn't work in my dropdownmenu in IE
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