Vertically center menu text

[daddyalfie]

Same problem site as mentioned recently. THIS SITE.

 

I would like to more vertically align the text in the menu items at left. But note the two-line item towards the bottom of the list.

 

I suspect the only way to do that is to use "in-line styling", but I conveniently forgot how to do that since being beat about the head regarding how NOT to do that!

 

 

Thanks! Alfie

[Susie]

You can just use padding instead of trying to declare a height on those <li>s. Like this:

 

div#nav ul li{

display: block;

width: 180px;

font: 10pt arial, helvetica, sans-serif;

font-weight: bold;

text-align: center;

background: transparent;

color: #fff;

border-top: 1px solid #630;

}

 

div#nav ul li a{

display: block;

width: 180px;

text-decoration: none;

color: #000;

padding: 10px 0;

}

 

 

And then at the top of your CSS, you'll need to either remove this or make it more specific with a class so that it won't affect the nav:

 

li {

text-align: left;

font: bold 12pt arial, sans-serif;

margin-bottom: 5px;

margin-right: 30px;

}

 

Those margins are messing up the nav when left as is.

[daddyalfie]

 

Thanks Susie! I shall try it!

 

Alfie

[daddyalfie]

WOW Susie, that worked like a charm!

 

The only thing I had to add was padding: 10px 0; to my "div#nav li" to make the "current" list-item the same height as the rest.

 

Doing a happy dance here!

 

Alfie

[daddyalfie]

BTW, the "fix" works just a well with a padding of (much) less than 10px! I have now reduced it to padding: 4px 0; and everything centers up vertically and beautifully!

 

Tara-tarata-tata: - (Still doing that happy dance!)

 

Thanks Susie, one of the best answers I have received since "Billy Boy" spanked me for a silly interpretation of something!

 

I don't want to leave any of you guys and gals out of my kudos. You know who you are and you are all going to heaven!

 

Alfie

[Susie]

I'm glad it worked out for you!