PNG transparency in Internet Explorer?

Post by **Víctor Paredes** » Thu Oct 26, 2006 6:22 pm

is there some way to put on my page png files with alpha channel and that IE support it?

i hate IE and love firefox... but i must to think in all users, even who doesn't use firefox (...)

thanks.

bupaje · Post by **bupaje** » Thu Oct 26, 2006 9:04 pm

Try this page http://www.alistapart.com/articles/pngopacity/

I am not sure if IE7 has fixed the issue or not - hope so.

7feet · Post by **7feet** » Thu Oct 26, 2006 9:52 pm

There are 2 main ways of making them work. IE takes a bit of hacking to make them work properly.

First set of techniques use JavaScript to do a bunch of stuff on the client side to add the changes needed to all PNG image tags in the document before it gets to the server. I found this one at http://homepage.ntlworld.com/bobosola. I'm using it on my site. I was using a lot of PNGs on my site and never once looked at it in IE - and when I did it was horrible. This works well, as long as the user doesn't have JavaScript disabled.

1- create a file named "pngfix.js". This will be an "include" file that will be inserted into any page with PNGs.

Code: Select all

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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

2- On each page where you have PNGs, insert this code somewhere in the "<head> </head>" section of the page -

Code: Select all

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

I have all of my HTML files in one directory, if they are in more than one you would want to make the 'src="pngfix.js"' above into an absolute path, or have a copy of "pngfix.js" in each directory.

The second is use a cookie that stores the users browser type, and then use a PHP script to generate the proper code modifications for IE. I don't much like cookies, so I don't find this satisfactory either. You can find details on this a number of places, I found several in 2 minutes searching.

The 3rd possibility is my own, and I'm still working on it. I wrote a PHP script for online comics, that would ask the browser what it was and what the screen resolution was. It's just a script, so it doesn't really create anything visible. Then it would create another browser appropriate PHP page and pass it the image I wanted to show and the screen resolution of the user so it could be resized to fit the screen, then re-direct to that. Works well and the redirect is pretty transparent, and it's all server-side so it doesn't matter what the user has disabled. I tried making a modification of this that would make the proper PNG changes for IE, but it's a little more complicated and I don't know PHP well. And I haven't spent much time on it. But if I get it to work, I'll certainly send it your way.

bupaje - I'm not sure as I haven't played with it in any way, but I've heard that IE7 is better but certainly not fixed as far as PNGs go, but who knows where it'll end up...

bupaje · Post by **bupaje** » Thu Oct 26, 2006 11:15 pm

I have IE7 but wasn't aware of any png heavy page, without a fix implemented, that I could test it on. There are still some 'gotchas' though as there has been a page here and there and some plugins - like QT- that give me 'unable to show this page' type errors. The review I read did suggest that in spite of these early glitches the security was so much better it was worth getting which is why I have it at work.

Post by **Víctor Paredes** » Fri Oct 27, 2006 12:24 pm

thanks!
i thought maybe there wasn't solution.

we (the people of Taza Triste) are creating a weird site in which all can be moved (images, text, videos, mp3...), and in which all people can make his own page and design it as he/she wants using CSS.

it's a very ambitious project and we still in the ultra beta version (you can see in http://www.tazatriste.cl). unfortunately for you this page is in spanish, but i suposse that who understand a little CSS style will play with this page even if doesn't speak in spanish.

so, what i want to create using png are pictures with layers, and you will be able to move each one of this layers.

i will try with this code. thanks!, i won't worry anymore about ugly transparency.