Blasted Internet Explorer PNGs

Happy Holidays everybody!

Do yourself and webmasters a favor and use anything but Internet Explorer. Try Firefox!

I do work for a few websites and while most of my work is done behind the scenes on databases and scripts, I do a little basic web design. Today I was updating a site for a client and decided that instead of trying to match the background color of my logo graphic to the table cell color, I would try to use a transparent PNG instead. This worked beautifully in Firefox, but I had forgotten about Internet Explorer. IE can’t render 24-bit transparent PNG images properly…it leaves an ugly cyan background.

Fortunately there are some workarounds. Normally I avoid these but too many people still use IE and I like PNGs. This site shows how to do it with Javascript. This one uses PHP, but it’s meant for people using PNGs all over the place. As I only needed to do this for one image, I adapted their solution and used this code:

<?php
// Deal with PNG transparency problem
$arySize=getimagesize($strImage);
if (preg_match('/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i',
  $_SERVER['HTTP_USER_AGENT'])) {
  echo '<img src="spacer.png" ', $arySize[3],
    ' style="filter: progid:DXImageTransform.',
    'Microsoft.AlphaImageLoader(src=\'',
    $strImage, '\', sizingMethod=\'scale\';"></a>';
} else {
  echo '<img src="', $strImage, '" $arySize[3], '></a>';
}
?>

The spacer.png is a 1x1 pixel transparent 8-bit PNG which keeps the area empty until the filter has a chance to run (you can download it from the PHP-fix link above). If you put the original image there, you’ll see the buggy PNG rendering briefly until the filter runs.

Ugly, isn’t it?