Help with td, valign and a:active CSS styles!

I have menu links in a <td> tag. I'm using a display:block so that the whole cell is clickable and background colored. The thing is that the link text is valigned to the top. When I do vertical-align:middle, it doesn't do anything. I'm thinking this is because of the display box. Is there a way to get around this to get the menu links to valign to the center.

Also I'm trying to change the style of the menu item that is selected, isn't that what a:active is for, to apply changes to the link you are actually in? How do I apply a style to the selected menu item?

.menuItems
{
    text-align: left;
    cursor: pointer;
    height: 22px;
    width: 100%;
}

.menuItems a, .menuItems a:visited
{
    padding-left: 3px;
    display: block;
    height: 100%;
    font-family: verdana, arial;
    font-size: 10px;
    font-weight: bold;
    border-left: 7px solid #00285A;
    background-color: #FFFFFF;
    color: #00285A;
}

.menuItems a:hover, .menuItems a:active
{
    padding-left: 3px;
    display: block;
    height: 100%;
    font-family: verdana, arial;
    font-size: 10px;
    font-weight: bold;
    border-left: 7px solid #E70C31;
    background-color: #00285A;
    color: #FFFFFF;
    text-decoration: none;
}
bemara57Asked:
Who is Participating?
 
oceanbeachCommented:
Hello bemara57,

Try this style:

.menuItems a, .menuItems a:visited
{
    padding-left: 3px;
    display: block;
    height: 100%;
    font-family: verdana, arial;
    font-size: 10px;
    font-weight: bold;
    border-left: 7px solid #00285A;
    background-color: #FFFFFF;
    color: #00285A;
    text-decoration: none;
      padding-top: 6px;
      padding: bottom: 6px;
}

.menuItems a:hover, .menuItems a:active
{
    border-left: 7px solid #E70C31;
    background-color: #00285A;
    color: #FFFFFF;
}

This way, we have 10px for the font size & 6px top & bottom padding, for 22px total height.

-OB
0
 
oceanbeachCommented:
Hello bemara57,

try removing 'height: 100%;' from '.menuItems a, .menuItems a:visited'.

I hope this helps!

oceanbeach
0
 
oceanbeachCommented:
..and from this '.menuItems a:hover, .menuItems a:active'

-OB
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
bemara57Author Commented:
When I do that the height of the menu item is exactly the height of the letters of the link. I was trying to make it as 22px tall and v-center the text with. Any other ideas on this?
0
 
bemara57Author Commented:
I even did an inline style on the <td> of  valign="middle"  and  valign="center", but even that doesn't center it. Does the display:block have that effect?
0
 
bemara57Author Commented:
Thanks that worked!
0
 
oceanbeachCommented:
That is great bemara57!

Glad to help out.

-OB
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.