Foros del Web » Creando para Internet » CSS »

DIV contenedor colapsado en Firefox

Estas en el tema de DIV contenedor colapsado en Firefox en el foro de CSS en Foros del Web. Hola a todos. Me está sucediendo algo curioso. Tengo una estructura base definida por divs. CABEZA CUERPO PIE Y divs adentro de cada uno de ...
  #1 (permalink)  
Antiguo 28/11/2008, 20:17
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
DIV contenedor colapsado en Firefox

Hola a todos. Me está sucediendo algo curioso.

Tengo una estructura base definida por divs.
CABEZA
CUERPO
PIE

Y divs adentro de cada uno de estos para cosas como el menú o el contenido principal.

Lo curioso es que en firefox, el CUERPO se colapsa y el PIE aparece pegado a la cabeza, pero los divs que están dentro de estos (Menu, y un div de texto dentro de pié) Aparecen en su lugar correcto. Los divs colapsados traen principalmente el fondo de la sección.

Dejo unas capturas de pantalla donde se puede ver que la zona grande verde del centro no está, y el fondo rojo grande está hasta arriba:



y dejo un link para que lo vean en vivo:
http://www.otake.com.mx/Duda/



Y el código tal cual de la página.

Código PHP:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sp" dir="ltr">
<head lang="sp" dir="ltr">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Nuevo Documento</title>
<link rel="stylesheet" type="text/css" href="HojaDeEstilo.css">

</head>

<body>
<div id="B-Cabeza">
    <div id="Cabeza">Cabeza<br /><br /><br /></div>
</div>


<div id="B-Cuerpo">
    <div id="Cuerpo">

    <div id="Menu">
    <a href="#">Tema 123</a><br />
    <a href="#">Tema 123</a><br />
    <a href="#">Tema 123</a><br />
    <a href="#">Tema 123</a><br />
    </div>
    
    
<div id="Contenido">

    <div id="ColumnaPrincipal">
    Contenido
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1
    <br />1<br />1<br />1<br />1<br />1<br />1
    </div>

</div>
</div>
</div>



<div id="B-Pie">
    <div id="Pie">Pie
    </div>
</div>

</body>
</html>
Código PHP:
/* Partes Principales */
div#Cabeza, div#Cuerpo, div#Pie {width: 950px; margin: 0 auto;}

div#Cabeza {
    
background-color#36F;
    
height100px;}

div#Cuerpo {
    
background-color#CF0;}

div#B-Cuerpo {
    
background-color#CF0;}

div#B-Pie {
    
background-color#F00;
    
height100px;}

div#Pie {
    
background-color#F99;
    
height90px;
    
clearleft;}


/* Menú */
div#Menu {
    
background-color#6F6;
    
width200px;
    
floatleft;
    
text-aligncenter;}

    
/* Contenido */
div#Contenido {
    
width750px;
    
floatleft;}

div#ColumnaPrincipal {
    
background-color:#AFA;
    
width750px;} 
Estoy un poco obligado al uso de los float: left, por los famosos fondos de las columnas.. A ver que se les ocurre para evitar el colapso.

Última edición por Rafael; 28/11/2008 a las 20:24
  #2 (permalink)  
Antiguo 28/11/2008, 21:51
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: DIV contenedor colapsado en Firefox

ponle al :
div#B-Pie {
background-color:#FF0000;
height:100px;
clear:both;
}

Saludos... a mí, así me funciona...
  #3 (permalink)  
Antiguo 29/11/2008, 01:22
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: DIV contenedor colapsado en Firefox

Gracias. Casi me atropella y no lo ví El pié ya quedó, pero el cuerpo todavía está desaparecido.

Solo que no le puedo poner un height definido, ya que esta sección es elástica.

¿Una ayudadita adicional?
  #4 (permalink)  
Antiguo 29/11/2008, 04:38
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: DIV contenedor colapsado en Firefox

Te refieres a que el menu no llega hasta abajo no?

Aressillo!!
  #5 (permalink)  
Antiguo 29/11/2008, 10:47
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: DIV contenedor colapsado en Firefox

Es el problema de siempre (muy habitual por aquí).
Como las cajas dentro del cuerpo están flotadas no hacen crecer el fondo del cuerpo. Para esto, localiza justo donde cierrra </div> el cuerpo, y justo antes añade esto:

<div class="corte"></div>

y ahora añade a la css:

.corte {clear: both;}
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 29/11/2008, 15:34
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: DIV contenedor colapsado en Firefox

Prueba con:

Código HTML:
div#B-Cuerpo {
    background-color: #CF0;
    float:left;
    width:100%;
}
__________________
oohh... quisiera ser godines!!!

Última edición por safe; 29/11/2008 a las 15:43
  #7 (permalink)  
Antiguo 29/11/2008, 17:16
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: DIV contenedor colapsado en Firefox

Ok, ok, voy a probar las opciones de Mikmoro y Safe, gracias... (Aunque según yo el width lo tengo asignado en mi hoja original, antes de recortarle para simplificarla) Voy a ver. :D

Aresillo, lo del menú que no llega hasta abajo, es como siempre el problema inicial. Como lo estaba resolviendo es asignando el fondo en el elemento contenedor, Justo el que está colapsado. Un mapa de bits con repeat-y.

¡Pero si se puede resolver con otra opción es bienvenida!.
  #8 (permalink)  
Antiguo 29/11/2008, 17:29
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: DIV contenedor colapsado en Firefox

Mikomoro, el artífice, funcionó bien ¡gracias!

(Reflexionando un poco acerca del tema, considero que es un error de implementación en Firefox el hecho que la caja contenedora no crezca y se mantenga con el contenido flotado.
¿No les parece?)
  #9 (permalink)  
Antiguo 29/11/2008, 18:02
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: DIV contenedor colapsado en Firefox

No creo, fíjate que la palabra "float" es muy gráfica, y en cierto sentido flota sobre el flujo del documento y no ocupa espacio fisico, por eso su contenedora no crece.

Además, esto ocurre en todos excepto en IE.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 29/11/2008, 18:13
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: DIV contenedor colapsado en Firefox

El float, (pienso yo) debería ser algo semejante al relative, donde este si afecta al flujo del contenedor. ¿Como si afecta al flujo de los elementos inline, como un texto, y es ignorado por el contenedor?.

Bueno es solo una opinión. De todos modos me acostumbraré a usar el divpin (Je, más que corte se me hace como un alfiler para estirar el contenedor)
  #11 (permalink)  
Antiguo 29/11/2008, 18:27
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: DIV contenedor colapsado en Firefox

Bueno, esto dice exactamente la especificación CSS2:

Cita:
Puesto que un flotante no está en el flujo, las cajas de bloque no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotante no existiera. Sin embargo, las cajas de línea creadas al lado del flotante son acortadas para darle espacio a la caja flotante.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 29/11/2008, 18:50
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: DIV contenedor colapsado en Firefox

Hum... Ok. Aunque el antes y después versus al lado es un poco relativo, ya que todo documento de texto es lineal en escencia. Para que un texto fluya a un objeto flotado debe de aparecer después del elemento flotado.

Aunque lo que queda un poco vago en la especificación es no los elementos de arriba-abajo, sino los internos-externos. No creo que se refiere a esto, con el antes y después, ya que el interno está realmente contenido por la caja flotada. No está ignorando su posición, va con ella.
  #13 (permalink)  
Antiguo 29/11/2008, 18:57
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: DIV contenedor colapsado en Firefox

Hum, ya vi la razón de eso, Arriba del punto 9.51 de la especificación. Saludos.
  #14 (permalink)  
Antiguo 29/11/2008, 19:07
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: DIV contenedor colapsado en Firefox

Cita:
Iniciado por Rafael Ver Mensaje
Hum... Ok. Aunque el antes y después versus al lado es un poco relativo, ya que todo documento de texto es lineal en escencia. Para que un texto fluya a un objeto flotado debe de aparecer después del elemento flotado.
Yo creo que no se refiere a "al lado", sino realmente a antes y después en el flujo.

"las cajas de bloque no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotante no existiera"

Cita:
Iniciado por Rafael Ver Mensaje
Aunque lo que queda un poco vago en la especificación es no los elementos de arriba-abajo, sino los internos-externos. No creo que se refiere a esto, con el antes y después, ya que el interno está realmente contenido por la caja flotada. No está ignorando su posición, va con ella.
Pero no estamos hablando del contenido de una caja flotada, sino todo lo contrario: cómo una caja flotada (como contenido de), afecta a su contenedora, por lo tanto lo importante es su propio comportamiento, no el de su contenido.
__________________
Visita mi nueva web idplus.org
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 16:43.