PNG transparency in IE6......a world of pain

Trying to get png transparencies to work in IE6 can be difficult. In certain cases you need to use the alpha transparency loader filter, which isn’t pretty. The good news is that if you simply want a html image to use an alpha transparency in IE 6 there is a simple JavaScript fix.
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in head with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) &amp;&amp; (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
}
}
}


See this page for a more in depth treatment: <a href="http://homepage.ntlworld.com/bobosola/index.htm">http://homepage.ntlworld.com/bobosola/index.htm</a>.

The really tricky bit comes when you want to png’s for something like a rounded css driven border. In general you can use divs nested within one another and use their background properties something like this:
CSS
#banner_main
{
background: url(/PBSNET2008/AdviceBetaGUI/Applications/Advice/Images/banner/banner_bg.png);
height:60px;
}
#banner_left
{
background: url(/PBSNET2008/AdviceBetaGUI/Applications/Advice/Images/banner/banner_bg_left.png) 0 0 no-repeat;
height:60px;
width:8px;
width:100%;
}
#banner_right
{
background: url(/PBSNET2008/AdviceBetaGUI/Applications/Advice/Images/banner/banner_bg_right.png) 100% 0 no-repeat;
height:60px;
width:100%;
padding-top:6px;
}
<div id="banner_main">
<div id="banner_left">
<div id="banner_right">
</div></div></div>

While you can use the AlphaImageLoader in your divs as a replacement for background image they aren’t proper background images. The problems are:

1. They don’t tile properly - you can ‘crop’ them so they appear once in the div or stretch them. Depending on the shape of the image and the shape of the containing div this can look OK or really bad.

2. The lack of tiling means you can’t use background position as in the code above.

3. This is really buggy. Buttons and form elements often don’t work properly. Weirdly setting the text-align property of the parent div to the left or right weirdly makes the button work. Sometimes. Depending on the size. And how many times you click it. And where about you click it. I am not the only one to have this behaviour.

4. The AlphaImageLoader doesn’t work unless you explicitly set the width or height which can make stretchy layouts difficult without Javascript hacks to set the width/height when something changes.

Here is some code for a curvy top of a rounded css driven box. Note the use of floats to get the layout to work.
#header_center
{
margin-left:30px;
margin-right:30px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/PBSNET2008/AdviceBetaGUI/Applications/Advice/Images/dialogs/header.png,sizingMethod='scale');
height:60px;
color:White;
font-family:Arial;
}

#header_left
{
height:60px;
float:left;
width:33px;
margin-right:-3px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/PBSNET2008/AdviceBetaGUI/Applications/Advice/Images/dialogs/header_left.png,sizingMethod='scale');
}
#header_right
{
float:right;
width:34px;
height:60px;
margin-left:-3px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/PBSNET2008/AdviceBetaGUI/Applications/Advice/Images/dialogs/header_right.png,sizingMethod='scale');
}