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

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.

^ works. I use it.

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.

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.

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.

@ 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

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.]&gt;&lt;script defer type=&quot;text/javascript&quot; src=&quot;http://krak.servehttp.com/Vanilla/extensions/IEPNGFix/pngfix.js&quot;&gt;&lt;/script&gt;&lt;![endif]-->');


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