How do I use transparent PNGs in IE6? I have a corporate app that must use IE6 and must use use PNGs, but the transparency all comes through as a pale white colour.
asked Jul 8 '10 at 22:29
-
This question was asked and answered on Stack Overflow: stackoverflow.com/questions/697682/ie6-png-transparency – Sean Moubry Jul 8 '10 at 22:46
There is a jQuery plugin for it here, or the following script also does a good job (just call it in your <body onload="">;
function fixPNG(){
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (version < 7) && (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
}
}
}
}
answered Jul 8 '10 at 22:34
-
1
IE6 supports transparent (but not translucent) PNG's out of the box. The PNG just has to be saved in the PNG8 format. If all you need is a transparent background and not a blending effect you don't need any code. Just save as PNG8.
-
1
-
1I didn't know this - thanks. Neither did our graphic designers, obviously. – Mark Henderson Jul 15 '10 at 23:01
-
Graphic designers shouldn't have to think about browsers (I wish!). – Gareth Farrington Jul 17 '10 at 3:49
24 ways has a well-written article on this issue:
If you're OK with GIF-like transparency (in IE6 only), then use PNG8+Alpha (paletted, but with semitransparencies).
It gives full alpha in all other browsers. Does not require slow and finicky DX Filters (on which all IE6 PNG24 fixes are based on).
Fireworks and pngnq/pngquant can save this format (I wrote Mac GUI for them).
Adobe Photoshop is the only notable software that doesn't support it, but you can export PNG24 and then convert it.
