The bgcolor Attribute Doesn't Work in Internet Explorer

There is a bug that impacts all versions of Internet Explorer.  These are the conditions that must exist in order for the problem to occur:

1. An HTML element must be using the deprecated bgcolor attribute.  This will likely be a table, tr, or td element.
2. The color must be specified using the hexadecimal short notation, i.e.  #123 instead of #112233

Internet Explorer cannot read short-notation hexadecimal colors in this particular property.  It will instead improvise by applying a background color of black.

The simple solution is to not use the bgcolor attribute, but if you have no control over the markup, use a full-length hexadecimal value instead.  If you're working in an application where you have no control over the markup or the value of this property but can apply CSS with a style sheet, slap the developers in the face and attempt to target the elements to override the color.  Don't try to use attribute selectors though (see here for more information).

CSS Attribute Selectors and IE 7

If you've tried to use attribute selectors in IE 7 and found it to be quite spotty, you're not alone.  Here's a brief illustration of just what I mean:

tr[height="50%"] { background: #fff; }

Though this bit of CSS will work in virtually any browser, it will not work in IE7.  But these will:

div[height="50%"] { background: #fff; }
tr[height] { background: #fff; }

Aside:  It's important to note that a DOCTYPE has to be specified in order for attribute selectors to work at all in IE7.

So what's the deal?

I created a test page to reproduce these issues and verified them in IE 7.  Then, I opened the page in IE 9, opened the DOM inspector (F12), and changed the Browser and Document modes to IE 7.  Voila, the attribute selector issues are reproducible there as well.  I found that unchecking the selector in the CSS pane and checking it again actually caused the selector to work.

This is pure speculation, but I believe the cause of these inconsistencies is that IE 7 will complete the loading of a webpage before certain attribute selectors have had enough time to resolve against the DOM.

In any case, the elements can be targeted through a number of other, more effective means, and luckily for us, the user base for IE 7 is currently at just 1.53% (Source: StatCounter).