Posicionamiento de div en firefox

datatraveler · #1 (**permalink**) 19/09/2008, 02:17

Buenas!

Tengo el siguiente código en css:

/* CSS Document */
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#container {
width:1003px;
top:0px;
margin-left:auto;
margin-right:auto;
background-color:#000000;
position:relative;
}
#cabecera {
width:1003px;
height:160px;
position:relative;
background-color:#333333;
}
#container_principal {
width:1003px;
position:relative;
background-color:#666666;
margin-top:29px;
margin-bottom:29px;
/*height:300px;*/
}
#columna_izquierda {
width:224px;
position:relative;
float:left;
background-color:#999999;
margin-left: 16px;
}
#container_columna_derecha {
width:763px;
float:right;
position:relative;
background-color:#CCCCCC;
}
#container_cuadros {
width:224px;
position:relative;
}
#cuadros_izq_sup {
width:224px;
height:44px;
line-height:44px;
padding-left:55px;
position:relative;
margin:0px;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-cabecera.png);
}
#cuadros_izq_cen {
width:224px;
position:relative;
background-repeat:repeat-y;
padding-left:55px;
padding-top:15px;
padding-bottom:5px;
background-image:url(../imagenes/cuadros-centro.png);
}
#cuadros_izq_inf {
width:224px;
height:16px;
position:relative;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-inferior.png);
}
#pie_pagina {
width:1003px;
position:absolute;
background-color:#0066FF;
height:32px;
}

Y el siguiente código en html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pruebas CSS</title>
<link rel="stylesheet" type="text/css" href="includes/estilos-pregunta.css" />
</head>

<body>
<div id="container">
<div id="cabecera"><img src="imagenes/cabecera.png" alt="cabecera" width="1003" height="160" /></div>
<div id="container_principal">
<div id="columna_izquierda">
<div id="container_cuadros">
<div id="cuadros_izq_sup">Título cuadro</div>
<div id="cuadros_izq_cen">
<p><br /><br /></p>
</div>
<div id="cuadros_izq_inf"></div>
</div>
</div>
<div id="container_columna_derecha">
<br /><br />
</div>
</div>
<div id="pie_pagina">PIE PAGINA</div>
</div>

</body>
</html>

El problema lo tengo con el div "pie_pagina", en internet explorer me lo pone bien, al pie de página, pero en firefox me lo pone inmediatamente después de la cabecera.
Si en el css le pongo una altura a #container_principal, entonces el pie de página aparece en la parte inferior, pero sin respetar el margin-bottom de #container_principal...

Seguro que me dejo algo, pero no lo veo...

Gracias!

datatraveler · #2 (**permalink**) 19/09/2008, 07:08

Alguna sugerencia?

DragonX · #3 (**permalink**) 19/09/2008, 07:17

fijate si esto te sirve:

Código html:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style>
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#container {
width:1003px;
top:0px;
margin-left:auto;
margin-right:auto;
background-color:#000000;
position:relative;
}
#cabecera {
width:1003px;
height:160px;
position:relative;
background-color:#333333;
}
#container_principal {
width:1003px;
position:relative;
background-color:#666666;
margin-top:29px;
margin-bottom:29px;
overflow:hidden;
}
#columna_izquierda {
width:224px;
position:relative;
float:left;
background-color:#999999;
margin-left: 16px;
}
#container_columna_derecha {
width:763px;
float:right;
position:relative;
background-color:#CCCCCC;
}
#container_cuadros {
width:224px;
position:relative;
overflow:hidden;
}
#cuadros_izq_sup {
width:224px;
height:44px;
line-height:44px;
padding-left:55px;
position:relative;
margin:0px;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-cabecera.png);
}
#cuadros_izq_cen {
width:224px;
position:relative;
background-repeat:repeat-y;
padding-left:55px;
padding-top:15px;
padding-bottom:5px;
background-image:url(../imagenes/cuadros-centro.png);
}
#cuadros_izq_inf {
width:224px;
height:16px;
position:relative;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-inferior.png);
}
#pie_pagina {
width:1003px;
position:absolute;
background-color:#0066FF;
height:32px;
}
    </style>
  </head>
  <body>
 
<div id="container">
<div id="cabecera"><img src="imagenes/cabecera.png" alt="cabecera" width="1003" height="160" /></div>
<div id="container_principal">
<div id="columna_izquierda">
<div id="container_cuadros">
<div id="cuadros_izq_sup">T&iacute;tulo cuadro</div>
<div id="cuadros_izq_cen">
<p><br /><br /></p>
</div>
<div id="cuadros_izq_inf"></div>
</div>
</div>
<div id="container_columna_derecha">
<br /><br />
</div>
</div>
<div id="pie_pagina">PIE PAGINA</div>
</div>
 
  </body>
</html>

datatraveler · #4 (**permalink**) 19/09/2008, 08:11

Hola DragonX,

Gracias por responder.

Se ve mejor, ya que el pie de página aparece en su sitio, pero no respeta el margin-bottom de #container_principal.

Se te ocurre algo?

Saludos!