Firefox solapa mis divs la primera vez que carga la pagina

[angarzafir]

Bueno chicos, vengo aqui luego de haberme recorrido todo google y haber probado todas las configuraciones posible para tener una plantilla de tres div correcta. Pero he llegado a la conclusion que el problemas es y seguira siendo firefox... (se ve bien en Opera, en safari, hasta en IE6)

El problema es el siguiente. Cuando cargo por primera vez la página, todas las columnas se solapan a la izquierda una al lado de la otra, dejandome el enorme espacio en blanco derecho. Pero cuando toco uno de los botones de la web, carga todo en la posición que debe estar. Luego de que la pagina cargo, navego normal con la web con todo acomodado. Pero si salgo, y vuelvo a entrar, de nuevo, todos se acomodan a la izquierda. ¡¡¡Es el comportamiento más extraño que he visto!!! ¡Y SOLO OCURRE EN FF!

Ya no se que hacer, porque la primera impresion que da es que esta mal hecha, pero si es asi porque funciona bien luego de que cargo? Alguien que me ayude, porque estoy a punto de colocar que para ver mi web usen todo menos FF

http://manganimart.net/home.htm

Por favor ayudenme, si pueden dejenme la captura de como se ve la web en sus navegadores, ya no se que hacer al respecto.

Firefox recargado mal

Firefox luego de que cargo

En Safari OK

En Opera OK

En IE6 OK

[kseso?]

Fácil de arreglar
deja este selector así:

#total {
margin:0 auto;
max-width:930px;
}

Y ya de paso añade un z-index:100; (por ejemplo) a #toolbar

Porqué ocurre? Creo que se bede a que estás haciendo un abuso incorrecto de "display:table".

Si una caja tiene esa propiedad, las contenidas deben ser "table-row" | "table-cell".
Pero ie (al menos hasta la ver. 7) no soporta estos valores.

Un saludo

[angarzafir]

Hola Kseso, gracias por responder. Hice las correciones pero aún no se arregla en firefox.

Asi tengo el codigo CSS

Código:

/*
/////////////////////////
************************
Para las paginas de contenido
/////////////////////////
************************
*/
#total{
max-width:930px;
margin:auto;}

#header{
height:145px;
background-color:#000000;
width:930px;
background-image:url(../graficos/modern/banner.jpg);
background-position:top;
background-repeat:no-repeat;
//display:table;
position:relative;
margin:auto;
}
#index{
width:900px;
display:table;
margin:auto;}

#left{
width:177px;
background-color:#000000;
color:#FFFFFF;
text-align:center;
margin: 0px 0px 0px 0px;
padding-bottom: 10px;
float:left;
display:table-row;
background-image:url(../graficos/modern/bottom_menu.gif);
background-position:bottom;
background-repeat:no-repeat;
}

#cuerpo{
width:910px;
border-left:10px solid #000000;
border-right:10px solid #000000;
background-color: #FFFFFF;
/*position:relative;*/
margin: auto;
}
#cont_afiliados{
height:40px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;}

#cont_login{
height:25px;
background-color:#000000;
text-align:right;
font-size:10px;
color:#CCCCCC;}

#noticiero{
width:500px;
margin:0px;
text-align:justify;
position:relative;
float:left;
margin: 5px 5px;
}

#col_center{
margin: 0px 0px 0px 0px;
padding: 0px;
width:400px;
text-align:center;
float:left;
display:table-row;}

#col_right{
margin: 0px 0px 0px 0px;
padding: 0px;
width:313px;
float:right;
text-align:center;
position:relative;
display:table-row;}

#scan_right{
width:177px;
float:right;
display:table-row;
margin: 0px 0px 0px 0px;
 padding: 0px;
}
#toolbar{
width:100%;
position:fixed;
background-color:#000000;
bottom:0px;
left:0px;
text-align:right;
font-size:10px;
color:#CCCCCC;
height:40px;
z-index:100;
}
#footer{
height:40px;
background-color:#000000;
width:930px;
background-image:url(../graficos/modern/footer.jpg);
background-position:top;
background-repeat:no-repeat;
margin:auto;
display:table;
position:relative;
margin-bottom:50px;
	clear: both;
}

La web tiene dos posibles plantillas: la del home esta distribuida asi

- #total
----#header (logo y menu)
----#cuerpo
--------#cont_login (inico a la web)
--------#cont_afiliado (botones afiliados)
--------#index (contiene columnas)
----------------#left
----------------#col_center
----------------#col_right
----#footer
----#toolbar

Las del contenido que la columno derecha es más delgada y con otro diseño

- #total
----#header (logo y menu)
----#cuerpo
--------#cont_login (inico a la web)
--------#cont_afiliado (botones afiliados)
--------#index (contiene columnas)
----------------#left
----------------#noticiero
----------------#scan_right
----#footer
----#toolbar

Espero su ayuda.

[kseso?]

Quizás, y resalto el quizás, sea una cuestión de anchuras en el cuerpo principal (#index) donde tienes las tres columnas.
Digo quizás porque no lo he mirado en profundidad. Yo veo la tercera columna (col_right) por debajo de las otras dos.
Recuerda cuál es el modelo de caja estandar
Quita algún px a una de las tres columnas.
La columna derecha se coloca en su sitio si añades a #index la propiedad "overflow:auto", (en FF 3.5.2 en vi$ta)

[Mikmoro]

Ya te comentaba kseso? que quitaras el display table de #index, pero no lo has hecho:

#index{
width:900px;
display:table;
margin:auto;}

Pruébalo.

[angarzafir]

Gracias a Dios!!!!! Estuve recargando y recargando la web hasta comprobar que no se solapaba!! precisamente faltaba quitar el table del index, lo habia quitado del total, y sustituido las columnas por el table-rows.

Muchas gracias por su ayuda y tiempo Kseso y Mikmoro! ^^

Soy feliz!!!! :)