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;
height: 100px;}
div#Cuerpo {
background-color: #CF0;}
div#B-Cuerpo {
background-color: #CF0;}
div#B-Pie {
background-color: #F00;
height: 100px;}
div#Pie {
background-color: #F99;
height: 90px;
clear: left;}
/* Menú */
div#Menu {
background-color: #6F6;
width: 200px;
float: left;
text-align: center;}
/* Contenido */
div#Contenido {
width: 750px;
float: left;}
div#ColumnaPrincipal {
background-color:#AFA;
width: 750px;}
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.