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