Bug de IE con posicionamiento absoluto. Ayudenme...

mbavio · #1 (**permalink**) 04/01/2007, 08:54

Tengo un problema con mi diseño, y es algo que ya me ha ocurrido en trabajos anteriores, y nunca he podido solucionarlo. Tengo un contenedor que contiene

a toda la maqueta. El problema ocurre cuando pongo en ese contenedor position: relative y a un menu de navegacion global position: absolute para comodarlo por encima de todo el contenido. En Firefox y Opera lo veo perfecto, pero en Explorer 6 y 7 en el momento en que agrego la regla de posicionamiento absoluto desaparece el menu.

El ejemplo se puede ver en:

http://www.guiaimpresion.com.ar/NUEV...plantilla.html

Agradezco cualquier consejo. Saludos!

Mikmoro · #2 (**permalink**) 04/01/2007, 13:32

No he visto tus hojas de estilo, pero por si te sirve de algo, creo recordar que IE tiene problemas para dar tamaño a una caja en base a coordenadas (vamos, que no lo hace). Si tu div lo has posicionado y dimensionado al estilo top: 0px;, right: 0px, etc., no tomará un tamaño a menos que se lo marques. No sé si tiene algo que ver con tu problema.

Mikel.

mbavio · #3 (**permalink**) 08/01/2007, 07:09

No entendi del todo tu explicacion Mikmoro. Segun lo que dices, que deberia hacer? Darle un tamaño fijo al menu? Lo he hecho, y sigue sin aparerecer el menu de navegacion. Me podrias dar algun ejemplo? Porque no encuentro nada en la web. Gracias.

Mikmoro · #4 (**permalink**) 08/01/2007, 09:08

Quiero decir que por ejemplo, para firefox puedes dar a un div posicionamiento absoluto, y para darle tamaño, podrías poner top: 0px; bottom: 0px;, y con esto llegaría desde arriba hasta abajo. Sería lo que decía de dimensionar en base a coordenadas. Si le dices que aparezca a 10 pixels de abajo, 4 de arriba, 200 a la izquierda y 30 a la derecha, el div tendrá ese tamaño, además de esa posición. Pero IE no lo hace; lo coloca pero no le da tamaño tomando como referencia las coordenadas arriba, abajo, izda y dcha.

Quizá sería mejor que pusieras el fragmento html y la css para poder ver qué es lo que está pasando, y si a alguien se le ocurre una solución.

Mikel.

Mikmoro · #5 (**permalink**) 08/01/2007, 17:21

Hola otra vez. Según veo tú código, yo no usaría posicionamiento absoluto. No sé si lo necesitarás por alguna razón que desconozco. Yo te planteo una solución sin usarlo, a ver qué te parece.

El en código html yo usaría esto:

Código:

<body>
<div id="container">
<div id="subContainer">
<ul id="navegacionGlobal">
  <li><a href="ayuda.html" id="ayuda">Ayuda</a></li>
  <li><a href="tarifario.html" id="tarifario">Tarifario</a></li>
  <li><a href="staff.html" id="staff">Staff</a></li>
  <li><a href="contacto.php" id="contacto">Contacto</a></li>
  <li><a href="index.html" id="inicio">Inicio</a></li>
</ul>
<h1>Gu&iacute;a Impresi&oacute;n: El
Portal de las Artes
Gr&aacute;ficas</h1>
<div id="menuSuperior">...

y en la css pondría esto:

Código:

  #container { margin: 0 auto;
    padding: 0;
    width: 960px;
    text-align: left;
    }

  #subContainer { position: relative;
    }

  h1 { margin: 5px 0pt 10px;
    background: transparent url(../imagenes/header.jpg);
    width: 960px;
    height: 125px;
    text-indent: -5000px;
    clear: both;
    }

  #navegacionGlobal {  }

  #navegacionGlobal li { float: right;
    }

  #navegacionGlobal li a { display: block;
    width: 75px;
    text-indent: -5000px;
    height: 50px;
    }

Yo creo que es una buena solución, y de uso más habitual que la otra.

No estoy seguro de por qué te ocurre lo que relatas, pero sí te diré que sé de buena tinta que IE tiene problemas al posicionar capas absolutas dentro de capas relativas que no tienen tamaño definido. Seguiré pensando en por qué te ocurre eso porque me interesa.

Ya me dirás qué tal y si te sirve de algo.

Mikel.

P.D.: el menú te ha quedado muy guapo.

Mikmoro · #6 (**permalink**) 08/01/2007, 18:44

¡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.

mbavio · #7 (**permalink**) 09/01/2007, 07:30

Antes que nada, agradezco tu paciencia, amigo Mikmoro, y tu buena voluntad para ayudar. Si todos los foreros fueran como vos, capaz que no habria tantas preguntas "tontas" como esta...
Te explico que el motivo por el cual deberia ir el encabezado antes que el menu es por una cuestino semantica, y pensado para aquellas personas con css desactivado o con navegadores de texto/voz. Me parecio que poner el encabezado primero era mas importante, y luego preocuparme visualmente por dejar el menu arriba del mismo.
A través de tu EXCELENTE solucion de poner relativamente posicionado el encabezado, he logrado solucionar el problema. Ahora tengo otro problema

Al bajar el encabezado a traves de posicionamiento, se me ha superpuesto con la demas parte del layout... Como lo soluciono? Hago un contenedor para todo lo demas y tambien lo bajo a traves de posicionamiento relativo?

Gracias por la ayuda nuevamente.

mbavio · #8 (**permalink**) 09/01/2007, 07:33

ACTUALIZACION...

He agregado un subContainer a la demas parte del contenido y le he puesto posicionamiento relativo para bajarlo. En Firefox perfecto, en IE, desaparecen partes, muy extraño... He subido al servidor el trabajo mas reciente, para que me puedas ayudar un poquito mas... Gracias de nuevo!

mbavio · #9 (**permalink**) 09/01/2007, 08:10

Sigo con la actualizacion de mi trabajo, le he puesto 1% de altura al subContainer y se ha solucionado en IE! Bah, relativamente, porque hay algunos comportamientos extraños en el footer, en el cual no pueod poner margen inferior, en ningun navegador! Pero bueno, es un problema menor...

Mikmoro · #10 (**permalink**) 09/01/2007, 09:21

Hola otra vez. Encantado de poder ayudarte.

Lo que sigue es sencillamente una opinión:
para mi es semánticamente más correcto que el menú aparezca antes del título y el contenido de una página. Para mi funciona a modo de índice, indicándote a dónde más podrías ir. Imagina un libro que tiene unas solapas que te conducen a contenidos concretos (capítulos, bibliografías, etc.). Yo no esperaría encontrar esas solapas después del título del primer capítulo sino antes, de forma bien visible. De hecho, creo que por esa misma razón a tí te sugiere subir arriba el menú, antes del contenido. Nunca esperaría encontrar el menú principal (el índice general) en una página mezclado con el contenido de la misma, justo después del título.
Sí que es cierto que en tu caso personalmente añadiría un botón que inicara en qué sección me encuentro, aunque sea en la página principal o portada. Para mi es mejor indicar en todo momento dónde se encuentra el visitante, aunque parezca obvio que está en la portada.

Bueno, espero no molestarte con mi opinión, que para gustos están los colores. Cuando tenga una rato miraré los progresos que comentas que estás haciendo en tu página para ver si veo algo de esos pequeños problemillas.

Un saludo.

Mikel.

mbavio · #11 (**permalink**) 09/01/2007, 10:13

Personalmente, no concuerdo. Creo que el titulo vendria a ser, en el ejemplo que tu diste de un libro, la tapa del mismo. Pero bueno, como dice el dicho, sobre gustos no hay nada escrito. Sino habria que preguntarle a alguno de los gurus, Eric Meyer, Jeffrey Zeldman, jaja... que sabran ellos!

Mikmoro · #12 (**permalink**) 09/01/2007, 12:47

Bueno, es cierto, no pensé que al ser tu página principal considerarías el título como la "portada de tu libro". En ese caso sí es lógico.

Con el problemilla que tienes ahora, me parece buena idea encerrar todo el resto del contenido en un subcontainer, pero no necesitas que tenga posición relativa, porque no tiene ninguna capa absoluta dentro y en realidad es el siguiente elemento en el flujo normal del documento. De esa misma manera, no necesitas darle un desplazamiento superior, porque no ocultará nada y como ya sigue el flujo normal, puedes (y debes a mi entender) colocarla con margen superior.

Prueba con este selector:

#subContainer{
margin-top: 60px;
}

Creo que todo volverá a su sitio, incluido el pie. Ya nos cuentas.

Mikel.

mbavio · #13 (**permalink**) 10/01/2007, 06:11

Hola de nuevo. Te cuento que con margin-top no he podido solucionar el problema en IE, pero si utilizando padding-top, que en este caso vendria a ser lo mismo ya que #subContainer no tiene ningun contenido. Extrañisimo comportamiento el de IE, como siempre... Saludos.

Mikmoro · #14 (**permalink**) 10/01/2007, 13:21

He mirado tu código y creo que no te ha funcionado con margin-top porque no te has acordado de quitar el position:relative, como te comentaba en mi anterior mensaje. Al menos yo, he cogido tu código, tu css "layout.css", y poniendo este selector exactamente como te dije

#subContainer{
margin-top: 60px;
}

es decir, sin posición relativa y como margen superior, la veo perfectamente tanto en FF como en IE.

Pruébalo y me comentas (si te apetece).

Mikel.