El IE desplaza la barra lateral: una primera solución

sisi escribió esto a las 21:03

Bueno, el problema es el siguiente: cada vez que pongo en un artículo una imagen o un enlace demasiado grande, el IE envía mi sidebar a las antípodas, ya que supone que no tiene sitio.
El comportamiento de Firefox es distinto y el efecto es como de una transparencia de unas capas sobre otras…
Bien, el “truco” es utilizar la propiedad overflow en nuestra hoja de estilos.
Poniendo overflow: auto; en los párrafos del contenido principal, conseguimos que, cada vez que excedamos su tamaño, la barra lateral no se vaya hacia abajo sino que aparezca unas barras de scroll que nos permiten ver el contenido del artículo entero dentro de los márgenes.
Puesto que este blog tiene un esquema más o menos así:
<div id= "outerwrap">
    <div id= "maincontent">
        <div class="entry">
             <div class="entrybody"></div></div></div></div>

Lo que he hecho, para que funcione tanto en Firefox como en IE, es
#maincontent {
float:left;
width:470px;
background: #fff;
padding-left: 30px;
margin: 0;
overflow: auto;
}

En realidad esto me resulta útil sólo para los enlaces porque hace días que me di cuenta de que debo utilizar imágenes más pequeñas para conseguir una mayor rapidez de carga.
Ahora bien, no me gusta que el scroll afecte a todo el contenido del artículo. Me gustaría que, si hubiese un enlace o un elemento un poco grande, la cajita de scroll rodeara sólo ese elemento. Esto lo he conseguido rodeando, además, cada elemento, con una etiqueta div de la siguiente forma:
<div style="overflow: auto;">lo que sea: enlace, imagen ...</div>

Pero todavía quedan muchas zonas oscuras:

  • Esto último no funciona en Explorer en el que sólo funciona el overflow en el maincontent. Si quito el overflow del maincontent entonces no funciona nada en Explorer (adios sidebar, adios) y si lo dejo, tengo dos “scroll bar” en Firefox. De momento he adoptado esta última solución.
  • Otra idea es definir una clase en la CSS. La propiedad overflow sólo se aplica en elementos de bloque. Eso quiere decir que, si definimos una clase con esta popiedad, ésta debe contener también definiciones explícitas para el background, weight y height. Yo, de momento no he conseguido que me funcione “bien”, o sea “igual” en los dos navegadores así que sigo con la primera opción: tengo “cajitas” en Firefox y un scroll grande en el Explorer.

Sigo, por tanto, investigando.Toda sugerencia será bienvenida … :-)

Actualización (15-06-2006) :
En este artículo se dan más claves sobre el asunto:
http://sisifodichoso.org/2006/06/15/overflow-y-explorer-ii/

Un ejemplo de enlace largo, largo :

Un ejemplo de imagen grande, grande:
Actualización (15-06-2006): La imagen tiene 650px de ancho. Ahora, tanto Firefox como Explorer reconvierten su tamaño a 470px de ancho. La explicación de este comportamiento está en los comentarios del artículo siguiente:
http://sisifodichoso.org/2006/06/15/overflow-y-explorer-ii/

Un gato bebe en una fuente del jardín botánico

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:

5 comentarios en “El IE desplaza la barra lateral: una primera solución”


  1. Cruzul dice:

    Hola Sisifo:
    Aunque ya es tarde (espesura cerebral), he chequeado mi hoja de estilo, y para aquí ser similar el overflow debiera estar en tu div “entrybody” que es donde realmente puede suceder.

    Yo lo tengo así, pero como no me gusta que aparezcan las barras y mi “post-content” (tu “entrybody”) tiene un width de 480px, suelo publicar las imágenes tope 420px, ahora no recuerdo bien porqué llegué a este número, y los enlaces siempre (o casi) en un texto más corto con Uff!


  2. Cruzul dice:

    con <a>. (al final)


  3. Ana* dice:

    ¡Que guay eres! ¡Justo lo que necesitaba!
    :D

    Cuando me ponga a trastear lo pruebo y te cuento.

    Como puedes imaginar, el diseño de mi blog no lo he hecho yo, pero la solución que en él se da para las discrepancias Firefox-Explorer es poner una hoja de estilos aparte redefiniendo los problemáticos para el Explorer. Es decir, en realidad tengo dos hojas de estilo, una general y otra más cortita y específica que se carga sólo con Explorer. Lo que voy a probar es a dejar la general como está y poner lo que dices sólo en la de IE. A ver qué tal. Ya te contaré.


  4. sisifodichoso dice:

    He intentado poner la propiedad overflow en entrybody. Funcionaba en firefox pero no en explorer (?).
    Sí, Cruzul, yo también tengo, ahora, un tope de tamaño para mis imágenes: de 450px. En realidad ahora la pongo de 300px de ancho como mucho. Pero hay veces que me gusta poner una imagen grande grande … pongamos 500px :-D
    Ahora no me acuerdo pero tuve un enlace muy largo hace tiempo que no sé porqué no era conveniente reducir su texto, no lo recuerdo, pero quedaba horrible, eso sí…
    Lo que no entiendo es qué quieres decir con que los enlaces tienen <a>al final ??? ¿que no los encierras con etiquetas div? pero entonces tendrás alguna clase definida en tu css para esos enlaces ¿no?
    ¿se ven también las cajitas con el explorer? digo en tu blog …uhmmm eso es lo que me gustaría lograr a mí. Cajitas en los dos navegadores y no esa caja gigante que sale en el explorer.
    Sí, Ana* cuéntanos tus experiencias. A mí no me convence del todo el resultado y seguiré indagando un poco más … y sí, guay del todo ji ji :-D :-D


  5. Cruzul dice:

    Lo siento, quería decir que al final del párrafo del anterior mensaje debería poner eso, pues lo escribí directamente y me lo filtró (<a>) el WordPress.

    Para recobrar la comunicación, yo sólo pongo enlaces largos como tú más arriba “la propiedad overflow”, sobre un texto y la URI que sea lo larga que quiera.

    No entiendo a que te refieres con “las cajitas” y la “caja gigante” en el Explorer. Yo veo tu enlace de prueba y la foto de prueba con barra horizontal de desplazamiento en los dos navegadores (?)