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….

Join the Conversation

7 Comments

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. not sure if this will work for the pngfix you are discussing here, but I’ve found that if you are in a situation where your links have been made unclickable, setting the position of the link to ‘relative’ will make it usable again.

  2. my links can not be clicked

    my solution (coz i just found that problem yesterday when i built my own site :P), i just make it into two div.
    One filled with the png img background.
    with the top of that, div that contain the links.
    And hey…my menu got work.;P

  3. @Irawan: Wow the latest alpha built on August 26, and its support backgroung repeat and positioning, thanks for the info.

  4. I’m very hate if dealing with this browser coz we must put some holy hack code to fix the bugs in the layout.

    CSS Background positioning not work!

    yups is still not work in version IEPNGFix v1.0 bro but i see in the site that IEPNGFix 2 Now supports CSS background position and repeat but still Alpha version 🙁

    My links can not be clicked

    i use this trik for solve that problem 😀
    http://www.satzansatz.de/cssd/tmp/alphatransparency.html

    great article bro…

    cheeers