Re: [Ovillo] Problema con css valoracion por estrellas en IE6

2009-04-14 Por tema jose vicente ribera pellicer 
El 10/04/09, Daniel Navarro  escribió:
> 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 
> 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.
>


Muchisimas gracias, termino de probarlo y funciona a la perfeccion. Me
estaba dando muchos problemas de cabeza y ya no sabia por donde tirar.

Thanks!!
___
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

Re: [Ovillo] Problema con css valoracion por estrellas en IE6

2009-04-09 Por tema Daniel Navarro 
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 
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
> 
>
> 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:
> 
> .
> .
> .
>  <%= link_to_remote( " ", :url => votar_video_ajax_path(video.id, i),
> :method => :post, :html => { :class => "star#{i}", :name => "#{i} stars
> out of 5" }) %>
>
> .
> .
> .
> 
> 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 dire

[Ovillo] Problema con css valoracion por estrellas en IE6

2009-04-08 Por tema jose vicente ribera pellicer 
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


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:

.
.
.
  <%= link_to_remote( " ", :url => votar_video_ajax_path(video.id, i),
:method => :post, :html => { :class => "star#{i}", :name => "#{i} stars
out of 5" }) %>

.
.
.

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