Transparent PNGs

Posted on May 5, 2009 by Frederik Vig in Web design

This is mostly for my own reference, but hopefully useful for others as well. I always forget to add a pngfix for Internet Explorer 6 when using transparent PNGs.
There are a few fixes out there.

The one I’ve mostly used is SuperSleight – mostly because it is so easy to setup. You only have to download the JavaScript file and transparent gif, include it in your project, update the path to the transparent gif in the JavaScript file, and then include it inside the head section of your page with IE conditional comments.

<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->

If you’re using jQuery there is also a jQuery version of SuperSleight. You include it in the same way as the regular JavaScript version, though remember to add the jQuery library file before. Then you can call it like this.

// Checks that the SuperSleight plugin is loaded
if (jQuery().supersleight) {
    // Here you can use regular jQuery selectors to select where you want to add SuperSleight
    $('body').supersleight();
}

Related Posts: