I have this:
<div class="buttonbar">
<ul class="buttonbar"><li><a href="#general"><span>General</span></a></li> <li><span>       hi</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?