Que hack aplico para este problema en IE7?

[NaRanJiTo78]

Hola!

No consigo arreglar este problema en IE7...

Hay un div a la derecha que contiene imágenes con el nombre de cada galería...

El caso es que en IE7 al hacer scroll solo se mueven las letras, no las imagenes...

http://www.garciarevuelta.com/galeria/index.html

He probado varias cosas sin solución ( *{overflow:auto}, posición absoluta, etc...) pero no doy con la solución.

Alguien me puede ayudar?

Un saludo

[cristian_cena]

Pone solo el código (html+css) de la columna que te da problemas y lo vemos.

[NaRanJiTo78]

HTML:

<div id="load_galeria" style="display:none; position:relative;"></div>
<div id="lateral" class="container">

Css:

#lateral {
position:fixed;
background-color: #388e8f;
width:410px;
z-index:2;
float: right;
right:0;
height: 900px;
}

El problema es que me salen 2 scrolls y las miniaturas de la galería se quedan estáticas, mientras el texto se mueve...

[cristian_cena]

Como position y float no se usan juntos (salvo en posicionamientos static o relative) deberás elegir uno.
Si elegis usar float, usá un contenedor para las cajas flotadas de modo que todo lo que esté dentro de ese contenedor esté flotado. Es decir, si tenes más contenido que "#lateral" entonces lo colocas en otra caja que también la flotas.
Finalmente, a dicho contenedor le aplicas overflow:hidden; lo que hará que su alto sea igual a la altura de su caja hija más alta (si no lo haces es = a cero, dando lugar a problemas).
mas detalles (limpiar los float): http://www.librosweb.es/css_avanzado...ar_floats.html

Si eliges posicionamiento fijo no tendrás que agregar nada, (pero por favor quita ese float demás)

Mirando tu código fuente pude ver #lateral .content_cats{ ... }
por las dudas probá usar overflow: auto; en lugar de overflow-y:auto;

Además veo que en #lateral ul li img{...} también usas float. Por tanto, controla de "limpiar el flotado" en cada lugar donde uses float. Aquí puede estar el problema.

En los <li> yo probaría con overflow en lugar de overflow-x o overflow-y ya que al ser css2 tenes menos posibilidades de que falle en navegadores viejos, además de que no necesitas otra cosa que overflow:hidden; en dichos <li>

Todo esto te obliga a realizar pequeños cambios en tu html.

Tomemos por caso los <li>, lo cual facilmente podras trasladarlo al caso de la columna "#lateral":
Agregamos dos clases ".li_left" y ".li_right"

Código HTML:

<li>
    <img class="li_left" src="imgs/categories/ovni.jpg" />
    <div class="li_right">
        <h3>Pinturas con video</h3>
        <div class="info">
            <em>2004 - 2005</em>
            <span></span>
        </div>
    </div>
</li>
​
 

El css es genérico, luego para hacerlo más particular podes usar un id en tu <ul>.
Es importante que controles tus anchos. es decir los anchos totales de las cajas flotadas deben ser <= que el width de su contenedor.
ancho total = margin + padding + width + border

Código CSS:

​
li{
    width:;
    overflow: hidden
}
.li_left , .li_right{
    float: left;
}
.li_left {
    width:;
    display: block;
}
.li_right{
    width:;
}
 

​Notarás que el contenedor es "li" y sus hijos son "li img.li_left" y "li div.li_right"
El uso de float:left para ambas cajas (li_left y li_right) se debe a que no necesitas espacio entre ellas, aunque si lo queres hacer con float:left y float:right también es válido.

No te aseguro que todo esto solucione tu problema, pero al menos, teniendo un marcado y unos estilos correctos será más fácil identificarlo.

Saludos.

[NaRanJiTo78]

Hola Cristian!

Te agradezco enormemente tu explicación y ayuda...

He conseguido algunos progresos de ello, (que corran texto e imágenes juntas, limpiar los float, poner las clases "li_left" y "li_right")...aunque me siguen apareciendo en IE7 dos barras de scroll (una como inutilizada a la derecha) y no puedo poner un alto a la caja para que me tape las galerias...

Todo ello lo he trasladado a http://www.firenetworks.eu/galeria/ y no se cómo avanzar...se te ocurre alguna cosa más?

Maldito IE7!!!

Muchísimas gracias y un saludo.