Css scroll que desplaza div en firefox

maue75 · #1 (**permalink**) 21/11/2008, 21:35

Hola. He buscado algun post al respecto pero no he encontrado.
El caso es que tengo un diseño de 3 columnas ( menu, datos, avisos ) y estoy tratando de colocar un scroll solo sobre la columna 2 ( datos ), que tiene un alto delimitado en 600px.
El problema es que si habilito el scroll vertical esta columna se desplaza entera saliendose de su lugar y posicionandose en parte sobre la 3era columna.

¿Alquien tiene idea de que puede estar pasandome?

David · #2 (**permalink**) 21/11/2008, 21:36

¿Podrías poner un enlace a tu página o en su defecto el código en cuestión?.

maue75 · #3 (**permalink**) 21/11/2008, 22:00

Gracias David, por tu pronta respuesta.

no lo tengo colgado, a ver si te paso esto y puedo orientarte:

tengo una .css donde defino:
#centro {
width: 655px;
margin-left: 155px;
padding: 0px;

overflow-y: scroll;
overflow-x: hidden;
height: 900px;

}

el index.php tiene includes con las distintas divs ( encabezado, columna 1, columna 2, columna 3, y el pie)

el index invoca a la columna 2 asi:

<? include("centro.php"); ?>

y centro.php (resumido) es:

<div id="centro">
<div id="centro_recuadro">
<? $foto_aleatoria = rand(1, 12); ?>
<? echo "<img src='imagenes/fotos_".$foto_aleatoria.".jpg' width='647' height='297' align='top'>" ?>
</div>

<div id="centro_recuadro">
<img src="imagenes/anunciantes/centrales/hotel_1.jpg" align="top">
</div>

</div>

Espero puedas ver algo, sino veo de subirlo a algun lado.
Pero basicamente el tema es que en IE7 se ve bien, pero en Firefox la columna 2 se sale de lugar solo si habilito el scroll, sino se ve barbaro.

David · #4 (**permalink**) 21/11/2008, 22:04

Será más fácil realmente ver el error viendo todo el contexto de la página, si puedes subirlo a algún lado, mejor, o por lo menos coloca el código resultante (la salida HTML que se genera con el código PHP).

maue75 · #5 (**permalink**) 21/11/2008, 23:07

David, le he quitado todo para ver concretamente el problema. Aquí lo copio:

formato_general.css:

.contenedor {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 600px;
background-color: #FFFFFF;
display:table;
}

#cabecera {
height: 170px;
width: 1000px;
background:#33CC66;
}

#columna-izquierda {
float: left;
width: 143px;
height:700px;
background:#CCCC00;
color: #fff;
}

#centro_con_scroll {
width: 650px;
height: 800px;
margin-left: 155px;
padding: 0px;
overflow: auto;
overflow-x: hidden;

}

#centro_sin_scroll {
width: 650px;
height: 800px;
margin-left: 155px;
padding: 0px;
}

#centro_recuadro {
border: thick solid #CCCCCC;
height: 300px;
background:#006600
}

#columna-derecha {
background:#FF0000;
float: right;
width: 160px;
height: 600px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

index.php :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META http-equiv=imagetoolbar content=no>

<link media=all href="formato_general.css" type="text/css" rel="stylesheet" />


<style type="text/css">

</style>
</head>

<body>

<div class="contenedor">

<div id="cabecera"></div>

<div id="columna-izquierda"></div>
<div id="columna-derecha"></div>

<div id="centro_con_scroll">
<div id="centro_recuadro"></div>
<div id="centro_recuadro"></div>
<div id="centro_recuadro"></div>
<div id="centro_recuadro"></div>
</div>

</div>

</body>
</html>

En la columna del centro, si utilizo la div=centro_sin_scroll, las columnas se ven donde deben, pero si utilizo la div=centro_con_scroll, es ahí donde Firefox me la desplaza parte encima de la columna derecha.

Espero puedas ayudarme. Gracias.

David · #6 (**permalink**) 21/11/2008, 23:29

mmm... he probado con ese código y no logré reproducir el error que mencionas

.

maue75 · #7 (**permalink**) 21/11/2008, 23:38

¿No has visto la diferencia??? Pues que raro. Estoy usando Firefox 2.0. Será que tengo una versión vieja?
Verás que la columna se desplaza del medio y se posa sobre parte ( no completamente) sobre la derecha, si usas div=centro_con_scroll . Si usas div=centro_sin_scroll, quedan las columnas debidamente dispuestas.
No entiendo que puede ser que no lo veas igual que yo.

David · #8 (**permalink**) 21/11/2008, 23:51

Yo uso la versión 3

. En este caso habrá que esperar a los masters para que lo vean

(Ej.: Mikmoro

).

maue75 · #9 (**permalink**) 21/11/2008, 23:54

Mmmhh... voy a bajar la version 3 y ver que pasa. A ver si es eso.

maue75 · #10 (**permalink**) 22/11/2008, 00:27

Bueno, evidentemente es así. En la versión 3 de Firefox anda bien. En la 2 no. Igual quisiera dejar esto abierto porque quiero que esto me ande en cualquiera de las versiones de Firefox, porque aun creo que se usa bastante la 2.
Gracias David.

Mikmoro · #11 (**permalink**) 22/11/2008, 06:15

El asunto es: si a esa columna le colocas scroll, ya no necesitas el margen izquierdo para salvar la columna izquierda como harías si no tuviera scroll.

Quítale el margen izquierdo e irá a su sitio, tanto con FF2 como con FF3.

Por otro lado, si de paso le quitas el width ocupará todo el espacio que le queda disponible, y se te ajustará a derecha e izquierda automáticamente (FF2 y 3, IE6 y 7, Chrome, Safari 1.5, Opera 9.5)

maue75 · #12 (**permalink**) 22/11/2008, 07:44

Muchas gracias MIKMORO !!!
Con esa corrección anda perfectamente como has dicho.