Problem in alignment of text link

[rhodarose]

Good day!

I got a navigation bar in dynamicdrive and the problem is the alignment of the text link:

here is the code of css and html:



<style type="text/css">
#nav_vertical {
position:absolute;
width:191px;
height:111px;
z-index:7;
left: 10px;
top: 159px;
}

#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#nav_vertical li{
display:inline;
margin: 0 0 0 0;
padding: 0;
text-transform:uppercase;
}


#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}


#nav_vertical a:hover{
color:#00CC00;
}

#nav_vertical a:hover span{
color: #00CC00 ;
}

#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}

</style>


<div id="nav_vertical">
<ul>
<li id="current"><a href="player.php" title="PLAYERS"><span>PLAYERS</span></a></li>
<li><a href="photos.php" title="PHOTOS"><span>PHOTOS</span></a></li>
<li><a href="news.php" title="NEWS"><span>NEWS</span></a></li>
</ul>
</div>


the output of this code is like this:

PLAYERS PHOTOS

NEWS


I want that like this:

PLAYERS
PHOTOS
NEWS

[Beverleyh]

Please post a link to your live page/development page so we can see the problem first-hand.

[Beverleyh]

Try taking out the float:left; values of #nav_vertical a and #nav_vertical a span ?

[kel]

Your

#nav_vertical li{
display:inline;
margin: 0 0 0 0;
padding: 0;
text-transform:uppercase;
}


Should be:


#nav_vertical li{float:left; clear:both;display:block;margin: 0;padding: 0;text-transform:uppercase;}

[rhodarose]

Thank you