In una ul vorrei impostare i li in modo che abbiano una grandezza fissa, dato che ho messo un'immagine di sfondo a ogni li.

Nel CSS ho impostato width e height, però la dimensione si adatta al testo e quindi l'immagine che ho impostato come sfondo ne risulta strozzata.

Questo è l'html

codice:
<div id="menu">
				<ul>
					[*]HOME
					[*]MENU2
					[*]MENU3
					[*]MENU4
					[*]MENU5
				[/list]
			</div>
e questo è il CSS

codice:
#menu
{
	margin-top: 1%;
	text-align: center;
}

#menu ul li
{	
	display: inline;
	width: 100px;
	height: 30px;
}

#menu ul li a
{
	background-image: url(perline.jpg);
	background-repeat: no-repeat;
}
Come mai le proprietà di larghezza e altezza non funzionano sui li?