float alignment problem

floated list item doesn't horizontally line up

[tuliphead]

Hi,

I've got a maddening CSS horizontal menu + float problem.

All navigation tabs are on the left, but there needs to be a tab on the right end as well. I build this as usual with an unordered list and a float for the right-tab li id:

<div id="nav">
<ul id="tabmenu">
<li id="pls"><a href="#">right-side tab</a>
<li><a href="#">home</a></li>
<li><a href="#">schedule</a></li>
<li><a href="#">genres</a></li>
<li><a href="#">users</a></li>
<li><a href="#">about</a></li>

</ul>
</div>

#tabmenu {
margin: 0;
padding: 0 0 0 20px;
overflow: visible;
}

#tabmenu li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}

#tabmenu #pls a {
float: right;
margin-right: 10px;
padding-bottom: 0px;
}

All's well and good until I go to put borders on these. Ideally, the active tab sits on top of the content box with no bottom border, and inactive tabs, including my right-side tab, have complete borders. What happens when I put borders on these, though, is that my right-side floated tab is 1px lower than the left-side tabs, which becomes very obvious when its bottom border doesn't line up with the top of the content box below it.

#tabmenu li a {
text-decoration: none;
border: 1px solid black;
padding: 0 8px 0px 8px;
background-color: #648F7D;
color: #E6E3CF;
}

If I change overflow: to auto, the left-hand tabs lift up a few pixels off the content box below them, and their top borders become invisible. The right-side tab hovers 1px above the content box in this case also. No matter how I shift the padding or any other elements, I can't get left and right to line up.
I definitely want to keep the float instead of just putting a big left margin on the right-side tab, since when browsers shrink a float rearranges itself instead of ugly wrapping.

Why doesn't the floated list item line up with the ones on the left? How can I fix this, or where am I going wrong? It's late and I'm tired.. maybe I'm not seeing the obvious?

Thanks!

[SuzyUK]

the floated tab doesn't line up with the ones on the left as it is now a block level link (float automatically makes an element display: block; too)

the ones on the left are still inline elements and as such it's their line height which allows if the borders will show

one solution would be to float the left links too and use a line-height value to control the height of all the links ..

this then means than you will need some form of clearance to get the content to div to start in the right place, but it should be possible

#tabmenu {
margin: 0;
padding: 0 0 0 10px;
overflow: visible;
}

#tabmenu li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
line-height: 1.8; /* control top bottom padding here */
}

#tabmenu #pls a {
float: right;
margin-right: 10px;
}

#tabmenu li a {
float: left; /* add this to make the other links block elements too */
text-decoration: none;
border: 1px solid black;
padding: 0 8px;
background-color: #648F7D;
color: #E6E3CF;
margin-bottom: -1px; /* add something like this to get links to sit on top of content border */
}

#content {
border-top: 1px solid red;
width: 100%;
clear: both;
}

along with your HTML, although I added a content div with a top border after the menu for illustration

PS: sorry reply is late

Suzy