Buttons in a button bar

[mnaidis]

I have this:

<div class="buttonbar">
<ul class="buttonbar"><li><a href="#general"><span>General</span></a></li> <li><span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsphi</span></li></ul>
</div>

 

.buttonbar {
background-color: #fff;
background: -webkit-gradient(linear, left top, left 30, from(#f1f1f1), color-stop(4%, #ffffff), to(#f4f4f4));
background: -moz-linear-gradient(top, #f4f4f4, #ffffff 1px, #f4f4f4 95%);
width:400px;
height:40px;
border-radius:5px;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border:3px solid #dedede;
font-family:Tahoma;
font-weight:bold;
border:1px solid #dedede;
color:#000;
}

ul.buttonbar li {
width:80px;
border-right:1px solid #000;
background-color:#fff;
height:40px;
float:left;
line-height:40px;
color:#000;
border-radius:5px;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
}

 

And that's how it looks:

I want that the buttons will start like from the beginning of the bar, there is a gap behind the first button "General", how do I fix it?

[alvin567]

Can you try inserting the files into here?

 

http://jsfiddle.net/

 

I typically do not have this kind of issues.