El problema que tengo es que cuando abro mi html, las dos imágenes, la de la cabecera, y la del pie de página, me aparecen la una sobre la otra, concretamente la del pie encima de la imagen de la cabecera. Os pongo el codigo de toda la página para que lo podais probar y veais lo que pasa (he sustituido las imagenes por colores de fondo):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<style type="text/css">
body{
text-align: center;
background-color: #fff;
}
#container{
margin: 4px auto;
width: 811px;
text-align: left;
}
#header{
width: 811px;
height: 173px;
padding: 0px;
margin: 0px;
/*background: url(../images/cabecera.jpg) top left no-repeat;*/
background-color: #f00;
}
#main{
width: 811px;
padding: 0px;
margin: 10px;
background-color: #e5e5e5;
}
#footer{
width: 811px;
height: 113px;
padding: 0px;
margin: 0px;
/*background: url(../images/pie.jpg) bottom left no-repeat;*/
background-color: #00f;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</ div>
<div id="main">
Aqui va el contenido principal de la pagina.
</ div>
<div id="footer">
</ div>
</ div>
</body>
</html>