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?


  • Options
    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.
  • Options
    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.
  • Options
    ^ works. I use it.
  • Options
    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.
  • Options
    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.
  • Options
    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.
  • Options
    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.
  • Options
    yea but will it work in firefox ;-) I notice FF has some png issues
  • Options
    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.
  • Options
    I'm not exactly qualified to help debug issues with it, but what do you mean by extension?
  • Options
    @ 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
  • Options
    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("");
  • Options
    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?
  • Options
    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.