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:

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

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.

Comments

• Alex

  Thu Aug 5 10:11:47 2010

  I'd like to claim my free beer, found this bug while working on an intranet application! Very perplexing until I read this!
  
  thanks,
  A

• doc interface

  Thu Nov 5 08:24:38 2009

  As long as the red component of the background color is not FF, the bug will not appear. Use #feffff for white will work, for example. #fffffe will not work.

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: