: How do I use transparent PNGs in IE6? 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
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.
More posts by @Murray432
4 Comments
Sorted by latest first Latest Oldest Best
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.
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.
24 ways has a well-written article on this issue:
24ways.org/2007/supersleight-transparent-png-in-ie6
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
}
}
}
}
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.