[Ovillo] Problema con css valoracion por estrellas en IE6

[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

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

[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] Editores para Mac

[jose vicente ribera pellicer]

Yo uso Textmate para programar en RoR, es simplemente fantastico.
___
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] jQuery

[jose vicente ribera pellicer]

Thanks!!

El 23 de abril de 2009 13:03, Jorge Gónzalez - yparamuestaunboton.com <
del...@gmail.com> escribió:

> Mi aporte: http://www.learningjquery.com/ un sitio de tips, técnicas,
> tutoriales de jquery que me gusta
>
> Jorge González Sánchez | http://yparamuestraunboton.com
>
> El 23 de abril de 2009 2:25, Javier Guerrero 
> escribió:
>
> > Hermoso aporte, Julián.
> >
> > Un sitio similar al que recomiedas es este:
> >
> > http://usejquery.com/
> >
> >
> > Saludos
> > ___
> > 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
>
___
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] jQuery

[jose vicente ribera pellicer]

Por cierto...alguna recomendacion parecida para prototype (es la que
usamos)??
___
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] jQuery

[jose vicente ribera pellicer]

Eniendo que jQuery le de unas cuantas vueltas al Prototype, pero ya que no
tenemso mas remedio que usar Prototype si alguien conoce alguna page similar
para esta libreria le estaremos agradecidos ;)

Saludos
___
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

[Ovillo] Problema anchura div

[jose vicente ribera pellicer]

Muy buenas...tengo un problema de anchuras nunca mejor dicho. Os explico

Se trata de la maquetacion de un foro
















<%# AQUÍ SE VE EL MENSAJE
ORIGINAL %>

<%= link_to(respuesta.contador,
respuesta.contenido_link) %>



<%= render :partial => "respuestas/texto_y_enlaces", :locals =>
{ :respuesta => respuesta } %>














La estructura funciona perfectamente, salvo que cuando se le mete una URL
larga destroza la maquetacion en el IE6. En los demas navegadores no pasa
nada pero en IE6 "arrastra" la pantalla hasta el final de la URL.
Habia penado usar la propiedad max-width, pero IE6 no incluye esta
propiedad. Tampoco puedo usar esto que he visto por google, ya que no
convence en el trabajo. Buscan algo mas generico.

#contenedor {
  max-width: 1200px;
  width: expression(document.body.clientWidth > 1201? "1200px": "auto");
}


Alguien puede tirarme un cable?no se como meterle mano al ausnto sin
usar max-width ni el ejemplo anterior de Javascript :(
___
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 anchura div

[jose vicente ribera pellicer]

Decir solamente que el codigo que puse anteriormente se corresponde con un
partial, seria como el respuestas/show que se ve abajo (he omitido el codigo
que no era necesario) pero las propiedades de la tabla contenedora estan
intactas.


<% for respuesta in @respuestas -%>
  <%= render :partial => 'respuestas/show', :locals => {
:respuesta => respuesta } %>

% end %>
___
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 anchura div

[jose vicente ribera pellicer]

Gracias!!!...lo mirare enseguida, me urgia mucho!!

El 19 de mayo de 2009 11:33, Maikel Naigt  escribió:

> Hola Jose.
>
> Si no te importa que el texto del enlace desaparezca cuando sea
> demasiado largo, deberás aplicar la propiedad 'overflow: hidden' en su
> contenedor padre. Si deseas que el contenedor muestre una barra de
> desplazamiento, entonces tendría que ser 'overflow: auto' o 'overflow:
> scroll'
> Si lo que deseas es que el texto del enlace se divida podrás usar el
> atributo PROPIETARIO de IE 'word-wrap' así:
> 
>
> Te aconsejo la lectura del artículo publicado en
> www.positioniseverything.net titulado 'Internet Explorer 6 and the
> Expanding Box Problem' [1]
>
> [1] http://www.positioniseverything.net/explorer/expandingboxbug.html
>
> Un saludo,
> David
>
>
>
> 2009/5/18 jose vicente ribera pellicer 
> >
> > Muy buenas...tengo un problema de anchuras nunca mejor dicho. Os explico
> >
> > Se trata de la maquetacion de un foro
> >
> > 
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> ><%# AQUÍ SE VE EL MENSAJE
> > ORIGINAL %>
> >
> ><%= link_to(respuesta.contador,
> > respuesta.contenido_link) %>
> >
> >
> > > style="margin-left:38px; max-width:630px;">
> ><%= render :partial => "respuestas/texto_y_enlaces", :locals
> =>
> > { :respuesta => respuesta } %>
> >
> >
> > 
> >
> > 
> >
> >
> >
> >
> >
> >
> > 
> >
> >
> > La estructura funciona perfectamente, salvo que cuando se le mete una URL
> > larga destroza la maquetacion en el IE6. En los demas navegadores no pasa
> > nada pero en IE6 "arrastra" la pantalla hasta el final de la URL.
> > Habia penado usar la propiedad max-width, pero IE6 no incluye esta
> > propiedad. Tampoco puedo usar esto que he visto por google, ya que no
> > convence en el trabajo. Buscan algo mas generico.
> >
> > #contenedor {
> >  max-width: 1200px;
> >  width: expression(document.body.clientWidth > 1201? "1200px": "auto");
> > }
> >
> >
> > Alguien puede tirarme un cable?no se como meterle mano al ausnto sin
> > usar max-width ni el ejemplo anterior de Javascript :(
> > ___
> > 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
>
___
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

[Ovillo] Problema con word-wrap en IE6

[jose vicente ribera pellicer]

Hola, hace unos meses nos dimos cuenta que la maquetación de nuestra pagina
web se veia seriamente dañada cuando en el foro un usuario decidia insertar
una url muy larga. Postee el tema y encontramos uan solucion muy interesante
utilizando word-wrap.

Os comento la solucion:

En la vista:

 
<%= mostrar(respuesta.texto_completo) %>
 

y en el CSS que tenemos para el texto de la respuesta tenemos :

msgforo .p {
overflow: hidden;
word-wrap: break-word;
}

Hasta aqui todo a funcionado perfectamente, sinembargo un usuario nos posteo
un problema bastante curiosos en IE6 para algunas resoluciones de pantalla
cuando se corta la ultima palabra de una linea se vuelve a repetir en la
siguiente.
Os pondre un ejemplo para que se vea mas claro. Si el texto del mensaje es:

  Uy Uy Uy no digas eso no sea que alguna vez llores

Deberia leerse para una resolucion de pantalla:
---
Uy Uy Uy no digas eso no sea que alguna
vez llores
---

Se lee
---
Uy Uy Uy no digas eso no sea que alguna
alguna vez llores
---


Es un tema bastante curioso, lo hemos mirado con otros navegadores y solo
falla en el explorer. Estamos pensando en quitar esta propiedad y solucionar
el problema de las urls largas de alguna otra forma. Animo a la gente que
utilice estas dos propiedades a hacer pruebas con el IE6 no sea que tambien
les este pasando lo mismo. Y por supuesto si  alguien tiene alguna idea sera
todo un placer escucharle.

Un saludo
___
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 word-wrap en IE6

[jose vicente ribera pellicer]

Ante todo gracias por las respuestas!!



>
> ¿Puede ser esto:
> http://www.positioniseverything.net/explorer/dup-characters.html
> ?
> ___
>

Creo que son cosas distintas



Si no encontramos nada por CSS supongo que terminaremos tirando de
expresiones regulares o de funciones de servidor...

Recuerdo que para algún proyecto hice una función de servidor que me
rompiera la url cada x caracteres. No es una solución limpia pero es
efectiva.

Lo malo es que de funciones de servidor no vamos muy sobrados...será
cuestion de ponerse.

Salu2 y gracias por la ayuda!!
___
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 word-wrap en IE6

[jose vicente ribera pellicer]

>
>
>
> Lo que yo haría sería usar word-wrap: break-word; excepto para ie6
> (mediante
> algún hack de ie6 o mediante comentarios condicionales) y buscar alguna
> solución por javascript para ie6.
>
>

El  word-wrap: break-word junto con el overflow hidden lo pusimos
expresamente para IE6 ya que en los demas no teniamos este problemade
todas formas mirare lo que comentas del javascript.
Si alguien tiene alguna sugerencia de como hacerlo soy todo oidos.

Saludos
___
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