The problem: when surrounding a table with an anchor tag, the table and everything within is not clickable in IE 6, 7 & 8. How do I solve this issue assuming I can't replace the table with divs?
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Test</title>
</head>
<body>
<a href="http://www.google.com">
<table height="35">
<tr>
<td>I'm a link in a table, bet you can'tclick me!</td>
</tr>
</table>
</a>
</body>
</html>
In order to enable a HTML Anchor Link (HyperLink), the value of its REL attribute is copied back to the HREF attribute and the REL attribute is removed. This makes the HTML Anchor Link (HyperLink) once again enabled i.e. clickable.
How do I make a link non-clickable? In order to disable a HTML Anchor Link (HyperLink), the value of its HREF attribute is copied to the REL attribute and the value of HREF attribute is set to an empty JavaScript function. This makes the HTML Anchor Link (HyperLink) disabled i.e. non-clickable.
Your issue lies in the fact you haven't provided an valid HREF. Try using href="#" instead of href="". Hope that helps . Even with an empty <a href=""> it still activates a mouse pointer when you hover on it.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With