ansaurus

Question

Anchor tag around table is not clickable in IE 6, 7 & 8

Answer 1

+3 A:

Why not do this?

<table height="35">
    <tr>
      <td><a href="http://www.google.com&quot;>I&apos;m a link in a table, bet you can click me!</a></td>
    </tr>
</table>

Asaph 2009-09-21 23:41:13

+1 this is the right thing (valid and cross-browser compatible), long-winded though it may be for a very large number of cells.

bobince 2009-09-21 23:43:48

The example I provided was a very simplified version of my problem. In the table I was actually trying to work with there are 8-10 cells depending on content. That would make for a lot of extra markup I don't want to have.

PHLAK 2009-09-22 15:58:56

This solution technically isn't equivalent because the entire box is not clickable. That being said, you could expand the size of the anchors to fill the box if your layout does NOT use cellspacing/padding/margins.

NickLarsen 2009-10-26 17:06:09

Answer 2

+6 A:

You can add a JavaScript onclick event handler on the table to do the same thing as the link.

Edit: Removed initial suggestion since it behaved badly in other browsers.

Larsenal 2009-09-21 23:41:48

Answer 3

+3 A:

You can't have a table inside an anchor tag, as the table is a block tag and the anchor is an inline tag. Block tags don't go inside inline tags, so the code is invalid. Replacing the table with div elements doesn't work either, as they also are block elements.

The standards specifies how valid code should work, but not how invalid code should work. Different browsers have different methods of making the best of the situation. One alternative for the browser in this case is to move the anchor inside the table, another alternative is to move the table out of the anchor. Either method will give the desired result in some situations but not others.

The only way to reliably put a block element inside an anchor, is to use an element that is an inlinde element by default, and use CSS to turn both elements into block elements:

<a href="http://www.guffa.com" style="display:block;">
  <span style="display:block;">Eat me</span>
</a>

The code is valid as both elements are inline elements by default, and it works after the style is applied as a block element can be inside another block element.

Guffa 2009-09-21 23:58:34

Answer 4

A:

This is not a solution but additional explanation and a different perspective for the question above. Some people have doubts as to why u need a click on the complete table, or table should be replaced with some inline element, or about invalid code. So here is the scenario which I am facing.

For some reason a legacy code, which comes from some CMS, managed by some other vendor for the client, is using similar code. Where the table is used to draw a button, the old school way. We are not supposed to replace the table code. The anchor which wraps it is intended to take the user to some other page.

I tried a lot of things in CSS, thinking that the issue might be because of incomplete/improper wrapping of anchor outside the table. I tried display properties, z-index, overflow, float, clear, positioning, zoom, and I don't remember what else, in different combinations, but nothing works.

For now I have implemented an onclick on the table but I want to know if this can be done in pure CSS.

Thanks in advance - Manu

Manu Goel 2010-06-23 11:15:03

ansaurus

tags:

views:

answers:

Anchor tag around table is not clickable in IE 6, 7 & 8

related questions