PNG fix for Internet Explorer 6
8th Oct 2009 - Internet Explorer 6 FixesFor 10 years we have suffered without having the use of high quality transparency images. We have had to deal with rough edged gifs, causing us to limit our creatiions. We shall no more, with this little trick.
So without further or do lets get that pesky IE6 to work as it should do, with the PNG Fix!
Firstly, lets download the files we need (right click, save link as)*:
Once you have these files downloaded, put them in any file structure you like, so blank.gif in images directory, and iepngfix.htc within another directory.
Include the below code within your CSS file, ideally at the top, I will explain this after:
[css]* { behavior: url(iepngfix.htc); }[/css]
The reason I use the asterisk is because it means all, so rather then specifying the div or img tags, this will PNG fix all items within the CSS and HTML.
This sets the behavior of the document to use iepngfix.htc.
Now open the iepngfix.htc, we need to edit the location/path of the blank.gif.
Search for the following code:
[js]IEPNGFix.blankImg = ‘blank.gif’;[/js]
Update the code within ‘ ‘ to the path where your blank.gif is saved, this has to be local to the HTML pages and not the CSS or the HTC file itself.
For instance if you stored the blank.gif within the images directory then the code would be like the below:
[js]IEPNGFix.blankImg = ‘images/blank.gif’;[/js]
If you want a PNG as a tiled background, then you have to use the special background javascript file, provided by TwinHelix.
Simply add it to the head of your site, like so:
[html]<script src=’iepngfix_tilebg.js’ type=’text/javascript’></script>[/html]
You have successfully fixed the PNG transparency issue with IE6, without editing any of your current HTML.
* iepngfix.htc was provided by the good people at http://www.twinhelix.com/css/iepngfix/ so thanks to them.
Let me know how you get on!