When links don't work for the iepngfix

I wrote a blog entry a while ago on how to handle png-images in Internet Explorer 6 (IE6) that are used as a background in a 'div' or a 'td' or something so that they can become transparent. This solution works but is not the best. Instead I use the IE PNG Fix by TwinHelix.

All you have to do is to copy the iepngfix.htc and blank.gif to some place on your server. See the instructions. Then use the following css which will handle the tags which use the png for transpacency.

<style type="text/css"> img, div { behavior: url(css/resources/iepngfix.htc) } </style>

You could add ''a or 'td' if those tags are used instead, like this:

<style type="text/css"> img, div, a, td { behavior: url(css/resources/ iepngfix.htc) } </style>

So this is basically everything you need to do, very easy and handy.

Now, I have bumped into a problem in the case when I have more html in a 'div' or a 'td' on which I have used this.
Say it looks like this:

<style type="text/css"> td.transparency { background: url(images/anImage.png) left top no-repeat; width:238px; height:572px; margin: 0; padding: 0px 0px 10px 3px; } </style> <style type="text/css"> td { behavior: url(css/resources/ iepngfix.htc) } </style> <table><tr><td class="transparency"> <div><a href="http://www.twitter.com">Twitter</a></div> <table></tr></td>

Now the link will probably not work (I haven't tested this specific case actually). Other functionality might disfunction as well. So what you have to do in order to fix this is to work with the postitions of the different elements. This page describes the problem and solution and is recommended by TwinHelix.

What I did to solve the problem was only to add a small style attribute to the inner element holding the links, like this:

<table><tr><td class="transparency"> <div style="position:relative"><a href="http://www.twitter.com">Twitter</a></div> <table></tr></td>

And it works!