Blog

One of the most annoying things about debugging your website for IE6 is to get your transparent PNG's to work properly. There are a couple of fixes out there, but most of them have some downsides. For instance, they won't work with background images, etc.

The solution we found is this great jQuery plugin by Drew Diller, which is very easy to use, works with background images and you can select multiple classes where the fix will be working.

Here is a basic run down on how to use this bad boy:

Lets start downloading the plugin here. You will see two files, one with the actual plugin and the other with the CSS classes, where the fix will be applied. The file containing the classes already has .iefix and .ie-fix, but you can add other classes like #header .logo if you need to.

2- Install the latest version of jQuery. If you're working with Drupal, thats already taken care.

3-Place those files on your javascript folder, on your server, and add them to your site's header. Remember that this plugin will only be used on IE6, so you should add them on a conditional comment because you probably wouldn't want people using other browsers to load javascript they don't need.

It will look something like this:


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


4- Add the .iefix class to the elements where you need the fix to apply, and VOILA! No more worries, no more problems.

Do you guy use any other "magical" fixes for IE6 bugs? If so, share with us!!

Cheers!