For those web developers who have the unfortunate task of designing with IE 6 in mind. Designs we encounter might make use of PNG files with transparency.
Internet Explorer 6 on its own doesn’t support PNG files with transparency. In order to make the transparencies work, you need to implement a fix that will allow the transparencies to work properly.
This is easily said than done.
A recent web design I was coding into HTML required the body of the content had to be transparent and allow the website background to show through. My challenges were that all the navigational images had to be transparent and the repeating background of the content box was semi-transparent and added a shadow around the content box.
I am a big fan of jQuery and naturally I try to find existing plug-ins that can be an effective solution to solve my problem. My search for jQuery PNG fix lead me to two possibilities:
- DD_belatedPNG
- PNG-Transparency for Windows IE 5.5 & 6
These plug-ins are great and work well for simple PNG fixes of individual images. However, I consistently encountered issues with repeating background images. This dilemma lead me to TwinHelix.
TwinHelix’s PNG solution is unique in that it uses the CSS to call an htc file. The file iepngfix.htc is referenced in the CSS:
.pngIMG{
behavior: url(js/iepngfix.htc);
}
In my CSS, I reference to “pngIMG” class which will apply the fix to any image that requires the fix. Most importantly, this method allow me to have repeating background images displayed properly. Definitely, my first choice for fixing PNG issues.
NOTE: If you are repeating a background image, the smaller the image, the more intense the fix is on the browser. Thus a slower fix result. My solution to that is to have a broader background PNG to repeat a lot faster.
