PNG Fix for IE6 – brucey says “come on down”!

We all know IE6 is a bag ‘o’ shite poo right? Well unfortunately there are still loads of people who use it. This is not necessarily a problem in itself, after all as long and we do our CSS properly and understand the limitations of the browser, everything should be ok.

One area that does cause loads of headaches though is transparent PNGs and with more and more of our designs using gradient backgrounds and varying levels of transparency in their graphics, it’s inevitbale that you’ll have to use PNGs as opposed to GIFs to achieve the desired look of the site.

There is a really good and simple PNG fix which I’ve been using for a while and all you need to do to implement it is this:

1. Get yourself downloading this JS file – PNG Fix for IE6
2. In your header, insert the following code:

   <!--[if IE 6]>
   <script src="js/pngfix.js"></script>
   <script>
   DD_belatedPNG.fix();
   </script>
   <![endif]-->

3. The function DD_belatedPNG.fix loads the png fix at runtime and all you need to do now is pass it each element that needs the fix applying. This can either be a class or an id for example:

   <!--[if IE 6]>
   <script src="js/pngfix.js"></script>
   <script>
   DD_belatedPNG.fix('img, .png_img');
   </script>
   <![endif]-->

Some Further Notes on this:

1. You cannot use ‘body’ as one of your elements
2. It doesn’t work on <TR> or <TD> elements, but this *shouldn’t* be a problem should it
3. <INPUT type=”image”/> doesn’t work but why use a transparent PNG for a form button anyway?

Related posts:

1. CSS for ABSOLUTE BEGINNERS – shaping up with CSS
2. CSS Box Model Hierarchi
3. An alternative to sIFR
4. Frog’s Christmas Countdown 2008
5. CSS NEWS – A quick catchup