IE PNG Fix
A very convenient way to deal with I.E 6 png transparency issues, is to use TwinHelix’s IE PNG Fix. Its convenient as in, once you apply it to your css file(s), you don’t necessarily need to do anything each time you use a png file.
So the first thing is to download it. Once done , there are good instructions in the ‘iepngfix.html’ file. An extract is shown here, fyi…
How To Use
Follow these simple steps to add this to your page:
- Copy and paste
iepngfix.htcandblank.gifinto
your website folder. - Copy and paste this into your website’s CSS or HTML:
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
That CSS selector must include the tags/elements on which you want PNG
support — basically, give it a comma-separated list of tags you use.
It must also include the correct path to the .HTC relative to the HTML
document location (not relative to the CSS document!). For instance,
yours may look like this:
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
- If your site uses subfolders, open the .HTC file in a text editor like
Windows Notepad and change theblankImgvariable to include
a correct path to blank.gif like so:
var blankImg = '/images/blank.gif';
Again the path is relative to the HTML file.
Otherwise, you will see a “broken image” graphic! - Sit back and enjoy!
