IE6 bug: Ignored selector hover bug

IE6 bugs seem to pop up all over the place recently. This one is a very small one, but it might affect people that are building tabbed navigation or CSS-based tooltips. The problem is that IE6 ignores selectors in the form of a:hover [selector].

The problem

Say you want to build a tabbed navigation where tabs move slightly when you hover them (that was how I found the bug). Since you want to reuse the images for the tabs you divide them into two pieces (according to sliding doors). But to do that you need two elements that react on hover. One can be the link but you need one more. So you add a nested span and your code looks like this:

You cleverly position the span and the link, and add a couple of rules to your stylesheet. You also want the text to move slightly, just like the background, so you add some padding.


a:hover {
background: url(...) no-repeat left top;
}
a span {
display: block;
}
a:hover span {
background: url(...) no-repeat right top;
padding-top: 10px;
}

You look at the site in Firefox, Opera, Safari, and IE7 and everything works just fine. But what’s that? Why doesn’t the text move in IE6? You start removing CSS and HTML to pinpoint the problem and end up with a very small testcase with the bug intact.

The solution

Looking at the testcase I was just confused. I was pretty sure I’d seen IE6 do selectors like that before, but why didn’t it work now? HasLayout and the other usual IE6 fixes didn’t work.

I loaded up my IM client and started asking people if they knew anything. Simon noted that everything started working when you changed the selector to a:hover, a:hover span { ... }. Ok, so setting and then resetting that rule seemed to work. Some further experimenting revealed that just setting any padding to a:hover (setting it to zero worked well) also solved the problem.

That was good enough, an extra a:hover { padding-top: 0 }. So here’s the testcase with the bug solved. The bug is apparently fixed in IE7.

19 responses to “IE6 bug: Ignored selector hover bug

  1. Good to know. Do you know another site than PIE(maybe you should contact them to add this one to their list) which gathers all those IE6 bugs ?

  2. There is another IE bug with links. I already posted it on several sites, but this seems to be ignored.
    As you know, inside any anchor (a element) there may be any text or html inline element, and anything which is rendered visually then becomes clickable and should lead to the destination referenced by the href attribute. Not so with the IE. Just try to put a button inside the anchor. The destination is shown in the status line, but clicking on that link does nothing. This is a bug in the most basic and important feature of the web.

  3. Siegfried, a button inside a link is invalid, and HTML4 does not define what should happen when you click on a button that is inside a link, so no behavior is wrong.

  4. @Rasmus Kaj: Sorry for not answering until now. I don’t think they are related. IE probably does not even generate an event for mouseover on anything other than links, and I doubt that’s the problem here.

  5. It seems that this fix doesn’t work for all combinations. At least when using adjacent sibling selectors the fix doesn’t work.

    a:hover + .nextElement { display:block; }

    does not work in IE6, no matter what I am trying. Have you got a tipp how I could get this running with IE6?

  6. @Arne: That’s easy, IE6 does not support the adjecent sibling selector at all. You’ll have to use javascript for that… Annoying, isn’t it?

  7. Yes, but it isn’t just annoying, it’s really corrupting the web… this crappy browser… :-(

    I really hope that systems with OS’ “below” Windows XP will disappear soon, as we can assume that in the world of Windows XP we will at least see a great migration from IE6 to IE7 this year. Doesn’t solve all the problems, but the most annoying ones I think. Microsoft should only be more rigorous in distributing the new version… and yes, to users of illegal versions too, as they are a great amount of windows users at all. So if they really want to help us developers and the web itself they should make possible to update to IE7 without genuine authentication I think. I think it’s a better choice to help the web than to manage excluding illegal versions…

  8. Thank you so much for this sanity-saving fix. I’ve spent the last 6+ hours trying to figure this one out with no luck. It works perfectly now with
    a:hover {paddding-top: 0;} applied.
    Much appreciated, and I agree that you should contact the guys over at P.I.E with this bug, as I couldn’t find a solution to this problem there.

  9. thank you for this! :)
    i just wasted so much time trying to fix this exactly :)

  10. Pingback: ?E6 sorunu: Ba?lant? içi elemanlarda hover sorunu « Çöp Evim
Comments are closed.