IE GIF/PNG Transparency issue with jQuery

Posted by Andrew on Stack Overflow See other posts from Stack Overflow or by Andrew
Published on 2010-04-14T00:18:20Z Indexed on 2010/04/14 0:22 UTC
Read the original article Hit count: 722

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript