IE6/7 a:hover bug

Submitted by Gold on Thu, 01/15/2009 - 15:27

I've just had an annoying couple of hours trying to fix a bug in IE 6/7. I had an interesting CSS error where the background of the parent element was disappearing when an anchor was moused over.

BWMsnow and SkateGear were having the same problem. Here, we have an image logo, wrapped in an anchor, wrapped in an <h1>, wrapped in a page-header div. It looks like this;


<div id="page-header">
  <h1 id="logo" class="nobg noborder">
    <a href="http://example.com/">
      <img src="/path/to/logo.png" width="184" height="79" />
    </a>
  </h1>
</div>

The <h1> has the large background image attached to it and when you hovered the mouse over the logo (<a><img /></a>) the background image on the parent <h1> disappeared.

The fix for this was the following CSS snippet;


<!--[if IE]>
  <style type="text/css" media="all">
    #logo a:hover {
      background:url(/path/to/trans.gif)
    }
  </style>
<![endif]-->


Now, while this fixed the problem, it doesn't explain it.

  1. Why was the parent element having it's background overridden in the first place. Several hours hunting through the CSS (Firebug rules!) did not reveal anything else influencing these elements.
  2. Why, when the a:hover is set, does the background of the parent element now not disappear? This is the expected behavior, but all this does is set the background of the anchor tag. Why was the influence of a:hover no longer acting on the parent header tag?
  3. And the biggest mystery of all; Why was I the one working on an IE CSS bug??

I spent quite a while searching for a solution to this but either there's not a lot out there on this or I couldn't find the right keywords. Either way, hopefully this has been of assistance to you.