If you are a webmaster then you know how a pain in the ass is to make a website compatible with IE6. unlike Firefox, Opera, Safari, and somewhat IE7, IE6 does not follow any web standard, so webmasters end up writing hacks, and many other tricks to make their websites work on IE6. I was planning to just put a banner for IE6 visitors to tell them to upgrade their pre-dinosaur browser to Firefox or IE7, but then going through my Google analytics statistic I noticed that almost 30 % of visitors on this site are still using IE6, so for that reason I fell compelled to find a hack to make the logo of this website which uses PNG alpha transparency to display fine on IE6.
Implementing the PNG transparency hack in IE6
This blog runs on WordPress, and this is the only platform I have tested this hack, but I assume the hack works on any platform as long as you implement it right.
step 1. the first thing you need to do is to download the iepngfix.zip file from here http://www.twinhelix.com/css/iepngfix/ inside the zipped folder, there two files, blank.gif and iepngfix.htc you will need to upload these files to your web server. in my case I uploaded them to WordPress themes directory.
step 2. after you have uploaded to files, add this code on your css stylesheet.
img {
behavior: url(“/wp-content/themes/iepngfix.htc”);
}
as you can see on the css code above, its is customized for my WordPress blog, but you can easily customize it for your own needs. just change the path to where you uploaded the files.
step 3. make sure you have the size of the images defined on your HTML code, otherwise only the blank.gif image will be displayed in ie6. for example in order to display the logo on this site correctly on ie6, I needed to define the size properties on the image like this:
<a href=”http://forevergeeks.com”><img src=http://forevergeeks.com/wp-content/themes/default/images/logo.png”width=”400″ height=”100″alt=”Forever Geeks” border=”0″ </a>
and that’s it, that should make PNG files display fine on ie6.
