#FFFFFE, it’s the new white

...

imageWhile working on a website for my employer I ran into a cross-browser issue with MSIE (naturally). Ironically, it’s only a problem above (and not including) MSIE6.

The :hover and :active state of the anchors in the top-level menu items should change text color and background color, then revert back when :link and :visited. In Firefox, Safari, Opera, and even MSIE that’s exactly what it does (see illustration). But in MSIE7 and the latest MSIE8 beta, it doesn’t apply the background color… or so I thought.

Here’s the rule in question:

   1: #LeftNavigation li a:hover,
   2: #LeftNavigation li a:active {
   3:     background-color:white;
   4:     }

Here’s what it looks like in MSIE7+, notice the lack of a white “bar” around the top menu item?

image

Here’s the really screwy thing: if I change the background-color to “black” or “orange” or ANYTHING else, it works just fine.

If I apply the “!important” attribute,

If I change it back to “white” or “White” or “WHITE”, it’s broken again.

If I try the abbreviated HEX, #FFF, it’s broken.

If I try the full HEX, #FFFFFF, it’s broken.

However, if I try “almost white” in the form of #FFFFFE (notice the last number, “E” rather than “F”), it works just dandy. (And yes, “E” is a “number” in hexadecimal.)

So here’s how our new rule reads:

   1: /*
   2:     Apparently Microsoft doesn't like the color "White" or "white" or "#FFFFFF" or #FFF...
   3:     I don't know why, but any other color seems to work just fine, 
   4:     so here's to being "almost white."
   5:
   6:     Don't change the color from #FFFFFE (note the trailing E) unless you figure out why MSIE doesn't like "white."
   7: */
   8: #LeftNavigation li a:hover,
   9: #LeftNavigation li a:active {
  10:     background-color:#FFFFFE !important;
  11:     }

One thought on “#FFFFFE, it’s the new white

  1. hmm… while I don’t do this kind of thing often, I’m going to file this away as a useful tidbit. Thanks for writing it up!

Leave a Reply