Grow your CSS skills. Land your dream job.

Bizarre IE6 layering bug

  • # January 13, 2009 at 10:28 am

    Here’s today’s IE6 issue of the day :lol:

    I’ve got a pretty standard site – header with a big graphic up at the top, four links at the right end of the header, and a menu underneath. When you point at the third link, it displays a little box explaining what it is, which partially overlaps the menu. The link calls a simple JavaScript that toggles the "display" property on the box from "none" to "block" and back again.

    Here’s the problem – in IE6, sometimes the box displays underneath the menu (as if its z-index is lower than the menu’s), and sometimes it displays on top of it (like it’s supposed to). I can’t figure out any rhyme or reason to what causes the difference – it happens seemingly at random each time I load the page.

    I tried playing around with z-index and stuff, but it didn’t make a difference.

    I saved the HTML from each case and ran a diff on it – the code is identical. Is this some weird bug or something? I don’t see how the same code can display differently just by refreshing the page.

    Any ideas? Sorry, I can’t include sample code or a screenshot as this is an internal project.

    # January 13, 2009 at 11:26 am

    I figured out that if I remove "position: relative" from the <li>’s that make up the menu, it fixes it…but of course that screws up other stuff. And that still doesn’t explain why merely refreshing the page changes the appearance…

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".