Transparent PNGs
Posted on May 5, 2009 by Frederik Vig in Web designThis 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.
- 24 ways: Transparent PNGs in Internet Explorer 6 (SuperSleight)
- IE PNG Fix – TwinHelix
- DD_belatedPNG: Medicine for your IE6/PNG headache!
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(); } |
Steve says:
Post Author September 22, 2009 at 16:05Hi Frederik,
Just stumbled upon your site and this post in particular. Struggling with the SuperSleight option but I will persist, my javascript skills are set a close to zero at the moment. I do want to use the Supersleight plugin with jQuery so I will try harder.
But I tried the TwinHelix version, first time and works great, excluded the call for the fix with conditional statement, super stuff. I am at the bottom of the ladder at the moment, guys like you give the lift up I need.
Thank you
Steve
Frederik Vig says:
Post Author September 22, 2009 at 16:18Hi Steve,
Thank you for your very kind comment :). If you’re still having problems with SuperSleight and jQuery just post a comment here or send me an email and I’ll try to help.