Published August 20th, 2003 by Jim O'Halloran
CSS Wierdness
I’ve been having problems with some of my pages rendering without background/foreground colours in Mozilla. The pages worked fine in IE, but the colours (which were applied via CSS) didn’t appear in Mozilla, but the fonts (also applied via CSS) did. After running my CSS through a validator, the problem became obvious…
Before
<style>
.HeadRow {background=#8CAAE7; font: bold 10pt Arial Narrow; color=#FFFFFF;}
.BodyRow {background=#F7EFE7; font: 10pt Arial Narrow ; color=#42418C;}
</style>
Some of my CSS used syntax that was clearly invalid, but for some reason IE tolerated this and rendered it as intended, while Mozilla didn’t. After fixing it, we got…
After
<style>
.HeadRow {background-color:#8CAAE7; font: bold 10pt Arial Narrow; color:#FFFFFF;}
.BodyRow {background-color:#F7EFE7; font: 10pt Arial Narrow ; color:#42418C;}
</style>
Moral of the story… If Mozilla isn’t rendering your pages correctly, it could be that Mozilla is right, and IE is tolerating some mistakes on your behalf! At least I know now, and one problem thats been annoying me for a while has been fixed.