Foros del Web » Creando para Internet » HTML »

Firefox solapa mis divs la primera vez que carga la pagina

Estas en el tema de Firefox solapa mis divs la primera vez que carga la pagina en el foro de HTML en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 11/08/2009, 10:21
 
Fecha de Ingreso: febrero-2007
Mensajes: 41
Antigüedad: 10 años, 10 meses
Puntos: 0
Firefox solapa mis divs la primera vez que carga la pagina

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
__________________
Angarzafir
Estudiante en Desarrollo Web
Ing. Computación
  #2 (permalink)  
Antiguo 11/08/2009, 10:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Firefox solapa mis divs la primera vez que carga la pagina

Fácil de arreglar
deja este selector así:
Cita:
#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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 11/08/2009, 10:52
 
Fecha de Ingreso: febrero-2007
Mensajes: 41
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Firefox solapa mis divs la primera vez que carga la pagina

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.
__________________
Angarzafir
Estudiante en Desarrollo Web
Ing. Computación
  #4 (permalink)  
Antiguo 11/08/2009, 11:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Firefox solapa mis divs la primera vez que carga la pagina

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)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 11/08/2009, 11:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Firefox solapa mis divs la primera vez que carga la pagina

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.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 11/08/2009, 11:53
 
Fecha de Ingreso: febrero-2007
Mensajes: 41
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Firefox solapa mis divs la primera vez que carga la pagina

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!!!! :)
__________________
Angarzafir
Estudiante en Desarrollo Web
Ing. Computación
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:49.