horizontaal menu

Ik heb een horizontaal menu. Maar de menu items (plaatjes). Staan er niet volledig op. Hij negeert ook de width en de height. Hoe los ik dit op?

Html:

<ul>
                <li><a href="">Dashboard</a></li>
                <li><a href="">Gebruikers</a></li>
                <li><a href="">Paginas</a></li>
                <li><a href="">Settings</a></li>
</ul>

Css:

#menu ul {list-style:none;}
#menu ul li {font-family:Franklin Gothic Demi; font-size:16px; display:inline; margin-left:20px;}
#menu ul li a {background:url(images/button.png); text-decoration:none; color:#333; width:120px; height:37px;}
#menu ul li a:hover {background:url(images/buttonClicked.png); text-decoration:none; width:120px; height:37px;}

Ik wil dus dat elk blokje (

) 120px breedt zijn en 37px hoog.

display: inline-block; erbij zetten?

Bedankt het word zo:

#menu ul li {font-family:Franklin Gothic Demi; font-size:16px; display:inline-block; margin-left:20px;}
#menu ul li a {background:url(images/button.png); text-decoration:none; color:#333; display:block; width:120px; height:37px;}
#menu ul li a:hover {background:url(images/buttonClicked.png); text-decoration:none; width:120px; height:37px;}

Je moet bij die a ook display:block; zetten.