IE8 developer tools missing some styles

Question

I'm having some problems with some CSS properties in IE8.

I've tested my site in IE7, Chrome and Firefox and they work fine but IE8 is having some layout issues.

I inspect the developer tool option on ie8 and I've noticed that some of the properties I set in CSS are being ignored by ie8. For example:

    #header
{
 position: relative;
 padding: 20px;
 height: 100px;
 background:url(header.png);

}

In this header IE8 ignored the height property: If I inspect the element in developer tools it is missing that property and it's crushed into another line:

background:url;HEIGHT: 100PX

The same thing happens for floats too:

#logon
{
float: left;
text-align:right;
width:20%;
height: 40px;
padding-left: 0px;
padding-right:7px;
border:0;
margin:0;
background: url(navgradient.gif);
}

This ignores the float value:

background: url(navgradient.gif); FLOAT:left;

What is happening here and how can I fix it?

Answer 1

I've seen this too. Some styles are shown on the same line, happens to me with "filter" lines.

The HTML renders in IE correctly, but if you try to toggle that CSS line on/off, it affects both properties. So unchecking "filter: alpha(opacity=25); BOTTOM: 10px" in dev tools disables both the "filter" and "bottom" CSS rules.

So it seems like a bug in dev tools' parser, but not the IE rendering engine. It's crazy how this still isn't fixed.