Hyperlinks don't seem to work over css background

[coresme2]

I renamed the "-trans.png" extensions for which images to make
transparent, and now the pages display fine BUT the Hyperlinks
contained in DIV's over the element with CSS background images are not
clickable for any region where they fall on a non transparent section
of the background. What's up with that?

I've found solutions on google searching for "Hyperlinks not clickable
over css backgrounds" but they just suggest positioning all hyperlinks
relatively. This doesn't work for me.


If I don't link to the IE78 script, then it displays the images with
screwed transparency, but the hyperlinks are all clickable. Doh!


Any help appreciated ;)

R
T

[rsd]

This is one of the caveats with the PNG fix on IE5/6.

One (not ideal) solution is to use an alternative jpg file in the
background for ie5/6, so you dont sacrifice the layout on recent
browsers.

-Raul DIas

[Christian Jarhult]

This will probably result in an unclickable link:

<div style="background:url(bg.png)">
<a href="click.php">Click me!</a>
</div>

This should work as desired (empty div solution):

<div style="position:relative">
<div style="position:absolute;top:0;left:0;height:100%;width:100%;background:url(bg.png);"></div>
<a href="click.php">Click me!</a>
</div>

Possibly a "z-index" is needed to be sure to put the link in front of
the background-containing div.
/C#

2008/2/18, rsd <raul...@gmail.com>:

[Christian Jarhult]

@rsd: Just read your thread about "Improved PNG solution". Didn't mean
to steal creds by proposing your solution, just so you know... I've
just used empty divs in this way before.

2008/2/18, Christian Jarhult <sva...@gmail.com>:

[Jack Sleight]

Just for future reference, the general rule with this bug, and
reliable fix, is to ensure that the element with the alpha background/
filter applied has no position set, and the link element does have a
position set. That has always solved it for me.

http://www.hrunting.org/csstests/iealpha.html