.Ted.Drake:last-child {woo:hoo}

Conflicting Z-Index in IE6

Internet Explorer 6 has an issue with positioned elements that use z-index. Here’s the trouble I just had with this:

I have a topnav consisting of an unordered list with a dropdown menu on one of the list elements. The dropdown is a nested unordered list with position:absolute and a z-index to sit on top of any page content below. Fairly simple so far…

However, in IE6, the menu is obscured by an h5, random images, and paragraphs on various pages. The z-index should make this list float on top of other elements, but it seems to be ineffective.

PPK summarized this problem on his post: Explorer z-index bug:

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headaches and a lot of misunderstanding of what z-index really does.PPK

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn’t mention Aleksandar’s simple solution. Give the parent a position:relative and z-index:1..

Now, of course it isn’t always that simple. There’s also the issue of subsequent objects that also have a z-index and what happens if their parent is also positioned with a z-index. Please take some time to visit Aleksandar’s web site if you are having this conflict.

IE7 and more fun

According to PPK’s web site, this has not been fixed in IE7 Beta2Preview. We’ll see how this works out. I’ve noticed some positioning bugs in IE7 myself. This is something to consider when considering the z-index happiness of Andy Clarke

More solutions

Hedger Wang has an ingenious solution to the conflict between z-index on elements and subsequent select elements. He uses an iframe with z-index-1 that sits under the targeted element. I’ve used this negative z-index on some of the subsequent elements and it is helping. Fixing all of the pages will be a long journey , but at least there is light at the end of the tunnel.

Yet another hack/update

I had to remove the negative z-index from the container as it was keeping a link with background image/text-indent, display:block, etc from having any hover activity. It acted as if it were under a layer. Other links in the container were fine. You’ve got to love IE6

Yet another hack/update 4-30-06

We were using an iframe with the src=”/”. Can you guess what happened? Oh my goodness. We were loading the home page inside every other page on IE. So here’s the tip we learned… don’t use a page url for your invisible iframe, use an spacer.gif or something benign instead. Better yet, get rid of the iframe if you find other solutions. Which is what we ended up doing. We’ve messed with this thing for so long we’ve lost track of what’s doing what.

Related articles by Zemanta
Reblog this post [with Zemanta]

Posted

in

, , , , , , , , ,

by

Ted

Tags:

, , ,

Comments

27 responses to “Conflicting Z-Index in IE6”

  1. ted Avatar
    ted

    Did I just say it was simple to fix?

    After working with this some more, I’ve come across some serious issues. I’ve got several pages with spans that are positioned over relative parents below the dropdown list. These are over-powering the dropdown list. And… the big killer… form elements, good luck getting those to sit under the z-indexed element in IE6.

  2. Hedger Avatar
    Hedger

    Feel free to share this 🙂

  3. Frances Lewis Avatar
    Frances Lewis

    Hi,

    I’m having my own z-index nightmare right now whilst redoing my website. Got it working great in Firefox but unless I can fix the z-index problem in IE6 & 7 will have a load more work to do. One thing I noticed in your post was that you said the links no longer worked with a neg z-index.

    I had the same problem in Firefox, and I could be wrong, but doesn’t the document window have a default value of 0? So whilst still visible they won’t be clickable as they’re below the window itself…?? Or am I misunderstanding something, can’t see your working example…

  4. Fran Avatar
    Fran

    forget my last comment!

  5. Rafael Lerm Avatar
    Rafael Lerm

    Thanks!

    The z-index: -1 hack really works!! On my page, the menu-box (appears when hovered) should be on top of the page contents, but it didn’t. The box had a z-index of 100 and the content, 0. (Not relying on the default, I declared that myself). On every other browser I know, it worked.

    Now, after a lot of headaches, I found this page and declared the content’s z-index to -1. It worked, so thanks a lot!!

  6. abc Avatar
    abc

    In my jsp page i have a list of fields consisting of text boxes and ,combo boxes.In this list of fields i have the fields placed in such a way that combo box follows the text box ,which is a auto complete field.The problem here is that as the text box is a auto complete field the moment i enter some letter it overlaps with the combo box.would be very glad to recive any help pls….
    thank you..

  7. Laurent Avatar
    Laurent

    Thanks a lot, it’s crazy, but this z-index:-1; trick saved my work. 🙂

  8. blog | martin edlund » Blog Archive » Yay!

    […] Efter extremt mycket om och men lyckades jag till slut fÃ¥ till det: min meny ser nu identisk ut i bÃ¥de Explorer 7 & 6. 5.5 är inte riktigt lika lätt att fixa till, pga en avvikelse när man använder listor (ul). Ledsen 5.5-användare, men jag har inte tid att fixa detta. Sidan gÃ¥r dock att använda som vanligt, bara ddet att menyn ser lite annorlunda ut. Här är tvÃ¥ bra länkar till er som stöter pÃ¥ samma problem som mig (med z-index och IE 6):Conflicting Z-Index in IE6IE z-index bug  […]

  9. Zach Inglis Avatar
    Zach Inglis

    I also had this problem. I fixed it by changing the z-index to be around the parent element. It does not like it if it is around a child element.

  10. Daniel Jankovic Avatar
    Daniel Jankovic

    Hello,

    I just want to thank you for writing about this. I actually tried out Aleksandar’s approach yesterday, but I probably did something wrong or was to nervous to think properly 🙂

    Anyway, thank you for appearing first on my google search!

    Best,
    Dan

  11. Michelle Avatar
    Michelle

    Thank you, thank you, for this help. I’ve been working for three days to fix two elements (one on top of the other), scouring the Internet, and the zindex -1 fix worked! Thanks for all your contributions.

  12. MMM Developer’s Blog » IE6 z-index bug

    […] This page had the solution. […]

  13. Dwayne Avatar
    Dwayne

    Thanks! The z-index:1 for the parent element worked (luckily the parent was #pagewrapper, so it didn’t affect anything else…yet…

  14. ljagy Avatar
    ljagy

    Beautiful! Z-index:-1 saved my day. Thanks a lot.

  15. Andrew Mellenger Avatar
    Andrew Mellenger

    I was having this z-index issue as well, but I have two menus with drop down lists, one that drops down on the other. similar to the nav menu on http://nymag.com/

    If I set the secondary menu to z-index: -1 then the links didn’t work anymore. I decided to use jquery to change the z-index of the second level menu as needed:

    $(‘ul#primary-menu > li’).hover(
    function(){
    $(‘#secondary-menu’).css(“zIndex”,”-1″);
    },
    function(){
    $(‘#secondary-menu’).css(“zIndex”,”5″);
    }
    );

    hope that helps someone.

  16. Robert J. Berger Avatar
    Robert J. Berger

    We ended up using the bgiframe jquery plugin (http://plugins.jquery.com/project/bgiframe). It implements the iframe “shield” technique in a library. I figure that making IE6 users have to have a bit more of a library download penalty (which isn’t really all that much) so that I don’t have to go crazy about IE6 bleedthru is worth it.

  17. Gercek Avatar
    Gercek

    negative index -1 also saved my ass! thanks dude.

  18. David Jones Avatar
    David Jones

    Thank you so much – IE6 is driving me bonkers and this tip really helped me!

  19. Leo Avatar
    Leo

    Just put “zoom: 1” on the element giving you the problem, IE6 will draw it on top when you do that. It’s not valid CSS but it’s some crazy shit that IE6 does and it fixes it’s own stupid little problem. This is by far the easiest fix.

  20. Ted Avatar
    Ted

    zoom:1 is actually a normal css rule that defines the magnification of the page at 100%. No browser really recognizes it, but it invokes haslayout and Microsoft recommends it as a safe method.

  21. Trevor Avatar
    Trevor

    I am having an issue with z-index in IE 6 using MSFT filters for transparent PNGs. I know this is a whole crazy world of inconsistencies and hokey crap but I was wondering if you have any info on how filter effects z-indexing in IE 6 or if it effects any of the hasLayout stuff.

  22. Cristian Avatar
    Cristian

    Thanks for sharing! This saved me a whole lot of headaches!

  23. the emotional pumpkin » IE7 lessons learned: the z-index bug

    […] how to work around it. If the problem you’re having is with form elements bleeding through, one of the solutions described here, specifically Hedger Wang’s solution (placing your menu above an iframe with a z-index of […]

    [WORDPRESS HASHCASH] The comment’s server IP (64.111.120.15) doesn’t match the comment’s URL host IP () and so is spam.

  24. kathy Avatar
    kathy

    the z-index: -1 ALMOST solves all my problems. on all my blog pages it helps the menu appear over everything. but i have an on the home page that won’t play nice and the drop-down is covered by that. grrr. attempting the zoom technique, but i am not sure what I am supposed to apply the zoon to.

  25. Ted Avatar
    Ted

    Kathy: Applying zoom:1 to an object triggers haslayout in Internet Explorer. Try adding it to items that are not behaving as expected in IE6. It’s not a cure for everything, but is worth testing.

  26. Chris Avatar
    Chris

    I’ve corrected this by forcing the bug onto the elements that aren’t positioned by adding position:relative; to the other elements in the DOM which aren’t being re-indexed.

  27. Al Rojas Avatar
    Al Rojas

    Thank… I can sleep now after a week of having nightmares with this thing.

Leave a Reply

Your email address will not be published. Required fields are marked *