Pngfix on Internet Explorer 6 Limitations and Tips

[ad#inline-single]Dealing with PNG Alpha Transparency on IE 6 might be very annoying thing in the world. Fortunately, someone generous create a very usefull script that makes IE 6 bits friendly on PNG Alpha Transparency. Altough very helpfull, in many case, PNGFix didn’t solve all issues regarding PNG transparency. Below there are few cases that can happen and (perhaps) few suggestions to make things right.

There are borders in my PNG Images

It means that blank.gif image file can not be found by pngfix.htc file. By default, blank.gif file must be located in the same folder as pngfix.htm, otherwise you must edit the path on “blankImg” variable in pngfix.htc file using a text editor.

My images are streched !!!

Try to add width and height attribute on img tag eg:

<mg src="image.png" width="45"
height="20" alt="image of transparency" />

CSS Background positioning not work!

Yep you’re right, css background positioning not work. Pngfix will locate your image background on top-left, it doesn’t matter if the image has the same dimension with its div. This happens if background image smaller than the div and you try to place it on center or on right side. This CSS you should try:

<div style="position:relative; all-your-fancy-layout-stuff">
   <div style="position: absolute; left: 0; top: 0;
   background: url(whatever.png)"></div>
   <div style="position: relative">Content -
   displays over background.</div>
</div>

Update: The latest version released on August 30 support PNG Background positioning, by adding a small script (add on) to your HTML file:

 <!-- Addon for background tiling support -->
 <script type="text/javascript" src="iepngfix_tilebg.js"></script>

My links can not be clicked

If you placed a link that has pngfix worked inside block tag (eg: div) and has a positioning (eg: position: absolute) the link(s) inside can not be clicked. Solution? there is no solution yet for this, sorry. But alternatively you can change the png images with GIF Transparent, bit zaggy but it works. Place the alternative GIF images to raplace PNG’s in the separated CSS file, read below:

Use conditional tag for IE6

Place the behavior: url(iepngfix.htc); inside a saparated css called IE6.css or whatever you like, for all IE6 related CSS styling. Create a conditional tag after the main css that load up your IE6.css file.:

<link rel="stylesheet" href="main.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="IE6.css" type="text/css" />
< ![endif]-->

That’s all folks! got experience on this? share with us….