Best PNG Fix for IE 6

PNG fix for IE6 has always been messier than expected. There has been lot of out of the box solutions available on the net. However, the best that worked for me was the “DD Belated PNG” fix.

It is a simple PNG fix specific for IE 6. I would recommend you to load it with an IE 6 specific check, as I found some issues with the script on IE8. So, getting back to the point, follow the steps below:

• Download the DD_BelatedPNG.js file from here.
• Register the script in your site as shown below:

<!–[if IE 6]>
<script src=”DD_belatedPNG.js”></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix(‘.png_bg’);
  
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]–>

• To know more about the possibilites and known issues, i would recommend you to go through this site.
• You can use it over special css selectors too. For instance, you have a css selector as below:

ul#mainnav li#subnav a:hover { background: url(‘images/nav-hover.png’) no-repeat center center;}

In this case, you can do a png fix by calling the DD_belatedPNG fix statement below:

DD_belatedPNG.fix(‘li#subnav a:hover’); // for some reason, it is not accepting 3 levels of hierarchy.

 

This post is just a drop in the ocean. After a lot of thought process, i ended up using this PNG fix, which has been good to me. Take this as a reference, go through Drew Dillers site and get rid of the messy IE6 PNG issue.