#FFFFFE, it’s the new white

While 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?

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