IE8 developers lack some styles

Question

I am having some problems with some CSS properties in IE8.

I tested my site in IE7, Chrome and Firefox, and they work fine, but IE8 has some layout problems.

I am checking the developer tool parameter on ie8, and I noticed that some properties that I set in CSS are ignored by ie8. For example:

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

In this header, IE8 ignores the height property: If I check the item in the developer tools, this property is missing and it is split into another line:

 background:url;HEIGHT: 100PX 

The same thing happens with floats:

 #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 going on here and how can I fix it?

Answer 1

I saw it too. Some styles are shown on one line, happens with the lines "filter".

HTML renders correctly in IE, but if you try to enable or disable this CSS line, this affects both properties. Thus, unchecking "filter: alpha (opacity = 25), BOTTOM: 10px" in dev tools disables both the "filter" and the "lower" CSS rules.

So this seems like an error in the dev developer parser, but not the IE rendering engine. This is crazy as it is still not fixed.

Answer 2

Looks like a parsing error or the like. Try putting quotes around image names;

 background: url('navgradient.gif'); 

Answer 3

I saw how this happens if the stylesheet contains filter properties.