IE GIF/PNG Transparency issue with jQuery

Question

Ok, this is pretty weird...

Here's the page in question: http://s289116086.onlinehome.us/lawjournaltv/index.php

The main blue callout background was originally a PNG, but when I applied some jQuery trickery to it (click the numbers in the top right to see what I mean), an ugly white border appeared where the transparency should be. See this screenshot from IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional

I figured I could sacrifice the quality/flexibility of a PNG and just resaved each of the backgrounds as GIFs and set the matte color to white (for now). Well, I was proven wrong because IE is treating the GIF transparency the same as the original PNGs.

I've read here that the issue with PNGs, Javascript, and IE has something to do with multiple filters can't be applied to one image, but shouldn't GIFs be exempt from this because they lack the Alpha Channel? Is there any way to make this page look similar in IE to Firefox or Webkit browsers?

Thanks in advance!

Answer 1

This is a bug in IE.

No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.

To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:

if ($.browser.msie)
    $(something).css({
        background: 'none',
        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
    });

(This code works; I'm using it right now)

Answer 2

I basically solved this by loading a different set of images (using PHP) on each page refresh. It's not as dynamic, but my attempts at using the ugly, proprietary CSS filters or other javascript-based plugins were all fruitless. In my eyes, this is clearly one of the biggest bugs I've come across in my time spent hacking away at IE. In fact, I'm suprised it took this long for me to encounter it.

Word to the wise in this case: try to back transparent imagery on a solid color or suffer the consequences in IE.