CSS Fix: Background Image Appears on FireFox but not IE


Have you ever rewritten some CSS, only to discover that the background image of your page's body element works in FireFox, but not Internet Explorer?

FireFox is just a little bit better at filling in the details for misconstrued CSS rules than IE7. If you're using the background pragma to define all the attributes at once, make sure you define everything, not just the attributes you want to change. For example, do this:

background: #e5e5e5 url(img/body.gif) repeat fixed top left;

...as opposed to this:

background: #e5e5e5 url(img/body.gif);

IE7 isn't able to "fill in" the default values, and will ignore the entire directive.

Did you enjoy this post? Please spread the word.