[Ovillo] Problema con word-wrap en IE6
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:
div class=msgforo
%= mostrar(respuesta.texto_completo) %
/div
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
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
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
Re: [Ovillo] Problema anchura div
Gracias!!!...lo mirare enseguida, me urgia mucho!!
El 19 de mayo de 2009 11:33, Maikel Naigt jube...@gmail.com 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í:
!--[if IE]
style type=text/css
body {word-wrap: break-word;}
/style
![endif]--
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 joseran...@gmail.com
Muy buenas...tengo un problema de anchuras nunca mejor dicho. Os explico
Se trata de la maquetacion de un foro
tr class=bordesrojos padtop id=%= respuesta.id %
!-- Avatar --
td class=escrito_por width=50
/td
!-- Usuario y fecha --
td class=escrito_por width=130 style=padding:10px 10px 10px 0
/td
!-- Numeración de comentarios --
td
div id=original_%= respuesta.id %%# AQUÍ SE VE EL MENSAJE
ORIGINAL %/div
div class=num_comentario%= link_to(respuesta.contador,
respuesta.contenido_link) %/div
!-- Texto --
div id=texto_respuesta_%= respuesta.id %
style=margin-left:38px; max-width:630px;
%= render :partial = respuestas/texto_y_enlaces, :locals
=
{ :respuesta = respuesta } %
/div
/td
/tr
tr style=height:1px; padding:0px;
td colspan=4
div id=reply_to_%= respuesta.id %
/div
/td
/tr
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 anchura div
Muy buenas...tengo un problema de anchuras nunca mejor dicho. Os explico
Se trata de la maquetacion de un foro
tr class=bordesrojos padtop id=%= respuesta.id %
!-- Avatar --
td class=escrito_por width=50
/td
!-- Usuario y fecha --
td class=escrito_por width=130 style=padding:10px 10px 10px 0
/td
!-- Numeración de comentarios --
td
div id=original_%= respuesta.id %%# AQUÍ SE VE EL MENSAJE
ORIGINAL %/div
div class=num_comentario%= link_to(respuesta.contador,
respuesta.contenido_link) %/div
!-- Texto --
div id=texto_respuesta_%= respuesta.id %
style=margin-left:38px; max-width:630px;
%= render :partial = respuestas/texto_y_enlaces, :locals =
{ :respuesta = respuesta } %
/div
/td
/tr
tr style=height:1px; padding:0px;
td colspan=4
div id=reply_to_%= respuesta.id %
/div
/td
/tr
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
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.
table class=tabla2 width=100% summary=respuestas
% 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] jQuery
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 demix...@gmail.com 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
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
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
Re: [Ovillo] Editores para Mac
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] Problema con css valoracion por estrellas en IE6
El 10/04/09, Daniel Navarro webpe...@gmail.com 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 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.
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
[Ovillo] Problema con css valoracion por estrellas en IE6
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
