How to fix fading transparent PNGs in IE8

By NACAdmin  //  Programming  //  No Comments

The most exciting post ever added to the internet, this is not. After spending far too long searching for solutions that defeated Microsoft’s IE8 and it’s lack of web compatibility, however, I felt the need to post my solution in hopes I might help some other poor soul out there looking for the same answer.

I use loads of css with background images rather than IMG tags inside by HTML. This solution doesn’t address transparency for div’s you want to fade that have background images assigned by css unfortunately. I ended up doing a workaround for that, placing the img inside the div and fading the background:none div instead.

So, for all other transparent PNG’s, I added this handy bit of code in my DOM ready and BOOM, all is good.

// Fix fading transparent PNGs in IE
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.substr(imgSrc.length-4) === ‘.png’ || imgSrc.substr(imgSrc.length-4) === ‘.PNG’) {
document.images[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’crop’,src='” + imgSrc + “‘)”;

Leave a comment

You must be logged in to post a comment.

SOHA the beach life

SOHA the beach life is a new apparel company based in South Haven, Michigan USA. They needed a fresh, clean, beach inspired website to launch their line. And that's exactly what we gave them.

see more >