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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

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

Post 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?
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post 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.
(#10850)
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post by Sindarin »

Well I replaced <!--[if lt IE 7.]> with <!--[if lte IE 7.]> and it worked. Weird huh?
Post Reply