?
Solved

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

Posted on 2007-07-23
7
Medium Priority
?
371 Views
Last Modified: 2010-05-18
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;
}
0
Comment
Question by:bemara57
  • 4
  • 3
7 Comments
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19549505
Hello bemara57,

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

I hope this helps!

oceanbeach
0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19549517
..and from this '.menuItems a:hover, .menuItems a:active'

-OB
0
 

Author Comment

by:bemara57
ID: 19549807
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:bemara57
ID: 19549837
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
 
LVL 12

Accepted Solution

by:
oceanbeach earned 2000 total points
ID: 19550050
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
 

Author Comment

by:bemara57
ID: 19550453
Thanks that worked!
0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19550516
That is great bemara57!

Glad to help out.

-OB
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month9 days, 9 hours left to enroll

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question