hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

background does not change on :hover

Date of the Tutorial

Tue Aug 11 19:50:22 2009

Description

I have no idea how this bug was discovered considering the insane triggers that cause it. I got it from http://css.tests.free.fr/en/exemple46.php - kudos. If you ever run into this bug on a real website, I'll buy you a beer! Let's glance at the demo first:

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<div><a href="#">Hover Me</a></div>

CSS Code:

div {
    background-color: #000;
}
a {
    width: 100%;
    display: block;
    border: 1px solid #000;
    color: #ddd;
}
a:hover {
    background-color: #fff;
    color: #000; 
}

In IE7 the background on the link will not change to white on hover. This bug is so fragile that I may as well write a tutorial on how to produce it instead of how to fix it! Check it out: the non-hover state needs "layout", background-color (and not background can be used nor background-image can be used) on the :hover selector. The non-hover state needs to have no background set, border needs to be set and, *drum roll*, the bug only shows itself when the background-color on the :hover is set to pure white (i.e. #fff, #fffff or white). Pretty insane, huh? :)

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Tue Aug 11 20:54:32 2009

Fixed Versions

All of the affected

Description

There are a billion fixes for this bug. I'll show just one:

HTML Code:

<div><a href="#">Hover Me</a></div>

CSS Code:

div {
    background: #000;
}
a {
    width: 100%;
    display: block;
    border: 1px solid #000;
    color: #ddd;
}
a:hover {
    background: #fff;
    color: #000; 
}

The only thing I did is change background-color to background. Viola - bug is fixed. If this fix is not suitable for you, just read the triggers for the bug, you'll find tons of solutions (e.g. background the hover background to #fffffe that is akin to white or setting position: relative to the :hover state.