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

Responder a