I set out an hour ago to try to fix a fading problem someone reported. Basically, what I have on my site is a bunch of PNGs, and if they are not clickable, then I have them set to 30% opacity. This works fine in every other browser, and I even had the IE code in place to fix the transparency of these PNGs.

I didn't find a lot of recent information, but it seems that IE8, without compatibility mode turned on, doesn't render opacity. Ugg. So after an hour of searching for a hack, which I hate using, or some sort of answer. Nada.

So here is what I decided to do:

Using Photoshop, I created a round PNG, the same size as my other PNGs, but this one is solid black, with an opacity of 70%;

Next, using jQuery, I added the following code: (I don't think I have a code style set up yet, so bare with me)


$(function() {
if (jQuery.browser.msie)
$('.hideme').each(function() {
var opac = "";
$(this).parent().append(opac);
});
});


So basically what's happening is if the user is using IE, then grab the parent of each PNG with the class of "hideme", inserting the 70% PNG I created in Photoshop, and setting that on top of the original PNG. Now instead of the PNG fading when it can't be used, it darkens instead.