Overflow y Explorer (II)

sisi escribió esto a las 1:26

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:

  1. 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;
  2. En segundo lugar, nos cuenta que, un truco para ocultarle cosas al Explorer es poner html>body delante 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.
  3. 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í:

Captura de pantalla con barra de scroll verticaly horizontal

Captura de pantalla con barra de scroll vertical

¿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í:

Captura de pantalla sin barra vertical de scroll.

Ya que hemos sobreescrito la propiedad overflow-y.

Para el resto de los navegadores se mantendría overflow: auto;

Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!

Artículos relacionados:

13 comentarios en “Overflow y Explorer (II)”


  1. 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).


  2. 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 … ;)


  3. Ana* dice:

    Gracias, gracias, gracias. Cuando me ponga te cuento :-)


  4. sisifodichoso dice:

    De nada … se aprende un montón así, investigando por aquí y por allá … yo me lo paso pipa :-)


  5. 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.


  6. 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:

    .entrybody{
    overflow-x:auto;
    white-space:nowrap;
    width:470px; ...} 

    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


  7. Cruzul dice:

    Algo sobre Overflow

    He mi modificado mi cdigo para mayor satisfaccin ;) , y puedo poner ejemplos claros para una mayor comprensin de lo que digo, pero no una solucin a lo planteado por Sisifodichoso :( .


  8. 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).


  9. sisifodichoso dice:

    Ante todo mil gracias Cruzul …
    No tenía ni idea de que los navegadores hacían un “resize”… ¡qué modernos! :-) 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” ;)


  10. 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).


  11. 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 ;)


  12. 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.


  13. 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 :-)