For a browser that is hardly standards compliant, Internet Explorer still infuriates me and acts as my arch enemy when debugging CSS. How about an example?
This code works in Safari, FireFox, Opera but not IE:
.heading {
background: url("images/heading-bg.gif")repeat-x;
color:#fff;
font-size:1em;
margin:5px 0 5px 5px;
border:1px solid #292929;
padding-left:3px;
line-height:21px;
}
The result: The background image is displayed properly in Safari, Firefox, Opera, etc but not IE. IE failed to display any background image at all.
This code, the same as above with one minor difference, works in Safari, FireFox, Opera and IE:
.heading {
background: url("images/heading-bg.gif") repeat-x;
color:#fff;
font-size:1em;
margin:5px 0 5px 5px;
border:1px solid #292929;
padding-left:3px;
line-height:21px;
}
The result: The background image is displayed properly in all browsers.
What is the difference? There is a space in between the “)” and the word “repeat”. Mind you, both of these validate.
This is just the tip of the iceberg when it comes to cross checking different platforms and browsers. Hopefully this will help someone when they are super frustrated with the same problem.
