Ver Mensaje Individual
  #6 (permalink)  
Antiguo 08/01/2007, 18:44
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Bug de IE con posicionamiento absoluto. Ayudenme...

¡Ahá! Ya he encontrado la razón.
Como te había comentado antes, al no tener ni el container ni el subcontainer (los contenedores principales) ningún tamaño de alto y solo una posición relativa, cuando aparece el primer elemento (h1) con un margen superior de 55px, lo que provoca en realidad es que el subcontainer comience donde comienza el propio primer elemento (h1), de manera que lo que hay encima desaparece, y al ser una capa con posición absoluta desaparece.
Esto se resuelve eliminando el margen del h1 y sustituyéndolo por un desplazamiento superior de 55px (top: 55px), y colocándolo en posicion relativa, ya que el desplazamiento provoca que su contenedor empiece realmente arriba del todo, donde empieza el desplazamiento. Haciendo entonces que la capa absoluta sea el primer elemento (anterior al h1), se ve correctamente en IE.

Esto es un fallo garrafal de IE, y esa extraña manía de dimensionar las capas contenedoras a su aire.

Lo vas a ver más claro con el código.

En el html el cambio es:

Código:
<body>
<div id="container">
<div id="subContainer">
<ul id="navegacionGlobal">
  <li><a href="index.html" id="inicio">Inicio</a></li>
  <li><a href="contacto.php" id="contacto">Contacto</a></li>
  <li><a href="staff.html" id="staff">Staff</a></li>
  <li><a href="tarifario.html" id="tarifario">Tarifario</a></li>
  <li><a href="ayuda.html" id="ayuda">Ayuda</a></li>
</ul>
<h1>Gu&iacute;a Impresi&oacute;n: El Portal de las Artes
Gr&aacute;ficas</h1>
<div id="menuSuperior">...
es decir, invertir el orden de aparición del h1 y el menu.

Y en la css:

Código:
h1{
position: relative;
width: 960px;
height: 125px;
margin: 0px 0 10px 0;
top: 55px;
background: url("../imagenes/header.jpg");
text-indent: -5000px;
}

#navegacionGlobal{
position: absolute;
top: 0;
right: 0;
}
osea, lo que he comentado más eliminar el margen superior negativo del menú y el positivo del h1.

Espero que se entienda bien y resuelva el problema, aunque repito que me gusta más la solución del post anterior.

Mikel.