Vertical text align problem

[scrooby]

Hi,

I am trying to make a CSS navigation, I have managed to get it the way I want except for one thing, I cannot get the text to be vertically aligned, if i use padding in IE 7 it works fine , but in Firefox it sticks a bit extra background image on the bottom, I have tried to use the vertical-align but it does not work, here is the code I am using:

HTML Code:

<div id="Navigation">

<ul>
<li>Home</li>
<li>Forums</li>
<li>DKP</li>
</ul>

</div>

CSS code:

#Navigation {
border-top: 1px solid #FFFFFF;
width: 100%;
height: 40px;
background: url(Nav_Main_Background.bmp);
padding: 0px;
margin: 0px;
}

#Navigation UL {
padding: 0px;
height: 39px;
margin: 0px;
}

#Navigation LI {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
background: url(Nav_Background.bmp) right 0%;
height: 29px;
color: #FFFFFF;
float: left;
list-style-type: none;
margin: 0px;

}

Can anyone help me ? :)

Scrooby

[Nile]

Check out css vertical-align: http://www.w3schools.com/Css/pr_pos_vertical-align.asp

[scrooby]

No that does not work, wherever i put the vertical-align it does not work, i have tried to put it into the css page and the html page in a style tag but it never works, its like there is something over riding it or something blocking the text from moving down :S

[Nile]

Where do you try putting the padding? In the ul, or the li?

[harryknight]

For what it's worth try this.
I use includes and call this up.
HTML
<div id="leftnav">

CSS
/* *****************************************************
Navigation Bar - Left hand side
**************************************************** */
#leftmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 160px;
padding: 2px 5px 5px 5px;
margin: 10px;
float: left;
display: block;
}
#leftmenu .heading {
display: block;
background-color: #6c9669;
color: #ecf2eb;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 2px solid #2c5629;
margin: 0px;
width: 159px;
font-weight: bold;
}
#leftmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#leftmenu ul li {
margin: 0px;
padding: 0px;
}
#leftmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #416B1F;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width: 160px;
}
#leftmenu ul li a:focus {
color: #000000;
background-color: #DDDFAE;/*lt olive green*/
}
#leftmenu ul li a:hover {
color: #000000;
background-color: #DDDFAE;
}

[jscheuer1]

Please post a link to the page on your site that contains the problematic code so we can check it out.

[scrooby]

I have solved the problem, although it may not be the correct way of solving it.

I put a overflow: hidden; in the UL and included the padding so when the background overflowed in FF it was hidden.

Scrooby