Muy buenas, abro este tema para preguntar una duda que nos ha surgido al implementar un sistema de votaciones apra nuestra pagina web. El resultado final se puede observar aqui:
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:
<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;
}
Estaria muy agradecido si alguien nos pudiera comentar como fijar este bug, ya que gran parte de nuestros visitantes usan IE6
