6

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.

Improve this question
1
7

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

}
Improve this answer
1
  • 1
    +1 jQuery really can be used for everything... Who knew.
    – Evan Plaice
    Jul 8 '10 at 22:40
6

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.

Improve this answer
3
  • 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
1

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

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

Improve this answer
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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