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