Hey everyone,
I have a horizontal list i am using as a nav bar. I have got it aligning and working perfectly except the text is aligned to the top, not the center. FYI All items are single line.
The code i am using is:
#inner_menu2{
margin: 10px auto 0 auto;
width: 740px;
padding:0;
float: left;
}
#inner_menu2 li{
margin:0;
padding:0 0;
list-style:none;
float: left;
}
#inner_menu2 li a, #inner_menu2 li a:visited{
text-align: center;
position: relative;
height: 26px;
float:left;
padding: 0;
border-style:none;
font: normal 10px Arial;
background-color:#4b4183;
color:#FFFFFF;
text-decoration:none;
vertical-align: middle;
}
#inner_menu2 li a:hover{
background-color:#272153;
}
Then here is my list code:
<ul id="inner_menu2">
<li style="width: 5px; padding 0; background-color:#ffffff;"><img src="/leftside.gif" border="0"></li>
<li style="width: 20px;"><a href="#" style="width: 20px"><img src="/home.gif" border="0"></a></li>
<li style="width: 100px;"><a href="#" style="width: 100px">1</a></li>
<li style="width: 85px"><a href="#" style="width: 85px">2</a></li>
<li style="width: 85px"><a href="#" style="width: 85px">3</a></li>
<li style="width: 95px"><a href="#" target="_blank" style="width: 95px">4</a></li>
<li style="width: 60px"><a href="#" style="width: 60px">5</a></li>
<li style="width: 95px"><a href="#" style="width: 95px">6</a></li>
<li style="width: 100px"><a href="#" style="width: 100px">7</a></li>
<li style="width: 40px"><a href="#" style="width: 40px">8</a></li>
<li style="width: 50px"><a href="#" style="width: 50px">9</a></li>
<li style="width: 5px; padding 0; background-color:#ffffff;"><img src="/rightside.gif" border="0"></li>
</ul>
As you can see i am using an image at either end of the list so it has curved edges. I;m pretty sure the reason i can't vertically align it is i'm setting the height of the a to the full height of the li, so effectively it is vertically aligned. I have tried using line height/block vs inline elements etc but had no success. If i remove the height from the a tag then when i hover over it only changes the background of this and not the full height of the li and hence the menu doesn't work in a different way!
I would be massively appreciative if someone could show me how i am supposed to create the above menu with vertical alignment (and hover changing the background color of the whole li element) because i am absolutely stumped!
Thanks so much for your help,
Dave
