Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Transparent PNG fix?

edited September 2006 in Vanilla 1.0 Help
Anyone have a good solution for allowing transparent PNGs to render properly in IE for Vanilla?


  • JoeJoe
    edited 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.
  • edited 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.
  • ^ works. I use it.
  • 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.
  • 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 = ( ? "id='" + + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + 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.
  • The best one I've seen is the PNG Behavior file: It actually lets you specify weather the image is transparent or not in CSS: img { behavior: url(""); } All automatic, no insertion of code anywhere other than in your CSS files.
  • 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(""); } </style>

    Also, when viewing the demo on my local server it gives me an activex warning, asking me if i want to run it.
  • yea but will it work in firefox ;-) I notice FF has some png issues
  • 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.
  • I'm not exactly qualified to help debug issues with it, but what do you mean by extension?
  • @ 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
  • edited September 2006
    Also, you can put in you style folder, and add in vanilla.css:img { behavior: url(""); }
    If you add these line in the header with an extension, you have to put the path to, url("");
  • For the extension I used the following in "extensions\PNGFix\default.php":

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

    And I placed the blank.gif in the folder as well. Just for shits-n-giggles I also tried just placing the entire file contents in there, also doesn't work. I also tried pointing directly to the 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, 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=""></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
This discussion has been closed.