Internet Explorer 6 PNG Fix for Drupal theme

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:
  2. From this package, copy 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 with a text editor and look for this line:
    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/;}

    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.