blog.michaelfasani.com

This chunk of XHTML code is used on all my pages so that IE6 displays inline PNG’s correctly. This code stops the blue flash PNG fix problem. The JS code snippet was originally taken from http://homepage.ntlworld.com/bobosola. You will need a different JS file if you wish you use a PNG for form submit buttons. This is free-ware code and all the documentation can be found on the bobosola link above.

Step 1: Prepare your PNG images

Firstly you must give all your transparent PNG images a class of transparent-png.

<img src="ImageName.png" class="transparent-png" alt="MyImage" height="100" width="100"/>

Step 2: Prepare your document

Add the following code to the HEAD of your XHTML document:

<!––[if lte IE 6]>
<style type="text/css">img.transparent-png{visibility: hidden;}</style>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<noscript><style type="text/css">img.transparent-png{visibility: visible !important;}</style></noscript>
<link href="css/ie6.css" type="text/css" media="all" rel="stylesheet" />
<![endif]––>


Line 1: Basically tells the browser to only use this code if the browser is Internet Explorer 6 or lower. That means that newer browsers will ignore this entire section. So all your fixings for IE6 can be done in one CSS file and the JS file is only called when needed.

Line 2: Hides all the images which have a class of transparent-png, this is because IE6 puts horrible blue backgrounds into the transparent areas of the PNG. The pngfix.js overlays the png on top of the existing PNG using the following Microsoft filter (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader) so that the browser understands transparency as expected.

Line 3: Loads the JavaScript file.

Line 4: Makes older browsers which don’t support JavaScript display images anyway even though they may be broken but at least the site will still be usable.

Line 5: Includes a CSS file which can be used to add IE6 CSS fixes.

Line 6: Closes the IF statement.

Step 3: Install the JavaScript inline PNG Fix

Save this PNG fix JS file to “/js/pngfix.js” or your scripts directory.

/*Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006. */
 
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
}
}
}