Mis capas no se ven como quiero en Forefox, en IE6 si

pzin · #1 (**permalink**) 19/11/2005, 14:19

Hola a todos.

Estoy empezando a hacer una página, y tengo problemas con una capa (la del cuerpo), que lleva una imagen como fondo, y encima de esta capa hay otra, la de la cabecera y menú.

En IE6 se ve como quiero, la capa de la cabecera pegada a la del cuerpo, pero en Firefox, la capa del cuerpo, la menos la imagen de fondo, se ve mas alejada de la capa de cabecera. Como con un hueco.

Estas son las capas:

Código HTML:

/* esta es la capa del cuerpo */
#maincol{
background-color: #FFFFFF;
background-image: url('img/bodybg.jpg');
background-repeat: repeat-y;
position: relative;
width:100%;
}

/* y esta la de la cabecera */
#header{
position:relative; 
height:123px; 
background-color:#FFFFFF;
background-image: url('img/header.jpg');
width:100%;
}

Se puede ver como queda la página aquí.

Edito: El título es Firefox, no Forefox :P

baccxus · #2 (**permalink**) 19/11/2005, 14:39

Tienes

Código:

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;

No sé para qué? tu problema puede radicar allí

pzin · #3 (**permalink**) 19/11/2005, 14:42

No es eso, he probado a quitarlo, y se ve igual.
Es mas, he probado a quitar todas las capas, y dejar solo tres de ellas, y se sigue viendo igual. No sé porqué, pero me da que tiene que ser por algún atributo que me falte.

baccxus · #4 (**permalink**) 19/11/2005, 14:51

DAme un minuto que lo estoy viendo

baccxus · #5 (**permalink**) 19/11/2005, 14:57

Es el padding de #nav, ponle esto

Código:

#nav {
 text-align: right;
 position: absolute;
 width: 75%;
 right: 40px;
 bottom: 40px;

y a header le pones:

Código:

position:relative

baccxus · #6 (**permalink**) 19/11/2005, 15:07

Te hacía falta una dtd que validara tu css y te sobraban varias divisiones, así me quedó tu página:

Código 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">
<html>
<head>
<title>Bernardos Mermeladas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body{ 
 margin:5px;
 font:12px "Trebuchet MS";
} 
 
#pagewidth { 
 width: 682px; 
 margin: 0 auto;
 position: relative;
 background-image: url('img/bodybg.jpg');
 background-repeat: repeat-y;
} 
 
#header{
 position:relative; 
 height:123px; 
 background-image: url('img/header.jpg');
 width:100%;
} 
#footer{
 height:150px; 
 clear: both;
 padding: 5px 15px;
}

#content {
 width:100%;
 padding:5px 15px;
}

#nav {
 text-align: right;
 position: absolute;
 width: 75%;
 right: 40px;
 bottom: 40px;
}
</style>
</head>

<body>
<div id="pagewidth">
<div id="header">
<div id="nav">español | english | deutsch<br>elaboración | catálogo | tienda | distribuidores | contacto</div>
</div>
<div id="content">
Contenido...<br>
Contenido...<br>
Contenido...<br>
</div>
<div id="footer" > Footer </div>
</div>
</body>
</html>

Saludos,

pzin · #7 (**permalink**) 19/11/2005, 15:08

Sigue pasando lo mismo después de haber hecho eso.

Lo que me parece curioso, es que el CSS y HTML se validan, pero, en Firefox se ve mal, y en IE6 bien. En todo caso lo vería normal si fuera al revés

baccxus · #8 (**permalink**) 19/11/2005, 15:15

Después de que?

pzin · #9 (**permalink**) 19/11/2005, 15:20

Después de hacer lo que me habías dicho en el post #5.

baccxus · #10 (**permalink**) 19/11/2005, 15:23

Y ya usaste el #6?

pzin · #11 (**permalink**) 19/11/2005, 15:25

El #6 no se ve nada... Se ve simplemente el texto, las imágenes no se ven.

baccxus · #12 (**permalink**) 19/11/2005, 15:29

ahh. se me olvidó que cambié las imagenes:

donde dice url ('bodybg.jpg'), cambialo por url('img/bodybg.jpg') igual con la imagen del encabezado, disculpa fue un lapsus mentis!

Por si acaso ya lo corregí en el código del post #6

pzin · #13 (**permalink**) 19/11/2005, 15:36

Ahora si se ve bien en IE6 y Firefox

Muchas gracias baccxus.

¿Lo único que has hecho, fue poner la imagen de fondo en la capa pagewidth?

baccxus · #14 (**permalink**) 19/11/2005, 15:40

Cita:

Iniciado por BoNeZ

¿Lo único que has hecho, fue poner la imagen de fondo en la capa pagewidth?

Eso y también quité dos divisiones, una era columna principal (creo) y otra era "clearfix", además tenías body "align:center" y esto no es válido en css.

Saludos y sigue así que esa página está quedando muy PRITTY!

pzin · #15 (**permalink**) 19/11/2005, 15:45

Aham. Entendido.

Gracias otra vez :)