Fondo de una lista

[JuanKa]

Buenas tardes a todos.

Tengo un problema al momento de mostras unos datos en una lista, para tal efecto uso como fondo una imagen, siendo su hoja de estilos la siguiente :

Código HTML:

#familia{
	list-style:none;
	margin:0px 5px;
	padding:0px;
	height:30px;	
}

#familia li{
	margin:2px;
	padding:0px;
	width:170px;
	height:30px;	
	background-image:url(../Imagenes/bot_familia_a.jpg);
	background-repeat:no-repeat;
	float:right;
}

#familia li a{
	display:block;
	height:22px;		
	padding-left:25px;
	padding-top:6px;
	text-decoration:none;
	color:#006699;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	background-image:url(../Imagenes/bot_familia_a.jpg);	
}

#familia li a:hover{
	color: #666666;
	background-image:url(../Imagenes/bot_familia_b.jpg);
}

y lo que pasa que en internet explores se ve perfectamente pero en Mozila Firefox no se be bien, es decir, un elemento li "monta" al otro , estuve viendo que podria ser la altura que lo fije en pixeles, luego lo puse en porcentajes la altura y sigue haciendo lo mismo.

Como se podria realizar esto.


Gracias y Saludos a todos.