Transparent PNG images in IE6 with Drupal and jQuery

Out of the box IE6 does not support the use of PNG 32 transparencies. While most of the time this is not a big deal, sometimes you really want, or need, to use images with a transparent background and neither PNG 8 nor gif will cut i.e. you just need more than a few hundred colours.

Thankfully for us Drupal users there's a jQuery plugin called pngFix that we can use to mop up IE6's inadequacies. However, it comes at a price. You can kiss goodbye to clean markup and somewhere along the line there's likely to be trouble.

You can grab the latest version of the plugin here - http://jquery.andreaseberhard.de/pngFix/

Save it in your theme folder and conditionally call it from the page.tpl.php header, note the $(document).ready() fucntion, you need that to activate the pngFix.js plugin.

  <!--[if lte IE 6]>
    <script type="text/javascript" src="<?php print $base_path . $directory; ?>/js/jquery.pngFix.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
      $(document).pngFix();
      });
    </script>
  <![endif]-->

Now a few caveats. The latest version of this script supports CSS background images, which on the face of it seems great, but in reality can create as many headaches as it solves. Personally I have encountered quite a few issues with form elements (especially when using focus) and un-clickable hyperlinks! Its not really a fix when the fix disables all your links, is it?

Note: the original pngFix.js plugin did not support CSS background images, and in my experience does not cause any of these issues. You can grab it from the Drupal CVS.

The good news I figured out a few simple workarounds to get it all working. First lets look at those links - that's a pretty serious issues and a definite deal breaker. My workaround is to use a wrapper div and use position: relative and a z-index. For example...

<div class="right-sidebar">
  <div class="wrapper">
    content....
  </div>
</div>

.wrapper { position: relative; z-index: 10; }

This works fine as long as you don't apply another z-index to any other elements inside the wrapper. If you do, chances are your links will revert to their former un-clickable state.

Some form elements seem to be affected also, however the only one I have had major troubles with is the search_box input area. My fix for that is yet another position: relative.

#edit-search-theme-form-1-wrapper  {
position: relative;
}

The 3rd major issue is with other images in the page - some PNG images may be stretched and distorted. My work-around for that is to use jpg's or gifs. In particular I found Drupal's default forum icon (the little folders) get stretched across the whole width of the table cell.

I decided to write about this since I've been working on the Burst theme for Drupal which makes heavy use of transparent PNG's. I'm really in two minds about using any PNG fix technique and I wonder if its better to simply degrade un-gracefully. The other option is of course to not use PNG 32, while some pundits push the use of Firworks PNG 8, which is OK as long as you don't need more than 222 colours - therefore most gradients are definitely out.

The choice is really yours - whether you want to support a dinosaur or let it pass into obscurity un-gracefully, and with a shove in the back for good measure;)

Last updated 29th July, 2009 - 8:07pm

Authored by Jeff Burnz on