Margin-top en firefox (capas)

[lizfranco]

Hola,

Quiero hacer una página con imagenes una sobre otra. Para eso he utilizado capas. Pero al areglarle el espacio de arriba se ve bien en Explorer, no en firefox. Que debo cambiar para que tome el espacio del 'top'?

Explorer:


Firefoxe:


CSS:

/*content*/

Código:

div#out {
	top:20px; 
	margin:auto;
	padding:auto;
	width: 618px;
	height:435px;  
	background:url(../images/orange_background.jpg) 0 0 no-repeat;
	z-index:1;
}
div#container {
	margin:auto;
	padding:auto;
	margin-left:35px;
	margin-top:20px;
	height:435px; 
	background:url(../images/login_boxblue.gif) 0 0 no-repeat;
	z-index:2;  
}
div#layer1 {
	margin:auto;
	padding:auto;
	margin-left:15px;
	margin-top:19px;
	height:435px; 
	z-index:3;
	background:url(../images/new.png) 0 0 no-repeat;
}

Saludos
Liz

[PatomaS]

Hola

Dberías definir las posiciones de las capas:
position [absolute / relative];

Esto es un elemento imprescindible para la correcta colocación de elementos con css.

Felicidad

[kemie]

el problema es que de acuerdo con las especificaciones, dos margenes adjuntos se "colapsan" ( http://www.exclipy.com/css/collapsingmargins.html )
si añades padding o bordes a alguno de tus elementos se corrige.

[lizfranco]

Gracias PatomaS y kemie (como siempre) por sus respuestas.

Le añadí la posición a los elementos, gracias PatomaS.
Pero aún me faltaba parte de lo que me recomienda kemie. Ese articulo no lo había leído. Gracias por el dato.

Le añadí esto:
padding-top:1px; /*top firefox*/

Y me funciona bien.
Gracias chicos!!

Liz

[obeiix]

Me estaba volviendo loco con este tema. Gracias!!

Pero sigo con un problema, IE6 e IE7 no me reconocen el margin-top.

capa 1 con position relative y centrado en pantalla con margin:0 auto 0 auto;
capa 2 (anidada en 1 y solo defiiendo su ancho y height)
capa 3 margin-top:20px; anidada en 2.

En FF tras el cambio en capa 2 añadiendo padding-top:1px; va perfecto pero los ie la ignoran.
¿qué se me escapa?

Problema con margin-top: <<-- Ten cuidado cuando anidas varias capas seguidas.
Margin-top me desplaza la capa superior o la capa contenedora <<--- Margin Collapsing !!!


Gracias!