Internet Explorer 6 PNG Fix for Drupal theme

October 26, 2008 9:53 pm
4 comments

If you're into transparent images and don't want to battle the 256 colors limitations of GIF files, then transparent PNG images are perfect for you. I usually develop on Firefox, where thinks seem to be a lot more stress-free than Internet Explorer, but know that I need to worry about compatibility.

Unfortunately, Internet Explorer 6 doesn't support transparent PNG images out of the box. Gladly, that's easy to patch: TwinHelix provides an HTC file that enables transparent PNG images for Internet Explorer 5.5 and higher. For anyone who's curious: HTC stands for HTML Component and provides a mechanism to implement components in script as Dynamic HTML behaviors.

Here's the tutorial to install this patch. I'm using Drupal 6.6, my theme is called EasyBreeze.

  1. Download the latest version of the HTC file here: http://www.twinhelix.com/css/iepngfix/
  2. From this package, copy iepngfix.htc into your theme directory (in my case sites/all/themes/easybreeze/)
  3. From the same package, copy blank.gif into the images directory of your theme (in my case sites/all/themes/easybreeze/images/)
  4. Open iepngfix.htc with a text editor and look for this line:
    if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

    Add the correct path to blank.gif. In my case, this would be:
    sites/all/themes/easybreeze/images/blank.gif

    The complete line should read like this:
    if (typeof blankImg == 'undefined') var blankImg = '/sites/all/themes/easybreeze/images/blank.gif';
  5. For the final step, we need to make sure this script is called whenever a transparent PNG file is loaded. Luckily, this can be done via CSS. To enable the patch, add the following line to your CSS file (style.css):
    img {behavior: url(/sites/all/themes/easybreeze/iepngfix.htc);}

    Modify this line of code to match your theme location. If your theme uses an IE-specific CSS file (e.g. fix-ie.css) in addition to your usual style.css file, you should modify that file.

That's all you need to do to enjoy beautiful PNG images using Drupal.

Comments

mark
September 1, 2009 10:52 pm

thanks for this post... very simple and easy to follow. I'm using the Deco theme from Drupal, and am still encountering a problem with the Logo.png file. I tried your fix, but to no avail.

Daniel Hanold
September 4, 2009 2:47 pm
Hey Mark. After having written this tutorial, I recently switched to another method using the PNG Fix module (http://drupal.org/project/pngfix), which requires you to set id's or classes for the png images with a transparent background. It has been working (at all), but it's a bit of a pain, since you need to make sure you account for all the images on your site. Give it a try and let me know if that works better.
George Thomson
September 15, 2009 11:46 am

Internet Explorer 6 brought revolution when was initially released but as time was passing more and more of its flaws and weaknesses were surfacing. Css hacks, transparent png problems, numerous conflicts and errors where the constant nightmare for every web designer. The weaknesses become more prominent when Firefox 1.0 released. Faster, more secure, web developer friendly, with a huge community of dedicated developers was the future. I had my first encounter with Internet Explorer limitations when I was designing by personal website about web hosting industry and especially when I was uploading an article about shared web hosting services. Then, I noticed that my webpage looked quite different on Firefox than the IE counterpart. I spent numerous hours over communities, articles, how tow, css tricks and tips in order to find a solution! I am happy that I read somewhere that now there is a movement that aims to the final retirement of IE. I hope Microsoft will bring us much more stable and secured versions of IE on the near future.

dzieyzone
November 5, 2009 6:14 pm

hi try this module using belatedpng http://drupal.org/node/611816