IE6 bug with semitransparent png background and nested links not working

So I had a div that had a tall, wide semi-transparent png as the background image.

Inside this div I had an absolutely positioned link.

Since IE 6 cannot display semitransparent png's as background using the CSS "background-image" property, I had to use the IE-specific "filter:" property.

For those of you unaware, the style declaration looks like this:


.semitransparent {
position:relative;
background-image:url(transparent.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='transparent.png');
}

.semitransparent a
{
position:absolute;
left:20px;
top: 20px;
}


For a quick explanation, the background-image works fine in all other modern browsers with a semi-transparent png file - BUT NOT IE! - the underscore before the next line is a hack that only IE sees, so it renders the background-image:none in IE. "filter" is ignored by other browsers, but I hate this problem so much I don't even want to declare it correctly, so I used "_filter:..." for IE.

A side note is that apparently in IE 5.x if you don't comma-separate the values in parenthesis after "AlphaImageLoader" the background-image won't work. I don't normally care about IE 5.x since if people are still using those browsers the internet looks like crap to them anyhow. (I don't like IE by the way, in case you were wondering)

So after hacking all this together for IE, I went to my page in Firefox, clicked the link and everything looked great. I went to the page in IE and everything looked great until I tried to click the link. There was no cursor when I rolled over the link, and the link did nothing when I clicked it. I tried a few things (including adding cursor:pointer to the style) and nothing seemed to work.

After much Googling, the solution came from the comments on this page:
http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217.

Here's what I had to do: I changed the position to static on the div, then the link worked fine, but the positioning no longer worked. SO I added another div inside the first div, gave it a position of "relative" and everything worked fine.

Here's the CSS:

.semitransparent {
position:static;
background-image:url(transparent.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='transparent.png');
}

.semitransparent div
{
position:relative;
}

.semitransparent a
{
position:absolute;
left:20px;
top: 20px;
}


Here's the simplified HTML:


<div class="semitransparent">
<div>
<a href="#">Blah<a>
</div>
</div>


I hope this saves someone else from some grief.

** one last note is that some folks found that by changing the size of the background png file the links started working in IE (you can read that on the page I linked to above) - but in my case I had a large png to begin with, so this wasn't an option. I get so frustrated with IE...**