Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 5 down vote favorite
3

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.

share|improve this question
This question was asked and answered on Stack Overflow: stackoverflow.com/questions/697682/ie6-png-transparency – Sean Moubry Jul 8 '10 at 22:46

4 Answers

up vote 7 down vote accepted

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
              }
           }
        }

}
share|improve this answer
1  
+1 jQuery really can be used for everything... Who knew. – Evan Plaice Jul 8 '10 at 22:40
up vote 6 down vote

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.

share|improve this answer
1  
That's a very good point. – George Edison Jul 15 '10 at 20:28
1  
I 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
up vote 1 down vote

24 ways has a well-written article on this issue:

http://24ways.org/2007/supersleight-transparent-png-in-ie6

share|improve this answer
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.