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.

Most of the front end guys here at Appnovation work on a Mac environment, what is great but make things a little be harder to assure that our CSS and JavaScript will work on Internet Explorer.

Even thought there is only one outdated version of IE for a Mac that doesn't even render the CSS the way it does on a PC there are several ways we can do browser testing. From simple web services like browsershots.org that will give you a screenshot on how your site looks on several different browsers (GREAT service but, has some limitations), to having a windows partition on your Mac.

Because we love free and open-source most of us are using VirtualBox which allows you to simulate a PC environment and have one or multiple windows installs running on your Mac OS.

So, in a nutshell, what your are going to do is: