Fixing transparent PNG breakage for IE 5.5+

Today I decided it was time my school blog looked decent in Internet Explorer, despite that browsers being broken when it comes to rendering transparent PNGs (at least PNGs with eight bits of transparency, which, after all, is what you want). At work I had to come up with a solution to that problem sometime late last year, and made a horrible gob of code that addressed the problem in a dynamic HTML application, right at image generation time.

This time, I settled for serving proper HTML and kludging up a hot fix when the HTML parts of the page has loaded, assuming any *.png image served needs to be addressed when your Win32 IE 5.5+ visitors look at the page. I'm going to keep this in very basic tutorial form, since google can get you proper discussions about the details of the kludge elsewhere.

Near the end of the page, or at a point after which you know for sure that there will be no more transparent PNG images linked in the page, add this portion of code:

<script type="text/javascript"><!--
if( (navigator.platform == 'Win32') &&
    /MSIE (5\.5|[6-9])/.test( navigator.userAgent ) )
{
  for( var I, i = 0; i<document.images.length; i++ )
    if( /\.png$/.test( (I = document.images[i]).src ) )
    {
      I.style.filter = 'progid:DXImageTransform.Microsoft' +
        '.AlphaImageLoader(src="'+I.src+'",sizingMethod="scale")';
      I.src = 'http://www.lysator.liu.se/internal-roxen-unit.gif';
    }
}//--></script>

Congratulations! Now IE, too, will render your page the way it should look. You might want to save the linked image somewhere locally, and change the link (it's a one by one pixel transparent GIF weighing in at 42 bytes, so you can afford the storage space), but otherwise you will be just fine.

Categories:

• IE
• javascript
• howto