Surplus in ie7 and ie8 intead of being Transparent while using PNG transparent and opacity

Question

I am developing a project that uses the PNG transparent and Opacity but, the area has a surplus in IE7 and IE8 instead of being transparent, it is black, can someone help me?

print of area

Thanks

Answer 1

I have a solution for this, have used on multiple sites before.

Simply run this function after your html content has been written to the page:

function fixPNGs(){
  if(jQuery.browser.msie && jQuery.browser.version < 9){ 
    var i;
    //alert(document.images.length);
    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 + "')";
        }
      }
    }   
  }
}

It will only work on img elements and not background images. But once applied you can fade in and out images and animate to your hearts content. I have experienced some strange side effect on some ambitious animations but for 90% of the time it's fine.

Hope this helps you!

W.