[Pregunta del millón] Diferente interpretación de capas en IE y FF El problema es que, al crear capas en posición relativa (una debajo de otra), Firefox deja un espacio entre ellas e Internet Explorer no, ¿porqué?.
Vamos a hacer una sencilla prueba y veréis de lo que hablo, lo explico por partes y lo ilustro para mayor entendimiento.
Vamos a crear una página html con 4 capas, una capa contenedora y las otras tres restantes dentro de ésta. Así:
Código PHP:
<div id="contenido_todo">//capa que contiene a las otras 3
<div id="cabecera"></div>//capa 1
<div id="medio">//capa 2 con texto dentro
<p>Linea 1</p>
<p>Linea 2</p>
</div>
<div id="pie"></div>//capa 3
</div>
En Internet Explorer se muestra como en la imagen anterior, pero el problema viene con Firefox que se muestra así:
A parte de que Firefox no centra las capas, como podéis ver, deja un espacio entre capas que no entiendo y hasta ahora nadie a sabido decirme porqué.
Las 4 capas tienen posición relativa, un ancho y un alto definido y un color de fondo, todo definido en el CSS.
La capa del medio (id="medio") tiene la propiedad overflow para que se adapte en alto al texto que vayamos introduciendo dentro de ella.
El CSS sería el siguiente:
Código:
Os animo a hacer vuestra propia prueba con una página nueva y probarlo en vuestro explorador a ver que os sale.<style type="text/css">
<!--
#contenido_todo {
position:relative;
width:800px;
height:600px;
z-index:1;
background-color: #00FF00;
text-align: center;
}
#cabecera {
position:relative;
width:200px;
height:115px;
z-index:2;
background-color: #FF0000;
}
#medio {
position:relative;
width:200px;
z-index:3;
background-color: #0000FF;
overflow: visible;
}
#pie {
position:relative;
width:200px;
height:115px;
z-index:4;
background-color: #FF00FF;
}
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
-->
</style>
Si algún gurú del php sabe porqué pasa ésto y fuera tan amable de explicarlo, sería de agradecer eternamente
¿A alguien mas le ha pasado ésto?
) ya borras el margen que deja FF.
