15Jun06
Overflow y Explorer (II)
Retomando la pequeña “investigación” acerca del comportamiento peculiar de IE con la barra lateral de este blog, que inicié ayer mismo,
http://sisifodichoso.org/2006/06/13/el-iexplorer-desplaza-la-barra-lateral-una-primera-solucion/.
He encontrado este artÃculo sobre el tema. Es corto pero tiene mucha, mucha miga. En pocas lÃneas da las claves que necesitamos para dar la forma definitiva a la propiedad overflow en nuestras páginas web y evitar asà ese efecto tan molesto de enviar todo el contenido lateral al infierno…
http://sebastienlorion.blogspot.com/2005/08/fun-with-css-overflow-and-ie.html
Allá vamos:
- En primer lugar, aprendo que para que el Explorer no muestre esa espantosa barra vertical, no hay que hacer scroll en todas las direcciones, sino sólo en horizontal. Por eso, para el Explorer, vamos a poner:
overflow-x: auto; - En segundo lugar, nos cuenta que, un truco para ocultarle cosas al Explorer es poner
html>bodydelante de la etiqueta que no queremos que “renderice” IE. Eso ya lo habÃa visto en otras css pero no tenÃa ni idea de para qué servÃa. - Algo que está implÃcito en lo que nos cuenta Sébastien y que yo estaba intuyendo: el IE necesita de unas medidas dadas para poder hacer scroll. No asà el Firefox.
Teniendo todo esto en cuenta, he copiado literalmente la solución de Sébastien (He hecho modificaciones de esta idea. Ver las actualizaciones más abajo en este artÃculo)
pre {
overflow-x: auto;
white-space: nowrap;
width: 470px;
padding-bottom:15px;
}
html>body pre {
overflow: auto;
}
Sólo he modificado el width, que en mi caso es algo más grande y le he añadido un padding por debajo; si no lo hacÃa, el texto del enlace quedaba completamente oculto por la barra del scroll (en el Explorer, se entiende).
Como se ve, la etiqueta pre para Firefox es mucho más sencilla … me he parado al escribir esto ¿Y si se la quito y si dejo para los dos navegadores las opciones que tengo para el Explorer?
Lo hago …
…
…
…
y no pasa nada, salvo que el padding en Firefox es más acusado y se ve un poco feo … asà que se lo vuelvo a poner…
Ahora, cada vez que incluyo un elemento que pienso se va a pasar de tamaño, no tengo más que envolverlo en la etiqueta pre y asunto resuelto… el primer enlace de este artÃculo es ya un ejemplo y también he retocado el artÃculo anterior.
Acerca de white-space: nowrap;, no tengo nada más que añadir a lo que nos cuenta Sébastien.
Actualización (17-06-2006):
Una solución más apropiada se puede encontrar en http://www.xenealoxia.org/cruzul/index.php?2006/06/17/70-algo-sobre-overflow.
Aquà se explica una utilización de la etiqueta pre más apropiaday un uso más correcto de la propiedad overflow .
Las modificaciones en mi css son las siguientes:
pre {
overflow-x:auto;
white-space:nowrap;
width:470px;
padding-bottom: 15px;
}
html>body pre {
overflow:auto;
}
.entrybody p, .commentbody p{
font-size: 13px;
margin-top:0px;
margin-left: 0px;
padding-left:0px;
overflow-x:auto;
width:470px;
}
Actualización (24-06-2006)
Asà queda, de momento, mi hoja de estilo para IExplorer:
pre {
overflow-x:auto;
overflow-y:visible;
/*white-space:nowrap;*/
width:100%;
padding-bottom: 15px;
}
.entrybody p{
overflow-x:auto;
overflow-y:visible;
width:440px;
}
.commentbody p{
overflow-x:auto;
overflow-y:visible;
padding-bottom: 15px;
width:440px;
}
#sidebar {
margin-left:500px;
}
#wp-calendar {
padding-left:30px;
}
code{
width:95%;
}
blockquote{
padding:0px;
width:95%;
}
La idea es la siguiente: Firefox sólo carga la hoja de estilos general, mientras que IExplorer carga la hoja de estilos general y después la suya: la que véis arriba. En ésta, sólo se sobrescriben aquellas declaraciones que queremos cambiar, el resto quedarÃa igual para ambos navegadores.
Analicemos con detallle una de las etiquetas: pre, por ejemplo.
Como se ve, tengo que declarar explÃcitamente el comportamiento tanto en el eje x como en el eje y. Esto es asÃ, porque en la hoja de estilo general, la declaración es:
pre {
overflow:auto;
width:100%;
}
Si sólo cambiara en IExplorer el comportamiento para el eje x, obtendrÃa un overflow-y: auto; para el eje y, y tendrÃamos una fea barra vertical de scroll. Esto lo corregimos quitando el scroll para el eje y con overflow-y: visible;.
overflow: auto; (general)
+
overflow-x: auto; (IE)
=
overflow: auto; (para ambos = barra vertical en Explorer)
En explorer se verÃa algo asÃ:
¿Véis que la barra vertical aparece aunque no es necesaria?
Lo que haremos será permitir que el overflow se vea sin poner una barra de scroll:
overflow: auto; (general)
+
overflow-x: auto; (IE)
+
overflow-y: visible;(IE)
=
overflow-x: auto;(IE)
O sea que en IE se verÃa algo asÃ:
Ya que hemos sobreescrito la propiedad overflow-y.
Para el resto de los navegadores se mantendrÃa overflow: auto;
ArtÃculos relacionados:
Archivado en: 
Cruzul dice:
Vaya por delante que no estoy seguro de seguirte o de si vemos lo mismo, quiero asegurar lo segundo.
Estos dos enlaces de tu post yo los veo asÃ:
- el primero de sisifo lo tienes con etiqueta “pre” y tiene barra horizontal en Firefox e IE.
- El de Sebastien está dentro de un párrafo, y se ve en una lÃnea en el Firefox, y en dos lÃneas en el IE. (sin barra claro).
sisifodichoso dice:
SÃ, asà es ahora. Esa barra pequeña que hay debajo del primer enlace es lo que yo llamo “cajitas pequeñas” … o sea un scroll por cada elemento que se pase y no un scroll grande para todo el maincontent que se veÃa antes con el explorer. Ahora, al quitar el overflow del explorer, y hacerlo con etiquetas pre tenemos el mismo efecto de barrita horizontal en los dos navegadores. Antes no era asÃ. Al poner overflow: auto; en maincontent, salÃa en explorer, dos barras grandes, horizontal y vertical, que rodeaban todo el artÃculo y no sólo el elemento “grande”.
Para mÃ, ésta es una buena solución, aunque lo mejor sea siempre poner las cosas más pequeñas …
Ana* dice:
Gracias, gracias, gracias. Cuando me ponga te cuento
sisifodichoso dice:
De nada … se aprende un montón asÃ, investigando por aquà y por allá … yo me lo paso pipa
Cruzul dice:
No, no se trata de eso para nada. Yo reduzco el tamaño por una cuestión de gusto personal, no me gusta que aparezcan las barras dentro de la página. Que mi gusto no resuelve tu problema técnico también me es evidente. Tampoco estaba sintiendo muy claro si hablábamos de lo mismo..
Pero no me convence utilizar la etiqueta “pre” para estilo sin dárselo, como una clase (creo que lo digo bien).
Sebastien ha definido su etiqueta “pre” para que el texto preformateado no se le vaya de madre en los navegadores (o eso entiendo yo) pero no para dar estilo a la página, para eso tenemos las “div” y “span”. FÃjate que por defecto al no estar definido los navegadores ponen esos enlaces en fuente monoespacio: el estándar.
No me atrevo a hablar más, porque no entiendo porque una solución similar no funciona en el “entrybody” (¡qué pesado con el entrybody!) para todo el texto, ya que deberÃa ser lo mismo, y lo propio (aprovecho
) , y la etiqueta “pre” tendrÃa sólo su uso más especÃfico de necesitarlo.
Explorando, como siempre, necesito probar estas cuestiones.
sisifodichoso dice:
SÃ, tienes razon con lo de la etiqueta pre aunque no sé cuales eran las intenciones de Sébastien. Al quitar las etiquetas pre que rodeaban a los enlaces y a la imagen y poner la propiedad overflow en entrybody dándole un width para que funcione en explorer:
Si hago esto … todo el contenido se expande hasta alcanzar el tamaño del enlace y no se puede ver entero sin usar la barra horizontal de scroll que queda debajo de los comentarios: muy lejos y muy incómoda para mi gusto …
Lo que hecho ahora es crear una clase .overflow de forma idéntica a como definà le etiqueta pre. Ahora esto funciona en explorer porque le doy un valor a width.
Envuelvo con ella los elementos “molestos” y obtenemos esto que véis … lo mismo que con pre pero con tipos de letra normales y dejando a pre para su cometido de texto preformateado… (del cual no me vendrÃa mal un ejemplo)
Ahora, una última prueba con la que he flipado.
Cojo la imagen del amigo gato, del post anterior, y en vez de envolverla con el div le doy a la imagen la clase overflow … dentro de la etiqueta img …
Resulta que tanto explorer como firefox me reconvierten el tamaño de la imagen: en vez de 650 px de ancho le dan 650px sin alterar larelación de aspecto ni cortar ni nada … simplemente la hacen más pequeña o al menos eso es lo que veo yo desde aquà … uhmmmmm
Cruzul dice:
Algo sobre Overflow
He mi modificado mi código para mayor satisfacción
, y puedo poner ejemplos claros para una mayor comprensión de lo que digo, pero no una solución a lo planteado por Sisifodichoso 
.
Cruzul dice:
Sobre la imagen de 650px.
Al asignarle la clase, le estás asignando un width de 470px, y eso es lo que manda. El “resize” es el comportamiento habitual de los navegadores (los viejos también).
sisifodichoso dice:
Ante todo mil gracias Cruzul …
lo hacen porque lo tengo con el valor “auto” ¿no? y cada navegador hace lo que cree conveniente… del resto me paso a comentarte en tu blog para dejar claras algunas cosillas y “proceder en consecuencia” 
No tenÃa ni idea de que los navegadores hacÃan un “resize”… ¡qué modernos!
Cruzul dice:
Lo del “resize” es por utilizar un término familiar. Pero mi idea de siempre (asà sin más comprobaciones) es que lo que manda es el “width” y el “heigth”, o uno de ellos sólo, y el navegador (sÃ, asà de abstracto) presenta la imagen al tamaño elegido.
Ya en la prehistórica web 1.0 (mazo irónico, que dirÃan las nuevas generaciones), muchos webmasters genealógicos (what?) utilizaban para su diseño web imágenes grandecitas, y con las medidas apropiadas las encajaban en el lugar correspondiente según necesidad: aquà pequeña, medidas chiquitajas, alli grande medidas mayores. El resultado no era muy bueno pero evitaba currar las imágenes
(y no estoy hablando de mÃ, de verdad).
sisifodichoso dice:
Esto es un aviso de actualización de este artÃculo con fecha del 24-06-2006.
En Cruzul podéis ver otra opción a la que yo he adoptado … ya que hemos actualizado casi a la vez
Daro dice:
Vaya con el IE este…
¿Hay alguna página con el ejemplo funcionando en IE?
SerÃa más fácil ver el código para nosotros los neófitos.
Gracias.
sisifodichoso dice:
Hola Daro
No entiendo muy bien lo que dices.
Mi CSS para explorer es la que tienes donde dice “actualización 24-06-2006″
Mi CSS general, si sólo usas Explorer, la puedes ver validandola.
Es decir, yendo a http://jigsaw.w3.org/css-validator/ pones la dirección de este blog http://sisifodichoso.org y debajo del resultado te da una copia de mi CSS.
Ahora, si lo que quieres es ver como irÃan quedando las cosas según como tengas el overflow-x o el overflow-y, he puesto unas capturas de pantalla junto con el código que espero sean de utilidad.
Gracias por tu comentario y un saludo