IE6 PNG Replace: How to make a nested <a> clickable?

Question

For the purposes of this question, consider this:

<div class="has_transparent_png">
    <a href="foo.html">
        <span>
            <img src="logo.jpg" />
        </span>
    </a>
</div>

The Problem: In IE6, the <a> is not clickable. Here's the PNG replace I'm using:

.has_transparent_png {
    background-image: url(images/transparentpng.png);
}

* html .has_transparent_png {
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/spacer.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true));
}

How can I make the <a> clickable? I have no control over the HTML. Only the CSS. Thanks in advance.

Answer 1

You can try to do..

.has_transparent_png a { position:relative; zoom:1; }

This won't always work...

Another alternative would be to use a sibling div to fill up the entire parent div with the png and then have a sibling div to that which contains the anchor and has a higher stacking order.

Answer 2

Not sure if this helps, but it seems that your are setting up that DOM structure to fix a transparent image on IE6. You may simply run a js function on specific ids to fix the transparency on images using a script like this one: http://homepage.ntlworld.com/bobosola/pnghowto.htm

Do something like this at the bottom of your page:

DD_belatedPNG.fix('#imgThatNeedsFix');

Hope that helps.

Answer 3

It seems as though there is no way to do this strictly through CSS, which was the intended goal.