Vertical-Align has not effect for my tab menu
Posted: 19 January 2006 07:46 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2006-01-19

first of all, thank you in advance for any help you may be able to provide!

I am totally stumped… I have a simple tab style menu that changes color when I roll over the link but for some reason, the text does not want to center vertically!

I have realized that if I take out the line “height:100%” it WILL center the text but the roll over will not fill the entire tab.

I have stripped out as much as I could to simplify this.
so just to be clear, I want the text to be vertically centered.

<style>
.Bbkg
{
BACKGROUND-COLOR: #959595;
BORDER-RIGHT: 1px solid #ffffff;
BORDER-LEFT: 1px solid #ffffff;
BORDER-BOTTOM: 1px solid #ffffff;
HEIGHT:21px;
text-align:center;
vertical-align:middle;
}

.BA:hover
{
BACKGROUND-COLOR:#DAE8F1;
}

.BA
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
font-family:verdana;
COLOR: #414042;
TEXT-DECORATION: none;
display:block;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<table border=“0” cellpadding=“0” cellspacing=“0” width=“100%”>
<tr>
<td width=“25%” class=Bbkg>test 1</td>
<td width=“25%” class=Bbkg>test 2</td>
<td width=“25%” class=Bbkg>test 3</td>
<td width=“25%” class=Bbkg>test 4</td>
</tr>
</table>

Thanks!

Profile
 
 
Posted: 20 January 2006 02:49 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  3
Joined  2005-11-30

<style>
.Bbkg
{
BACKGROUND-COLOR: #959595;
BORDER-RIGHT: 1px solid #ffffff;
BORDER-LEFT: 1px solid #ffffff;
BORDER-BOTTOM: 1px solid #ffffff;
HEIGHT:21px;
text-align:center;
vertical-align:middle;
}

.BA {
display:block;
line-height:21px;
}

.BA:hover
{
BACKGROUND-COLOR:#DAE8F1;
}

.BA
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
font-family:verdana;
COLOR: #414042;
TEXT-DECORATION: none;
display:block;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<table border=“0” cellpadding=“0” cellspacing=“0” width=“100%”>
<tr>
<td width=“25%” class=Bbkg>test 1</td>
<td width=“25%” class=Bbkg>test 2</td>
<td width=“25%” class=Bbkg>test 3</td>
<td width=“25%” class=Bbkg>test 4</td>
</tr>
</table>

Profile
 
 
Posted: 20 January 2006 02:58 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2006-01-19

ah yes! line-hieght. I forgot about that one. Thank you very much. It works perfectly now. I didn’t even need the vertical-align:middle; property either.

Profile
 
 
Posted: 24 January 2006 04:38 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  1
Joined  2006-01-24

If you need help using vertical-align property, you should read this article I have written:
Vertical-Align Misuse

Profile