I've been wrestling with complex PNG transparencies and Internet Explorer ("IE") 5.5 and 6 for a while. I use IE to design my websites because it's the most popular browser going, but it does have its shortfalls, like the PNG transparency issue.
If you're going to be including a PNG with complex transparencies on a website, there is a fix -- using JavaScript.
In a file I name "pngfix.js," I have this code (taken from here):
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i < document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-11,imgName.length)=="_PNGFIX.PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className
+ "' " : ""
var imgTitle = (img.title) ? "title='" + img.title
+ "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height
+ "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
Between the <head> and </head> tags of my document, I put this code:
<!--[if lt IE 7.]> <script defer language="JavaScript" type="text/javascript" src="/scripts/pngfix.js"></script> <![endif]-->
Every PNG file I want the JavaScript to affect ends with "_pngfix.png." This is to prevent ALL PNG graphics on the page from being re-rendered by the JavaScript, which would result in some odd behavior from images that are stretched beyond their natural dimensions on purpose (i.e., "spacer" graphics).
You can see this in action in the menu on the left. The "EverQuest II," "SOE," and "W3C XHTML 1.0" graphics all have complex transparencies. As the graphics are rendered in the browser, they have a solid greyish background, but after the page loads fully, the attached "onLoad" event is triggered, rerendering those PNGs and correcting the transparency.
Below is a simulation of the script in action. The graphic on the left is an example of how a PNG will appear without use of the "PNGfix" JavaScript. The graphic on the right is an example of how a "fixed" PNG will appear in IE 5.5 and 6, and how every PNG with complex transparencies should appear in other browsers.
 |
 |
Once loaded, "fixed" PNGs will look as clean as they should look in a well-behaved browser! In other browsers like Firefox and Netscape, the script is unnoticeable, as the graphics are rendered as intended the first time.
Keep in mind that any PNG graphics you save to be rerendered in this manner must be in 16-million color mode with alpha channel transparency. It means a larger file, but they come out so pretty! ;)