IE6 PNG Replace: How to make a nested 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.

score 1 · Answer 1 · answered Sep 27 '10 at 21:21

1

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.

answered Sep 27 '10 at 21:21

Carlos Pinto

538
1
4
12

I wish I could use this fix, but unfortunately am not permitted to add specialized JS in this environment. – dclowd9901 Sep 30 '10 at 17:18

score 0 · Answer 2 · answered Sep 27 '10 at 20:08

0

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.

answered Sep 27 '10 at 20:08

meder omuraliev

183,342
71
393
434

No go, it seems. Thanks for your help. – dclowd9901 Sep 27 '10 at 20:13

score 0 · Accepted Answer · answered Oct 18 '10 at 17:45

0

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

answered Oct 18 '10 at 17:45

dclowd9901

6,756
9
44
63

IE6 PNG Replace: How to make a nested clickable?

3 Answers3