Transparent PNG And Internet Explorer – Elf Knows It [ARCHIVED]

I suppose I have to start this with “Why oh why does Internet Explorer always have to give me head-aches??”

While working on my newest site http://ciorcal.com I was faced with another complaint by Internet Explorer. It just did NOT want to work with my transparent png’s as a background. No matter what CSS hacks I used, Javascripts I tried, it just didn’t want to work for me.

Here’s what I was faced with:
Firefox and other browsers
Nice blending shadow.



Internet Explorer 6 and lower
Ugly looking mess..

The compromise – I can’t have users seeing the site in a mess like that, so for now I have to use a simple CSS trick to make IE load a different background image, without the shadows 🙁

Here’s what it looks like:
Not as pretty as the shadows, but still prettier than the mess IE was making of it.

How it’s done:

    background-image:url(...);
    #background-image:url(...); /*Special IE treatment*/
    _background-image:url(...);/*More Special IE treatment*/

It takes an extra 2 lines of code in the CSS file. The # tells IE to ignore the real background-image, and the the _ tells IE to use that one. Other browsers just ignore these lines. Internet Explorer 7 ignores these lines too.

THANKS INTERNET EXPLORER!

If anyone knows how to make this work, without slowing down the loading of the page. Let me know with a comment!