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.
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.
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
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");
For the extension I used the following in "extensions\PNGFix\default.php": $Head->AddStyleSheet('http://domain/Vanilla/extensions/PNGFix/default.css');
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?
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
Comments
EDIT: Actually there might be some ways here but I wouldn't use them to be honest. Too messy.
Whatever the case, I'd stay away from these kind of hacks, it's just not worth it imho. Cheers.
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.
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.
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 .htcimg { 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");
$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?