Vertical-Align has not effect for my tab menu

Discussion in 'HTML & Website Design' started by jcandeli, Jan 19, 2006.

0
  1. #1
    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><a href="" class=BA>test 1</a></td>
    <td width="25%" class=Bbkg><a href="" class=BA>test 2</a></td>
    <td width="25%" class=Bbkg><a href="" class=BA>test 3</a></td>
    <td width="25%" class=Bbkg><a href="" class=BA>test 4</a></td>
    </tr>
    </table>

    Thanks!
     
    jcandeli, Jan 19, 2006 IP
  2. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There is a bit of confusion from the property name vertical-align. This property operates on inline elements, and is generally used for creating superscripts or subscripts.

    Here is how I would change what you have. (Green means add; red means remove.) 
    <style [color=green]type="text/css"[/color]>
.Bbkg
{
BACKGROUND-COLOR: #959595;
BORDER-RIGHT: 1px solid #ffffff;
BORDER-LEFT: 1px solid #ffffff;
BORDER-BOTTOM: 1px solid #ffffff;
[color=red]HEIGHT:21px;[/color]
text-align:center;
[color=red]vertical-align:middle;[/color]
}

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

.BA
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
font-family:verdana;
COLOR: #414042;
TEXT-DECORATION: none;
display:block;
[color=red]height:100%;[/color]
[color=red]vertical-align:middle;[/color]
[color=green]line-height: 21px;[/color]
</style>

[color=green]<!--[if lte IE 6]>
<style type="text/css">
.BA {
	height: 0;  /* give layout to anchors (IE weirdness) */
}
</style>
<![endif]-->[/color]
    Code (markup):
     
    FeelLikeANut, Jan 19, 2006 IP
  3. jcandeli

    jcandeli Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You are AWESOME!
    Thank you so much for fixing this for me! Works great.
    JP
     
    jcandeli, Jan 19, 2006 IP
  4. jcandeli

    jcandeli Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You are AWESOME!
    Thank you so much for fixing this for me! Works great.
    JP
     
    jcandeli, Jan 19, 2006 IP