Hi again. I'm trying to produce a menu bar using inline html lists (ul, li tags) as detailed here on Sitepoint:

http://www.sitepoint.com/article/navigation-using-css/2

I've got the following css:

#menu
{
margin:2% 0% 2% 2%;
width:63%;
float:left;
clear:none;
height:80px;

}

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;

}

#menu li
{
padding-top:1.2em;
text-align:center;
list-style-type:none;
background:url(images/pawb.jpg) left no-repeat;
width:101px;
height:31px;
border:1px solid black;
display:inline;
}

Here's my html for this:

<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Links</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>

What happens is that without the display:inline the buttons are sized right and look ok but are obviously on separate lines. If I add display:inline then all the button sizes go wrong and I end up with buttons that are only as big as the text that is in them, even though I've specified the widths.

Basically I need to know why my button sizes don't work. I've attached the image if anyone wants to have a go.