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?
