Page 1 of 1

PNG alpha IE 6 problem is freaking me out...

Posted: Tue Dec 11, 2007 3:48 am
by Sindarin
I am trying to use alpha translucent PNG images, but I can't make it to work. A script I've been using for months suddenly failed me.

As I have upgraded to IE7, I still needed IE6 for testing so I installed multipleIE. Now here's the scenario, I've used this script:

in the php page:

Code: Select all

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

Code: Select all


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
      }
   }
}
Now when I use it from my home computer it looks fine but from my work & client's computer the alpha does not work. What freaks me out most is that the PNG images sometimes work on my IE 6 at work and not from my colleague's. Even the Microsoft tests like http://samples.msdn.microsoft.com/works ... Loader.htm
So I'd come to a point to start thinking that multipleIE is buggy.

I don't know what to do, I really need to use PNG images because of the site layout, but if I am not able to test them properly, I guess I won't bother with it... and is there a way to use php in order to display PNG images properly?

Posted: Tue Dec 11, 2007 11:47 am
by Christopher
IE6 does not support the transparency features of PNG images very well. It will not be fixed, so workarounds or GIFs are the answer.

Posted: Fri Dec 14, 2007 3:37 am
by Sindarin
Yeah that was meant to be a workaround which worked for me.

However I found the solution on a post, that some dlls of that IE distribution were not successfully installed.
It was fixed for my work computers, but how about my client's computer?

Does that image alpha library use any DirectX features?

You know what could be the worst problem? It could be that my client is using pirated Windows and thus he can't install IE7 nor update, so he might be using a crippled IE6. The matter will be that this client will demand from me that the site works properly for him no matter how many times I tell him he is using outdated or damaged applications/browsers and the site works for everyone but not just himself.

Posted: Fri Dec 14, 2007 11:54 am
by RobertGonzalez
I wouldn't rely on your client's computers being fixed. Make a CSS workaround for that browser that throws a GIF instead of a PNG.

Posted: Fri Dec 14, 2007 12:36 pm
by Sindarin
Well I replaced <!--[if lt IE 7.]> with <!--[if lte IE 7.]> and it worked. Weird huh?