Capa con p. absoluto que no se ve en IE
Buenas.
Tengo un div con posicionamiento absoluto que se ve correctamente en FF pero que no aparece en pantalla con IE. El CSS de la capa en cuestión es:
<code>div#consola
{
position: absolute;
margin-left: 178px;
margin-top: 139px;
}</code>
Podéis comparar navegadores con un par de ejemplos de esto, en los que el contenido del div es o una imagen. En ninguno de los dos casos se ve la capa en IE.
Ayer estuve todo el día dándole vueltas al tema, pero no saqué nada en claro. Podría reestructurarlo todo para que no hiciera falta dar posicionamiento absoluto al div rebelde, pero me supondría cambiar todas las plantillas que ya están montadas.
Se agradece cualquier ayuda.
Editado: Las prisas del cliente me han hecho rendirme: he dejado de buscar el fallo y me he lanzado a reestructurar de nuevo las plantillas, planteándolas de tal forma que ninguna capa necesite posicionamiento absoluto. Ya está listo, por eso he desactivado los enlaces a las plantillas que mostraban el error. ¡Muchas gracias por las respuestas!
fernandodelavega
Gracias por las respuestas. Orange, arriba aparecen dos enlaces a las plantillas que dan problemas.
Buzo
Podéis comparar navegadores con un par de ejemplos de esto, en los que el contenido del div es <a href="http://www.elgipiese.es/plantillas/portada.html" target="_blank">un swf</a> o <a href="http://www.elgipiese.es/plantillas/listado_fotos_consola.html" target="_blank">una imagen</a> En ninguno de los dos casos se ve la capa en IE.
serobe
Debes posicionar aquella capa que deseas marcar como referencia para posicionar la otra en relativo. Osea la capa que te falla debes colocarla tal y como te dice orange(position:absolute; top:x; y left:x;) y la inmediatamente superior en relative sino te ocurrirá tal y como te comenta orange que se colocara en esa posición absoluta pero tomando como referencia el body. Ya que no hay ningun otro elemento padre posicionado en relative.Ya nos dirás.
orange
Buzo
En FF, el contenido se sigue viendo pero la capa toma como referencia para posicionarse los márgenes del documento en lugar del vértice superior izquierdo de la capa contenedora. ¿Hay manera de cambiarlo?
Cuando defines el posicionamiento de un elemento como absoluto pasan 2 cosas:
- Sacas al elemento de flujo, el resto de elementos se comportan como si no existiera
- Lo posicionas respecto un eje de coordenadas cuyo punto de inicio es el primer padre que encuentre con posicionamiento absoluto o relativo. Si no has tocado el posicionamiento de ninguno de los padres el elemento se posicionará respecto al BODY de la página.
¿Por qué no cuelgas un pequeño ejemplo para que veamos qué está fallando?
fernandodelavega
Pues nada. He probado a dar a la capa ancho y alto, sólo alto y sólo ancho, pero todo sigue igual. Voy a ojear la información del enlace que pones, a ver si saco algo en claro.
pseudo
Igual estamos ante otro misterioso caso de...
http://www.satzansatz.de/cssd/onhavinglayout.html
Dale un ancho o un alto a la capa y a ver qué pasa
fernandodelavega
Orange, he cambiado el estilo de la capa por
<code>
div#consola
{
position: absolute;
left: 178px;
top: 139px;
}
</code>
En FF, el contenido se sigue viendo pero la capa toma como referencia para posicionarse los márgenes del documento en lugar del vértice superior izquierdo de la capa contenedora. ¿Hay manera de cambiarlo?
En IE, la capa sigue sin verse. Sin embargo, después de tantas pruebas y recargas, me he dado cuenta de que a veces, una de cada muchas, el contenido de la capa se hace visible en pantalla. Al actualizar se pierde. Es extraño, ¿verdad?
orange
Cuando posicionas de forma absoluta un elemento has de definir su posición a través de las propiedades top, left, bottom o right... lo del margin es un "sucio truco" que no siempre es conveniente utilizar (sobre todo si no partes de un origen conocido porque ni siquieras hayas definido top:0; left:0).
Prueba y nos cuentas, también puede ser que tu elemento esté por debajo de otro
fernandodelavega
La capa que contiene a la que tiene posicionamiento absoluto es
<code>
div#contenedor
{
width: 775px;
margin-right: auto;
margin-left: auto;
padding: 0;
}
</code>
En la estructura de la web, el div que no se ve es el primero dentro del contenedor. Después de él vienen otros, ya con posicionamiento relativo. El primero de ellos es
<code>
div#enlaces-top
{
float: left;
width: 200px;
margin: 0;
padding: 0 0 0 575px;
}
</code>
¿Sirve de ayuda?
Usuario desconocido
¿Qué tiene por encima?¿por debajo?
COmo no des más datos...