IE lo trata bien pero FF no

[AbdelioR]

Bueno, estoy montando un sistema de votacion de estrellas y parece ser que firefox no trata bien el css pero IE si.

Los estilos son estos:

Código HTML:

.star-rating{
		list-style:none;
		margin-left:5px!important;
		padding:0px;
		width: 125px;
		height: 25px;
		position: relative;
		background: url(images/estrellas/alt_star.gif) top left repeat-x;		
}
	.star-rating li{
		padding:0px;
		margin:0px;
		/*\*/
		float: left;
		/* */
	}
	.star-rating li a{
		display:block;
		width:25px;
		height: 25px;
		text-decoration: none;
		text-indent: -9000px;
		z-index: 20;
		position: absolute;
		padding: 0px;
	}
	.star-rating li a:hover{
		background: url(images/estrellas/alt_star.gif) left bottom;
		z-index: 2;
		left: 0px;
	}
	.star-rating a.one-star{
		left: 0px;
	}
	.star-rating a.one-star:hover{
		width:25px;
	}
	.star-rating a.two-stars{
		left:25px;
	}
	.star-rating a.two-stars:hover{
		width: 50px;
	}
	.star-rating a.three-stars{
		left: 50px;
	}
	.star-rating a.three-stars:hover{
		width: 75px;
	}
	.star-rating a.four-stars{
		left: 75px;
	}	
	.star-rating a.four-stars:hover{
		width: 100px;
	}
	.star-rating a.five-stars{
		left: 100px;
	}
	.star-rating a.five-stars:hover{
		width: 125px;
	}
	.star-rating li.current-rating{
		background: url(images/estrellas/alt_star.gif) left center;
		position: absolute;
		height: 25px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
	}

Tengo una lista con las estrellas montada asi:

Código HTML:

<ul class='star-rating'>
<li class='current-rating' id='current-rating' style='width: <? $ratingpx = $rating * 25; echo $ratingpx;?>px'><!-- Currently <? echo $rating ?>/5 Stars.--></li>
<li><a href="javascript:rateImg(1,'<? echo $imgId ?>')" title='1 star out of 5' class='one-star'>1</a></li>
<li><a href="javascript:rateImg(2,'<? echo $imgId ?>')" title='2 stars out of 5' class='two-stars'>2</a></li>
<li><a href="javascript:rateImg(3,'<? echo $imgId ?>')" title='3 stars out of 5' class='three-stars'>3</a></li>
<li><a href="javascript:rateImg(4,'<? echo $imgId ?>')" title='4 stars out of 5' class='four-stars'>4</a></li>
<li><a href="javascript:rateImg(5,'<? echo $imgId ?>')" title='5 stars out of 5' class='five-stars'>5</a></li>
</ul> 

El problema es que en FF no superpone las imagenes sinó que las monta una debajo de la otra y no se superponen como deberia ser.

¿Alguien ve donde puede estar el error?

Muchas gracias