Muchas gracias; funciona bien.
Aunque me he encontrado con otro problema. Cuando tenía la página en html "normal", la web se ajustaba perfectamente al marco del navegador. Y así, curiosamente en html + IE6 se ve bien y en xhtml+Mozilla quedan márgenes que no soy capaz de eliminar.
(Tengo un par de pantallazos de a lo que me refiero, pero no sé si es muy correcto poner los enlaces de cómo queda)
De hecho, he tenido que cambiar el xhtml e incluir un div adicional para la imagen que quiero que sea cabecera:
Código:
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head profile="http://www.w3.org/2005/11/profile">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/marino.css" media="screen" />
</head>
<body>
<div id="cabeza"></div>
<div id="barra_navegacion">
<!-- la barra de navegación -->
</div>
<div id="textos">
<!-- resto de la web -->
</div>
</body>
</html>
Código:
html{height:100%}
* {padding: 0}
body {
font: normal 0.8em Arial, Helvetica, sans-serif;
color: #fff;
height:100%;
//background:#f7fbef url(../images/body-pattern.jpg) no-repeat /* En IE funciona!!*/
}
#cabeza {
height:20px;
background:#f7fbef url(../images/body-pattern.jpg) no-repeat
} /*Para XHTML*/
#barra_navegacion {
z-index: 2;
position: relative;
left: 50%;
margin-left: -35.5em;
width: 71em
}
#textos {
height: 100%;
background: #fafeed url(../images/body2.png) no-repeat center;
}
Un saludo