Hola, José Vicente.
El problema se debe a un conocido bug de Internet Explorer que ha hecho
desesperar a más de uno. Tiene que ver con el orden de apilamiento mediante
la propiedad z-index. IE sólo lo aplica correctamente cuando los elementos
comparten el mismo ancestro inmediato que está posicionado.
En tu caso, disminuyes el z-index de los a:hover con z-index:2. Ésto debería
situarlo por debajo de los enlaces anteriores ya que tienen z-index:20. El
problema está en la declaración position:absolute que has puesto en los li
que engloban a los enlaces. Esto hace que se genere un nuevo contexto de
apilamiento en cada opción del menú y que, por lo tanto, IE no compare entre
sí los z-index de los diferentes enlaces.
Una solución muy sencilla:
*Elimina la declaración position:absolute en la regla .star-rating li { }
*
De esta forma IE tomará como contexto de apilamiento la lista *
ul.star-rating* (que es común a todos los enlaces) y no cada elemento de
lista.
Saludos.
El 8 de abril de 2009 17:13, jose vicente ribera pellicer
joseran...@gmail.com escribió:
Hola, hemos realizado un sistema de valoracion de videos mediante
estrellas,
tal y como youtube y muchas otras webs implementan.
El resultado se puede observar en:
http://mimandote.com/videos/679-largo-viaje-humo-por-tus-pulmones
http://localhost:3000/videos/679-largo-viaje-humo-por-tus-pulmones
La cuestion es que el sistema de votaciones funciona perfectamente con
firefox y con safari, pero con explorer 6 y 7 tiene un fallo que
deseamos subsanar (en el 8 si funciona). Cuando pasamos por encima de
los remolinos cambian de color, pero al retroceder no pasan de color mas
oscuro a clarito (digamos que no desselecciona), no sabemos por que
puede ser (maldito explorer). Si a alguien se le ocurre alguna idea le
estaria muy agradecido.
Cuando el cursor pasa por encima de unno de los remolinos se realia una
llamada por AJAX:
ul class='star-rating'
.
.
.
%= link_to_remote( , :url = votar_video_ajax_path(video.id, i),
:method = :post, :html = { :class = star#{i}, :name = #{i} stars
out of 5 }) %
.
.
.
ul/
Este es el css que usamos:
.video-y-control {
margin-bottom:30px;
}
.bloque-video {
float:left;
}
.titulo-video-sin-imag, .titulo-video-sin-imag a {
color:#F92F1E;
}
.titulo-video-sin-imag {
font-size:16px;
padding-bottom:6px;
}
.opciones-video{
padding:30px 0 0 320px;
}
.opciones-video-show{
padding:30px 0 0 510px;
}
/* ESTILOS PARA LAS ESTRELLAS DE LOS VIDEOS */
.star-rating{
float:left;
list-style:none;
margin: 0;
padding:0;
width: 150px;
height: 30px;
position: relative;
background: url(/images/star_rating.gif) top left repeat-x; /*Aqui esta
toda la barra*/
}
.star-rating li {
padding:0;
margin:0;
float: left;
position: absolute;
height: 30px;
}
.star-rating li a {
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover {
background: url(/images/star_rating.gif) left bottom;
z-index: 2;
left: 0px;
border:none;
}
.star-rating a.one-star, a.star1{
left: 0px;
}
.star-rating a.one-star:hover, a.star1:hover, .voto1 {
width:30px;
}
.star-rating a.two-stars, a.star2{
left:30px;
}
.star-rating a.two-stars:hover, a.star2:hover, .voto2 {
width: 60px;
}
.star-rating a.three-stars,a.star3{
left: 60px;
}
.star-rating a.three-stars:hover, a.star3:hover, .voto3 {
width: 90px;
}
.star-rating a.four-stars, a.star4{
left: 90px;
}
.star-rating a.four-stars:hover, a.star4:hover, .voto4 {
width: 120px;
}
.star-rating a.five-stars, a.star5{
left: 120px;
}
.star-rating a.five-stars:hover, a.star5:hover, .voto5 {
width: 150px;
}
.star-rating li.current-rating{
background: url(/images/star_rating.gif) left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
.votos_rating {
margin: 0;
padding:0;
width: 150px;
height: 30px;
background: url(/images/star_rating.gif) top left repeat-x; /*Aqui
esta toda la barra*/
z-index: 3;
}
.voto1, .voto2, .voto3, .voto4, .voto5 {
background: url(/images/star_rating.gif) left bottom;
z-index: 2;
height: 30px;
left: 0px;
}
.info_rating {
/*float:left;*/
padding-top:11px;
margin-left:325px;
color:#C334BE;
font-size:16px;
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
