TD content stretch to tallest TD of TR [Archive]

andyisan

07-19-2010, 09:40 PM

I have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head><title>Test</title>

<style type="text/css">

td {
width: 100px;
vertical-align: top;
border: 1px solid black;
}

td a {
display: block;
height: 100%;
}

td a:hover {
background-color: green;
}
</style>

</head>

<body>

<table>
<tr>
<td><a href="d">One year ago, in July 2009, Tumblr was going strong. They had 255 million pageviews that month. By November of last year, that was up to 420 million pageviews. But some new stats which Tumblr is releasing today show an explosion in growth since then. Tumblr is now at 1.5 billion pageviews a month — their Quantcast data confirms this.</a></td>
<td><a href="c">For the first time, Tumblr is now a top 50 site in the U.S. in terms of traffic as gauged by Quantcast.</a></td>
<td><a href="b">now posting some 4.5 million posts a day</a></td>
</tr>
</table>

</body>

</html>

When I hover over the middle TD, it looks like this:

http://img839.imageshack.us/img839/4893/45345.jpg (http://img839.imageshack.us/i/45345.jpg/)

How can I extend the <a> so that the green background goes all the way to the bottom of the TD and fills up the whole TD?

bluewalrus

07-19-2010, 10:45 PM

Change this

td a:hover {
background-color: green;
}

to

td:hover a {
background-color: green;
}

This may not work in ie 6 or 7 forget which one, if both, it doesnt work in...

andyisan

07-20-2010, 01:22 AM

I've tried that and it gives the appearance of working but it doesn't make the "dead zone" of the smaller TD's clickable.

bluewalrus

07-20-2010, 12:45 PM

Is the "dead zone" where the content of the a element doesn't extended to the end of the td element?

I'm not sure how to fix that with css only, I know how to do it with js... If you want the js solution let me know, or if someone else knows how to do it with just css...

andyisan

07-22-2010, 05:48 PM

Is the "dead zone" where the content of the a element doesn't extended to the end of the td element?

I'm not sure how to fix that with css only, I know how to do it with js... If you want the js solution let me know, or if someone else knows how to do it with just css...

If there's no CSS method then sure JS is great!