Foros del Web » Creando para Internet » CSS »

IE lo trata bien pero FF no

Estas en el tema de IE lo trata bien pero FF no en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/11/2007, 16:30
Avatar de AbdelioR  
Fecha de Ingreso: septiembre-2006
Ubicación: Tarragona
Mensajes: 926
Antigüedad: 11 años, 2 meses
Puntos: 8
Pregunta IE lo trata bien pero FF no

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:04.