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.

[hades87]

y sit ratas de poner mas margin?

[elbecerro]

Yo haría lo siguiente.... sólo una imagen con los 2 estados (link y hover), de tal manera que la imagen que usas para link esté encima de la del hover, en el css pondrias:

#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.jpg) no-repeat 0 0;
}

#familia li a:hover {
background-image:url(../Imagenes/bot_familia_a.jpg) no-repeat 0 -22px;
}

(lo de -22px lo supongo por la altura que pones y es en negativo porque así desplaza la imagen con los dos estados 22px hacia arribas que es donde empieza la imagen en estado hover)

y quita la imagen de fondo de #familia li.

No sé si me explico :), ya me dirás