fix for png alpha transparency in IE6

8 bit or 32 bit?

[hessodreamy]

I'm using pngs with alpha transparancy for nice smooth edges. Obviously in IE6 it comes out with jagged edges.
I've seen lots of suggested fixes for this, eg [webfx.eae.net ] all along the same lines. But, for me, they just don't seem to work. At best it is jagged like before, at worst I get a big white square.
I'm using an 8 bit image. Do i need to use a 32 bit image? I noticed one of the sites was using 32 bit, but no one has actually said that it won't work with 8 bit.
Can anyone offer some wisdom?

[Dabrowski]

I've used this before, IE isn't so good with the transparency, If you don't get a big white square, then your patch is working and that's the best you'll get.

I try to use transparent GIF's for borders - for small images you can make them with no loss of quality, and the filesize is smaller.

[sgietz]

I could be wrong, but I believe that you need to use a 32-bit file, which contains an alpha channel. But you need to apply a filter to make it work in IE6. IE7 shouldn't have issues with this.

[tedster]

Very complete reference information about the PNG format is available here, on the PNG official home site:

[libpng.org...]

It's a precise and authoritative treasure trove - probably more information about PNG than most of us will ever need, but it can be a godsend when you run into trouble.

[slimnutty5000]

I found this code from a website. I havent had any problems with PNGs but you can try to see if this helps any:

<!--[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]-->

[rubah]

8-bit pngs don't have any alpha layer transparency. They are identical to GIFs and IE6 displays them fine.

[ChrisBolton]

Use 32bit. I have never had a problem with these in IE7.

[gaouzief]

you need png 32bit to get alpha transparency, we also use dean edward's IE7 pack (which modifies IE6 on the fly to behave like IE7) and it sure saves a lot of time and effort:

[dean.edwards.name ]

[tedster]

Good choice, gaouzief. Note that, back in the days before the real IE7 was released, the IE team at Microsoft publicly praised Dean Edwards work:

I know many are concerned about the level of CSS support in Internet Explorer and we certainly hope to address some of these issues, in the meantime though there is Dean Edwards excellent work [dean.edwards.name] that helps here.

[blogs.msdn.com...]

[thinkdj]

I had a very hard time trying to fix this for an ajax rating system that used transparent PNG stars .. It worked fine in FF and looked very neat.. But whe I tried it on IE, it looked pathetic..
The best solution I found was at [homepage.ntlworld.com...]

[thinkdj]

IE7 supports transparent PNGs but the prior versions do not..
gaouzief's link seems pretty good too

[hessodreamy]

Thanks for the help, guys.
Yes, it turned out that the various solutions out there do required that you use a 32 bit image.
For reasons of page weight I didn't really want to use 32 bit where not necessary, so I altered the code on the site thinkdj suggested, so that, once it detects the browser is IE 5 or 6, it first subsitutes the standard 8 bit image with a 32 bit image, and then applies the filter.
Works a treat now, thanks.