Clickable Div fails with table

Forum Moderators: open

Message Too Old, No Replies

Clickable Div fails with table

Finding issue with using a clickable div soln. when tables are added

peter sampers

7:29 am on Mar 7, 2007 (gmt 0)

I am currently using a clickable div solution for one of my clients and it works great when the code involves


<style type='text/css'>
a.clickLink{
 display:block;
 text-decoration:none;
}
</style>
 
<div class='clickContainer'>
 <a href='http://www..com' class='clickLink'>
 blahblahblah(images and inline elements)
 </a>
</div>

however, when I use the same code to attempt to make a table clickable, the code works in firefox but fails in IE6/7


<style type='text/css'>
a.clickLink{
 display:block;
 text-decoration:none;
}
</style>
 
<div class='clickContainer'>
 <a href='http://www..com' class='clickLink'>
 <table>
 <tr>
 <td>
  Example Text
 </td>
 </tr>
 </table>
 </a>
</div>

Any thoughts on how to make this work?

kaled

12:11 pm on Mar 7, 2007 (gmt 0)

Links are inline elements, they cannot contain block elements (such as paragraphs, divs and tables). But, I think you known that already!

Whilst using { display: } may be ok for achieving visual effects, using it for behavioural effect will always be fraught with reliability and cross-browser issues.

You may be able to use javascript to achieve the required result but it's likely to be tricky.

Kaled.

hellboy

2:48 pm on Mar 7, 2007 (gmt 0)

Hi! Why don't you just put the link insite the <td></td> tag? Like this:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Fitness Principles</title>
<style type='text/css'>
a.clickLink{
display:block;
text-decoration:none;
}
</style>
</head>
<body>
<div class='clickContainer'>

<table>
<tr>
<td>
<a href='http://www..com' class='clickLink'>Example Text</a>
</td>
</tr>
</table>

</div>
</body>
</html>

peter sampers

3:02 pm on Mar 7, 2007 (gmt 0)

Yes, I've just about decided that javascript may be the way I have to go. I was avoiding it so that I could attempt to keep this solution functional even for those who had disabled it. As for why I am not simply making all of the <td>'s clickable (there is a more complex table layout in the actual site, I simply broke it down to one set of elements for the example because this could be accurately reproduced with one set), I was attempting to get their link count per page down by consolidating links.

Thanks for the replies and if anyone has any other ideas feel free to chime in also!