You are here

Tricks of the Trade - IE6 png fix!

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:

Érico has been a Front-End Developer and Designer with Appnovation for 5 years. While he specializes in responsive design and mobile, Érico’s other projects include user experience design, information architecture and business analysis. Originally from São Paulo, Brazil, Érico moved to Canada in...→ More about Erico

Érico has been a Front-End Developer and Designer with Appnovation for 5 years. While he specializes in responsive design and mobile, Érico’s other projects include user experience design, information architecture and business analysis. Originally from São Paulo, Brazil, Érico moved to Canada in 2007 to pursue a career in web development and design.