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

• Spencer

  Mon Jan 30 13:49:59 2012

  I think I ran into the same issue as RussellUresti (a slight variation on this bug) in a non-public-facing site I'm working on today. I went with the #fffffe fix. Thank you for documenting this so I didn't have to spend the afternoon questioning my sanity.

• Gabriel Lins

  Tue Oct 18 17:14:16 2011

  Hey dude, try to add a border of 1 pixel, so it works :)

• RussellUresti

  Wed Oct 12 16:34:00 2011

  I just came across this as well in an internal application I'm working on. My situation didn't fit exactly as you described, but the bug is specifically on the white background during hover.
  
  My situation is that a few of the anchor tag's parents have zoom: 1 to fix the layout. I noticed when I removed zoom the hover worked fine, but this (obviously) broke the layout. When zoom was added in again, the layout was fixed but hover didn't work.
  
  For me, changing the background property from #fff to #fffffe worked fine. I should note that I see the bug even with using the background property, not just the background-color property.
  
  I'm still trying to figure out a way to fix this that doesn't require changing the color to off-white, I'll post again if I find anything.

• James

  Tue Aug 30 02:48:39 2011

  You owe me a beer....and I owe you six in return! :) Thanks for this!

• Katie

  Thu Jun 16 21:35:06 2011

  Thanks for the beer.
  
  I experienced this on IE8 while testing my layout.
  
  I wish so much that IE would just roll over and die.

• Lindsey

  Tue Nov 9 12:28:52 2010

  Thank God you posted this. This arose when I was setting up a navigation menu with an unordered list full of left-floated, fixed-width list items containing block-displayed anchor links that (were supposed to) change their background color to White on hover. I caught it when doing my cross-browser compatibility debug and can only say... of all the unlikely--

• Chris

  Mon Nov 8 09:34:53 2010

  Free beer here too, i seem to have stumbled onto this as well . ill post a link when its live

• 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: