padding text and links in inline list

here's the html:

<div id="navcontainer">
<ul>

<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Brothers</a></li>
<li><a href="#">About</a></li>
<li>
<!--when on a page, the page's button is not a link
<a href="#">Home</a>
-->
Home</li>

</ul>
</div>


here's the css

#navcontainer ul
{
position:absolute;
TOP:170px;
margin: 0;
padding: 0;
list-style-type: none;
color: #036;
background-color: #036;
width: 100%;
}

#navcontainer ul li
{
font:normal 15px arial,sans serif;
color:#FFFFFF;
text-decoration:none;
display: inline;
float: right;
color: #fff;
background-color: #369;
border: 1px solid #000;
}

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
border: 1px solid #000;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}


the problem is, when i make the "home" item just text, i lose the padding around the text... i tried putting the padding command in the #navcontainer ul li entry, but it made all my entries, including links, have extra padding of the wrong color for links

help?

also, the borders on the left and right side of the list do not double, like the inner ones do... i.e. the list you get now is

|item||item||item||item|

i want...

||item||item||item||item||

anyone know how to do these things? i'm new and totally lost.

That's tricky. I'm assuming you've meant to have the padding of the floated links expand past the absolutely positioned ul, giving it that "big-button" look? I like it.

Unfortunately, I don't see a way out of this one for you, maybe someone else will... the thing is the usual way to fix your problem would be to give the li the padding, and declare a width, then assign "display: block" to the links and give those the same width and height as the list items. So the links would expand to the edges of their container, the list item.

The thing is, though, once those links are block rather than inline elements, the ul will expand to accommodate them, losing the cool button effect. I'd just leave the button as a link, personally, or position the links over a separate bg or block level element that give the same stripe effect.

I'd like to see it work, though; hopefully someone else can give this a shot...