Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/11/2007, 05:15
yllelder
 
Fecha de Ingreso: octubre-2007
Ubicación: Dentro de un <div>
Mensajes: 39
Antigüedad: 16 años, 6 meses
Puntos: 0
Pregunta [Pregunta del millón] Diferente interpretación de capas en IE y FF

Hola phperos. He encontrado un problema que aún nadie ha sabido solucionarme, empiezo a pensar que es un bug sin solución?.

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
Fácil ¿no?. Ésto debería dar como resultado lo siguiente:



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:
<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>
Os animo a hacer vuestra propia prueba con una página nueva y probarlo en vuestro explorador a ver que os sale.

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?