CSS TD Vertical Align 4

[arst06d]

Hi
I cannot get the content of the <td> to center vertically in the cell. I've tried using valign=middle in the <td> itself, and in the class definition. Vertical-Align=middle doesn't work either.

Any ideas, please?

<style type="text/css">
TABLE.menu
{
WIDTH: 537px;
}

TD.navButtons
{
height: 40;
TEXT-ALIGN: center;
FONT-SIZE: 16pt;

}
TD.navButtons A
{
width: 100%;
height: 100%;
align: center;
COLOR: yellow;
BACKGROUND-COLOR: royalblue;
text-decoration: none;

}
TD.navButtons A:hover
{
width: 100%;
height: 100%;
align: center;
COLOR: blue;
BACKGROUND-COLOR: yellow;
text-decoration: none;
}

<table class="menu" align="center">
<tr>
<td class="navbuttons" colspan="3" >
<a href="#">ELink Information</a>
</td>
</tr>
<tr>
<td class="navbuttons" colspan="3" >
<a href="#">EoD Revaluation Rates</a>
</td>
</tr>
</table>

 

[arst06d]

I think the problem is when I set the height to 100% in the TD.navButtons A.
If I remove this, then the text is centered vertically, but I then lose the complete fill of the cell with the background colour - so I'm no further forward ....

 

[BillyRayPreachersSon]

Then put the background colour on the cell, not on the anchor element, and you should be set, surely?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[FesterSXS]

set display: block; for the td.navbuttons a and td.navbuttons a:hover. You should then be able to get rid of width: 100%; and height: 100%;

Tony
[red]_________________________________________________________________[/red]
Webmaster -

http://www.SpiraxSarco.com/

 

[arst06d]

Thanks for that, but taking the height: 100%; off leaves the background at just over the height of the text. I want the complete cell to be filled.

 

[BillyRayPreachersSon]

Did you try my earlier suggestion?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Vragabond]

Actually, without <a> element having [tt]display: block;[/tt], width and height should simply be ignored, since that element is inline and as such does not possess those attributes. <a> unfortunately does not support any kind of vertical positioning, so you would have to play with padding, if you need extend <a> across the cell and have it have the background. Or you could still use the solution Dan gave you.

 

[arst06d]

Hi BillyRayPreachersSon
sorry - I overlooked your message earlier.
Here's part of my amended stylesheet - the valignment is OK, but the :hover of the td.navButtons doesn't work. I know I could use javascript to set this property onmouseover/onmouseout, but I hoped I could do it all in a stylesheet.

TABLE.menu
{
WIDTH: 537px;
}

TD.navButtons
{
height: 40;
TEXT-ALIGN: center;
FONT-SIZE: 16pt;
background-color: royalblue;

vertical-align:middle;

}
TD.navButtons:hover
{
height: 40;
TEXT-ALIGN: center;
FONT-SIZE: 16pt;
background-color: yellow;
vertical-align:middle;

}
TD.navButtons A
{
text-decoration: none;
color: yellow;
}
TD.navButtons A:hover
{
text-decoration: none;
color: blue;
}

 

[BabyJeffy]

AFAIK the :hover is not available other than with <a> in IE. Maybe that's why you are having some problems with :hover?

Test in FF maybe?

 

[arst06d]

oh dear
Then it's back to javascript 'cos I need this to work in IE - that's the corporate standard for good or ill.

Many thanks all.