[CSS] MouseOver Button Problem

[kaSio]

Habs nochmal probiert, jetzt sieht es so aus:

Wie bekomm ich das jetzt hin das alles zentriert ist und nicht so eine große spalte zwischen Header und Button ist?

Wie kann ich die Schrift vertikal zentrieren, dass sie in der mitte der Buttons sind.

<style type="text/css">  
<!--  
 #nav ul li  
{  
margin: 0;  
padding: 0;  
list-style-type: none;  
text-align: center;  
}  
  
#nav ul li { float: left;  
   height: 28px;  
   width: 106px; }  
  
#nav ul li a  
{  
float: left;  
   height: 28px;  
   width: 106px;  
text-decoration: none;  
font-size: 10px;  
font-family: verdana, sans-serif;  
margin: 0;  
padding: 0;  
color: #5A5B5D;  
background-color: #F0F0F0;  
}  
  
#nav ul li a:hover  
{  
color: #04AFAF;  
background-color: #FFFFFF;  
}  
-->  
</style>