Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Mis capas no se ven como quiero en Forefox, en IE6 si en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/11/2005, 14:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Mis capas no se ven como quiero en Forefox, en IE6 si

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
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #2 (permalink)  
Antiguo 19/11/2005, 14:39
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Tienes
Código:
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
No sé para qué? tu problema puede radicar allí
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 19/11/2005, 14:42
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
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.
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #4 (permalink)  
Antiguo 19/11/2005, 14:51
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
DAme un minuto que lo estoy viendo
__________________
Al final del día hablar es gratis, codificar no lo es
  #5 (permalink)  
Antiguo 19/11/2005, 14:57
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 19/11/2005 a las 15:35
  #6 (permalink)  
Antiguo 19/11/2005, 15:07
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Ya entrados en materia...

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,
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 19/11/2005 a las 15:30
  #7 (permalink)  
Antiguo 19/11/2005, 15:08
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
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
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #8 (permalink)  
Antiguo 19/11/2005, 15:15
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Después de que?
__________________
Al final del día hablar es gratis, codificar no lo es
  #9 (permalink)  
Antiguo 19/11/2005, 15:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Después de hacer lo que me habías dicho en el post #5.
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #10 (permalink)  
Antiguo 19/11/2005, 15:23
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Y ya usaste el #6?
__________________
Al final del día hablar es gratis, codificar no lo es
  #11 (permalink)  
Antiguo 19/11/2005, 15:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
El #6 no se ve nada... Se ve simplemente el texto, las imágenes no se ven.
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #12 (permalink)  
Antiguo 19/11/2005, 15:29
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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
__________________
Al final del día hablar es gratis, codificar no lo es
  #13 (permalink)  
Antiguo 19/11/2005, 15:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
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?
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #14 (permalink)  
Antiguo 19/11/2005, 15:40
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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!
__________________
Al final del día hablar es gratis, codificar no lo es
  #15 (permalink)  
Antiguo 19/11/2005, 15:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Aham. Entendido.

Gracias otra vez :)
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:12.