IE7 hover bug: z-index ignored (and other properties)

I’m implementing a rather different design right now for an intranet, and have found a bug I thought you’d like to know about. If you restyle things with :hover, you might have to add an extra property for the rule to be applied in IE7.

How is this design different? Well, it built on columns that are overlapping each other. When you hover one of the columns, that column get placed on top (temporarily). You think you need javascript for this? You don’t (if you can live with not supporting IE6).


#menu, #content, #sidebar {
z-index: 1;
}
#menu:hover, #content:hover, #sidebar:hover {
z-index: 2;
}

Simple isn’t it? Now you just have to absolutely position the three columns. By the way, working with absolute positioning is ok as long as you don’t need a cleared footer below the three columns. Strange that not more people use this.

Anyway, the above doesn’t work in IE7. It should, because IE7 supports :hover on all elements, including my “div columns”. Some googling led me to an old IE6 bug where some elements are ignored on links. The bug talks about IE6 and the color property being ignored, but the same seems to apply to IE7 and z-index.

So, long story short, just add display: block to the hover rule and everything works fine. As the link above dictates, many different rules work, the important thing is that it must be a new rule, which you haven’t used before on that element. But you don’t set display: block; on divs, do you? So it should work fine.

Hope it helps some frustrated soul out there :) And long live funky designs.

6 responses to “IE7 hover bug: z-index ignored (and other properties)

  1. Have you tried IE8? If so, does the same bug exist there? If so, have you reported it?

  2. @Someone: No, I haven’t tried IE8. Last time I tried it out it was so broken it couldn’t even render the simplest of things. I’m hearing it’s gotten better, but I think I’ll wait another beta version.

  3. You could always give IETester a try. It provides a clever way of running multiple IE versions side by side, and it includes beta version 2 (i think) of IE8.

  4. Do you really think not supporting IE6 is acceptable these days, even if its just for an intranet (or even if its NOT an intranet)?

  5. @Pin W: Yes. In this case, I’ve carefully looked at the browser stats for this intranet. We’re 90 people, all using something newer than IE6, so I don’t see a reason to go through the annoyance that is fixing-for-IE6. Don’t you agree?

  6. Imagine what we could do if IE was not here anymore? This article brought a smile to my eyes:

    http://digg.com/software/Mozilla_IExplorer_biggest_problem_in_advancing_the_Web

    “Mozilla: IExplorer biggest problem in advancing the Web.
    news.cnet.com — IE still doesn’t remotely approach Firefox, but we do hope to see IE standards compliance and its modern features improved. The single biggest problem now in moving the Web forward is having to deal with people using back versions of IE.”

Comments are closed.