Question

I have a table inside a hyperlink:

<a href="/"><table><tr><td>...</td></tr></table></a>

In all browsers, hovering over the table changes the pointer to a hand, and through some CSS the table background changes colour (so it looks ‘highlighted’).

However, in Internet Explorer, clicking the table has no effect. In Firefox and Chrome, it follows the hyperlink as expected.

How can I make IE follow the link when clicked?

Answer 1

You can’t nest block-level elements inside of inline elements and expect to get proper results (insert citation here).

You could add some CSS styles to the table and apply a onclick handler so that it acts like a hyperlink:

<table style="fakeLink" onclick="window.location = '/';">...

And the fakeLink class:

.fakeLink
{
  color: blue;
  border-color: blue;
  cursor: pointer;
  text-decoration: underline; /* Not sure if this is possible. */
}

And a demo demonstrating the two techniques: http://jsfiddle.net/qNGrp/4/. I don’t have IE, but I think only one will work properly.