Text showthrough problem in IE when an <a> is positioned above another element

Question

I've been trying to develop a way to make rows of an ASP.NET GridView (or table in general) clickable, whilst still maintaining all the usual actions you'd associate with links - correct right-click context menu, middle-clickability to open in a new tab, etc.

My solution uses jQuery to find <a> tags within each row and expand that <a> tag to the size of the row, thus making it appear that the row is clickable. It all works fine in Firefox and Chrome, but IE gives priority to the the text in the table rather than the <a> tag, so you get a text selector cursor and can't click the link when you hover over the text. This simple example shows what i mean:

<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>

<a href="#" class="link">link here</a>
<div class="content">
    You can't click the link when you hover over this text in IE    
</div>

This could be by design for accessibility, but if that was the case I'd expect other browsers to follow suit. Can anyone offer any suggestions as to how to avoid the issue?

Answer 1

why not just make the <a> display:block and add the other div inside of it?

Answer 2

Probably one of the issues where IE creates a new z-index stacking context where it shouldn't. Either you've got a positioned parent without a z-index (known IE bug), or maybe IE just does that for table cells anyway, since that introduces a new offsetParent.

The normal approach would be to put a link in every cell (containing only a nbsp if it's empty) and use ‘display: block’ to make the link fill the width of the cell.

Answer 3

Alternative approach: instead of making the link the size of the row, why not make the entire row clickable?

$('tr').click(function(){
    $(this).find('a.link').click();
});

You may want to use the css cursor property to make the row appear clickable as well.

Answer 4

Have you tried setting the padding of the a to fill the table row?

The tricky part with that is you'd have to do the math so that it didn't exceed the row. So something like:

$("a").css("padding-top", function() {
         $(this).closest("tr").height - $(this).height;
       });

and so forth, based on the position of the a to the table row.

My thinking is that maybe IE sees overlapping elements (as in positioned on top of one another) as a possible conflict and thus makes a decision to try to accommodate both ("well, the link is yay big, but the text outside of it really isn't a link, so let's treat it like normal text") etc, but that elements that overlap purely for style (which I think padding is considered) would not raise any alarms because, hey, it's just a visual thing!

Just thinking out loud, let me know if it works out.

Answer 5

The text wont show-through if the element has a background-color or -image set.

try...

$("a", this).css("background-image", "url(/images/spacer.gif)");