I wonder if this post would still get hits from search engine result pages. So many other web pages feature this fix for IE 5.5 and IE 6 web browser, that the Catzie.net Blog’s entry might just show up on the… 10th page or so. lol.
Anyways, I’m still posting this, in case there are some visitors browsing around who need help with properly displaying the transparency of .PNG images in IE5.5 and IE6. This also helps me easily find the needed code to fix the display. I need it from time to time when I design website layouts. 🙂
Tip: Most of us are probably using the newer versions of Internet Explorer. I suggest that you download and use the IE Tester. It’s a web browser that lets you see how web pages render in different versions of IE – 5.5, 6, 7, and 8.
I assume that as you read this, you are using Internet Explorer version 5.5, or the version 5.5 tab on the IE Tester.
The following .png image has a grayish background color that replaces the parts that are supposed to be transparent.
This is the code for what’s show above.
|
1 2 3 4 |
<div style="background:pink;padding:20px;"> <img src="http://img.photobucket.com/albums/v209/catzie/transparent1.png" alt="" /> </div> |
Please click here to open on a new window the fixed version of what we are trying to display. You’d notice that there’s no longer the grayish background on the parts that are supposed to be transparent. Now you can see through the pink background.
The final code is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<html> <head> <style type="text/css"> body{ background-color:pink; } </style> <!--[if lt IE 7]> <script language="JavaScript"> 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-3, imgName.length) == "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); </script> <![endif]--> </head> <body> <div style="background:pink;padding:20px;"> <img src="http://img.photobucket.com/albums/v209/catzie/transparent1.png" alt="" /> </div> </body> </html> |
The code above uses conditional comment to check if your current browser is older than IE 7. If it is, the JavaScript code which corrects the display of the .png is executed.
This method has limitations though. It works only on IE5.5 and IE6. It needs JavaScript enabled on your browser, or else it won’t work. And it only works on images placed using the <img> tag. It won’t work on background images.
I learned about this fix from this website
Hi there, Im at my work and was surfing around the net, goofing off, when I came over your web page. It’s quite nicely executed, and I certainly like your way of writing.