Transparent PNG fix?

mis-one · September 2006

Anyone have a good solution for allowing transparent PNGs to render properly in IE for Vanilla?

Joe · September 2006

As far as I know it isn't possible mate. For transparency I would use gifs. Or wait for IE7?

EDIT: Actually there might be some ways here but I wouldn't use them to be honest. Too messy.

jeffbax · September 2006

You can use directx to pull it off, but its a bit of extra work unfortunately, and not something I'd really bother with personally for standards sake.

Max_B · September 2006

http://homepage.ntlworld.com/bobosola/

Krak · September 2006

^ works. I use it.

DraganBabic · September 2006

If you are in need of a solution for background images, here's a fix (link to an example on my blog), you should be able to understand what's going on if you are familiar with XHTML/CSS, and here's the related article in Serbian. (Hint: Check out the links in the article, some good documented behaviors/bugs there, in english of course.)

Whatever the case, I'd stay away from these kind of hacks, it's just not worth it imho. Cheers.

Wanderer · September 2006

I don't use Windows as a rule but I have tested this with the help of friends who do.

Save the code below to a file called pngfix.js and link to it in the HEAD section of each page...


// Correctly handle PNG transparency in Win IE 5.5 or higher.

function correctPNG() 
   {
   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
	     }
      }
   }
window.attachEvent("onload", correctPNG);

All my Windoze testers tell me it works.

Rowan Lewis · September 2006

The best one I've seen is the PNG Behavior file: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html It actually lets you specify weather the image is transparent or not in CSS: img { behavior: url("pngbehavior.htc"); } All automatic, no insertion of code anywhere other than in your CSS files.

Krak · September 2006

That is by far, superior. But...

It works with the demo, on their site and my local. But when I add it to an extension I have it doesn't work.

I added the following code to my CSS file like it said.

<style type="text/css">

img {
   behavior: url("pngbehavior.htc");
}

</style>

Also, when viewing the demo on my local server it gives me an activex warning, asking me if i want to run it.

bugsmi0 · September 2006

yea but will it work in firefox ;-) I notice FF has some png issues

Krak · September 2006

FF PNG issues? FF shows PNG transparencies just fine, I don't know what your talking about. All the stuff in this thread is to get them to work properly in IE.

Rowan Lewis · September 2006

I'm not exactly qualified to help debug issues with it, but what do you mean by extension?

DraganBabic · September 2006

@ Krak:
Yes, IE will show a warning, you have to deliver the .htc files with the proper MIME type through .htaccess, like so:
AddType text/x-component .htc

Dinoboff · September 2006

Also, you can put pngbehavior.htc in you style folder, and add in vanilla.css:

img {
	behavior:	url("pngbehavior.htc");
}

If you add these line in the header with an extension, you have to put the path to pngbehavior.htc, url("http://domain.com/vanilla/extensions/PngExtension/pngbehavior.htc");

Krak · September 2006

For the extension I used the following in "extensions\PNGFix\default.php":
$Head->AddStyleSheet('http://domain/Vanilla/extensions/PNGFix/default.css');

Default.css:

img {
behavior: url("http://domain/Vanilla/extensions/PNGFix/pngbehavior.htc");
}

And I placed the blank.gif in the folder as well. Just for shits-n-giggles I also tried just placing the entire pngbehavior.zip file contents in there, also doesn't work. I also tried pointing directly to the pngbehavior.zip css file, which doesn't work either. But if I view the demo in the zip, that does work. I don't get it.

I also tried another pngfix approach. I used the code at http://homepage.ntlworld.com/bobosola/, which works in other projects (non-Vanilla related), but does not work when I try to make it an extension. For that one all I did was place the JS in an extension folder and then added

$Head->AddString('<!--[if lt IE 7.]><script defer type="text/javascript" src="http://krak.servehttp.com/Vanilla/extensions/IEPNGFix/pngfix.js"></script><![endif]-->');

I tried the code Wanderer posted too with the previous format. No go. Any ideas?

bugsmi0 · September 2006

I've always notice png color issues in FF but maybe that is only with FF on the mac which Is different than FF on windows, come to think of it I think I remember the png turning out ok with FF on windows just not on the mac

Transparent PNG fix?

Comments