IE 7 / Quirks Mode and Background color?

Question

This is going to be a vague and obscure question, which is probably due to the fact that even using IE Web Developer, I have no idea what is going on.

I have a utility which I am working on. It's mostly JavaScript, and it has a small floating DIV user interface that shows up on a page. So far, standard stuff. The problem is the background color of some DIVs in the UI. The colors are assigned by CSS, and (tired refrain:) it looks fine in Firefox, Chrome, and Opera, but of course IE is being difficult.

The background does not show up in IE in quirks mode or IE7 mode, but it does in IE8 mode. For the life of me, I can't seem to figure out why IE7 isn't showing the background.

The page you can see the offending code is here: Log Hound Demo. Floating DIV is in the upper-right-hand corner - click the "V" to open it up.

Looking at that page in IE and then in [any other browser on the planet] will show you the missing background colors easily enough. I swear, even Lynx renders it better... ahem. The offending DIV IDs are lhPlateHead, lhPlateCtrlPanel,lhPlateTagPanel - easy to find with Firebug at least. They should be heeding the .lhPlateColor class with a background color of #DFEAF8, but that color is never applied.

With IE web developer up, I tried removing the CSS classes and re-adding them. I tried every combination of browser and document mode - again, only IE8 browser mode in IE8 document mode had the background colors working.

If anyone is bored enough to take a look and figure something out, I'd be much obliged.

Answer 1

I believe the issue has to do with how IE paints table cells. Try putting in a IE only CSS rule that applies the background color explicitly to TD's. Like this:

.lhWarnMsg .logMsg td
{
 * background-color: #fbffbf;
}

Hopefully that will work for you.

Answer 2

Try adding zoom:1 to whatever element the background color doesn't work on.

Answer 3

Well - I finally figured it out, and as far as I'm concerned, this is another reason IE will always suck.

The circumstances of the problem are:

1. You are creating an element programatically:
   myelmt = document.createElement('DIV')
2. You are setting the styles of that element programatically:
   myelmt.setAttribute('class', 'myclass');
3. You are then adding that element programatically to the DOM:
   body.appendChild(myelmt);
4. You are using IE.
5. IE hates you.

In cases such as this, IE8 will honour the "myclass" css and style the element properly when it is added to the DOM. IE7 and I'm guessing below will blow off the CSS styling and leave you thinking that employment at McDonald's is probably a whole lot less stressful.

To recap for the impatient:

Works in IE8 and EVERY OTHER BROWSER ON THE PLANET

var myelmt= document.createElement('DIV');
myelmt.setAttribute('class', 'myclass');
body.appendChild(myelmt);

Works in IE7 and below:

var myelmt= document.createElement('DIV');
var attr = document.createAttribute('class');
attr.value = 'myclass';
myelmt.setAttributeNode(attr);
body.appendChild(myelmt);

If someone can expound on exactly why this is a problem for IE7, feel free as I revel in the minutiae. Otherwise, just remember that it's all fun and games until someone loses an object reference.