I'm stumped by your code. I can't work out what is keeping the "Hello
World" link in the centre (vertically). I've taken out everything that
could be responsible for it and it's still hanging there, looking at
me... Try it out. It's freaky as hell. It's the code from this page:
http://cboh.org/spantest.html
And it's what caused my suggestion not to work.
I belive the answer is that, unless specified otherwise, what goes
in the <td> defaults to being vertically centered. In your example
below, the <a>...</a> is still vertically centered within the <td>,
but with a height of 100%, it is immaterial. Of course, the "Hello
Just one thing; if you've set the width and height properties for a box
you don't need a non-breaking-space to hold it open. Anyway, here's
some code, very similar to your own where what I proposed above worked
(it's a little simplified from your version):
<!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">
table {margin:0 auto;}
td {width:100px; height:200px;}
td a {display:block; width:100%; height:100%; background-color
range;
text-align:center;}
a:hover {background-color:yellow;}
</style>
</head>
<body>
<table border="1"><tr>
<td>
</td>
<td style="width:200px;">
<a href="#">Hello world</a>
</td>
<td style="height:400px">
^^^^^^^^^^^^^^^^^^^^---- Try adding this property
</td>
</tr></table>
</body>
</html>
There's no good way to get the link in the centre (vertically) so this
is as close as I can get. I might suggest using an image instead of
link text.
Try adding the "height:400px" property, as I've done above, and
look at what happens.
(Or just pull up <
http://cboh.org/spantest3.html>)
This is beginning to make sense to me: It appears the browser
is calculating 100% of a height at some point in its process
of laying out the page, but it calculates it prematurely. In
the above (modified) example, my browsers give the <a>...</a>
a height of 200px, even though the table row winds up being
400px high eventually.
Admittedly, there are potential problems to going back and
recalculating the height. For instance, if I specify a height
of 110%, it would theoretically cause the table to grow without
bounds. But the way they do it now -- and since both Mozilla,
Opera, and Konqueror all seem to be consistent in this respect,
I suspect it is the way it is defined in the standards -- is
really counterintuitive to me.
So, my guess is the reason your example worked is that you gave
the height in the internal stylesheet, so it was known when the
height property of the <a>...</a> was evaluated, whereas I gave
the height on an inline style attribute, apparently after the
height of the <a>...</a> had already been finally determined.
Rob