Question

So I’m attempting to make an li element into a clickable link by absolutely positioning an a element over it with 100% height and width. This worked fine and was a relatively simple solution for Chrome and FF, but in IE9, the other elements behind the link are still selectable, and so the link is not clickable wherever there is another element behind it.

Here’s a fiddle of the issue, which works as expected in Chrome and FF, but not in IE9: http://jsfiddle.net/DsshY/5/

I referred to Make a div into a link first, and tried putting an empty span in the link, but that did not work. I’ve tried several combinations of positions and z-indexes, and even wrapped the other content in a div with a z-index lower than the link, but to still no avail.

I’m hoping it’s just something simple I’m missing, because I’d rather not have to resort to using Javascript to make clicking the li element a “link,” though I know that’s probably a solution.

Answer 1

So setting a background color and opacity to 0 as in jsfiddle.net/DsshY/7 actually does seem like a solution that works in all three browsers. This seems kind of hacky and not the right way to do it, but hey, it works in IE8/9 and the latest versions of Chrome and FF that I tested.

Essentially I ended up applying these styles to the span within my a element, which effectively turned the relatively positioned parent element into a link:

a {
    position: relative;     
}

    a span {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9;
        background-color: #FFF;
        opacity: 0;
        filter: alpha(opacity=0);
    }