Foros Programación Cliente
Div con position absolute que desaparece en IE 6 y 7
18 18 Respuestas Jueves 1 de julio, 2010
Hola,
Tengo un problema con un div que tengo posicionado con absolute, en firefox y ie8 se ve correctamente pero en ie6 y 7 desaparece. He estado buscando por internet informacion para ver donde esta el problema pero no encuentro nada que me ayude.
He utilizado ietester para comprobar las diferentes versiones de ie, supongo que sera fiel a lo que se veria si tuviera dichos navegadores instalados en el ordenador.
Os dejo con el codigo css de la cabecera que es donde esta el elemento:
El problema esta en #logo.
Un saludo.
Tengo un problema con un div que tengo posicionado con absolute, en firefox y ie8 se ve correctamente pero en ie6 y 7 desaparece. He estado buscando por internet informacion para ver donde esta el problema pero no encuentro nada que me ayude.
He utilizado ietester para comprobar las diferentes versiones de ie, supongo que sera fiel a lo que se veria si tuviera dichos navegadores instalados en el ordenador.
Os dejo con el codigo css de la cabecera que es donde esta el elemento:
El problema esta en #logo.
#cabecera{
width:900px;
position:relative;
}
#logo{
position:absolute;
width:293px;
left:25px;
top:20px;
height:1%;
}
#contacto{
width:300px;
float:right;
font: italic 2.0em Arial, Helvetica, sans-serif;
color:#ccc;
text-align:right;
margin:20px 60px 10px 0 !important;
margin:20px 30px 10px 0;
}
.telefono{
font: italic 1.6em Arial, Helvetica, sans-serif;
color:#F07611;
}
#fotocabecera{
float:left;
width:900px;
height:229px;
background:url(../imagenes/cabecera.jpg) no-repeat;
}Un saludo.
-
markshock
Registrado desde 21/03/05 / Número de posts: 780
Así sin ver como los has colocado con las capas es algo complicado, pero has probado de ponerle un height a #cabecera... a veces parece como si no estuviera la capa pero en realidad si que esta, solo que no se ve..
Podrías poner un enlace de demo?Desarrollo web, servicios integrales en internet
Work: http://www.estadoactivo.com
Yo: http://www.marctorres.es
Blog: http://www.marc-torres.com -
markshock
Registrado desde 21/03/05 / Número de posts: 780
quitale el width a la capa #logo....Desarrollo web, servicios integrales en internet
Work: http://www.estadoactivo.com
Yo: http://www.marctorres.es
Blog: http://www.marc-torres.com -
markshock
Registrado desde 21/03/05 / Número de posts: 780
perdon, quitale el height.... se me ha ido la olla...Desarrollo web, servicios integrales en internet
Work: http://www.estadoactivo.com
Yo: http://www.marctorres.es
Blog: http://www.marc-torres.com -
CP
Registrado desde 24/09/08 / Número de posts: 21
Nada he quitado el height a la capa logo y sige desaparecida dicha capa. El height le puse porque leyendo en foros vi un tema parecido al mio y lo solucionaba poniendo un height . -
markshock
Registrado desde 21/03/05 / Número de posts: 780
Mmm.. que extraño... mañana me lo miro mas detenidamente. Ahora mismo ya no veo nada :PDesarrollo web, servicios integrales en internet
Work: http://www.estadoactivo.com
Yo: http://www.marctorres.es
Blog: http://www.marc-torres.com -
CP
Registrado desde 24/09/08 / Número de posts: 21
Jajjaja muchas gracias, Yo estoy igual, asique lo mejor sera que mañana lo revise detenidamente. De nuevo, gracias por las molestias.: )
-
e-lena
Registrado desde 07/09/09 / Número de posts: 63
Antes de nada os comento que a mí me aparece bien en IE7, aunque no en IE6.
El problema por lo visto es un bug de IE6 cuando se tiene un elemento posicionado en absoluto al lado de uno que está flotado.
Os dejo un enlace por si os sirve de ayuda : http://www.brunildo.org/test/IE_raf3.html
Yo para evitar problemas de este tipo quitaba el position absolute y posicionaba el logo a base de márgenes/paddings (incluso tal vez con un float:left), aunque lo mismo no es la mejor opción para lo que buscas CP.
-
markshock
Registrado desde 21/03/05 / Número de posts: 780
A mi en IE7 quitandole el heigh a la capa #logo me aparece correctamente... pero CP me comento que no...Desarrollo web, servicios integrales en internet
Work: http://www.estadoactivo.com
Yo: http://www.marctorres.es
Blog: http://www.marc-torres.com -
CP
Registrado desde 24/09/08 / Número de posts: 21
Cierto, quitandole el heigh ya me aparece correctamente en ie7. Voy a mirar el enlace que ha puesto e-lena y si no encuentro solucion probare a colocarlo de otra manera. Muchas gracias a los dos.
-
e-lena
Registrado desde 07/09/09 / Número de posts: 63
Oye markshock una preguntita, cómo editas el HTML/CSS on-line en IE? Para FF conozco Firebug y WebDeveloper pero no conozco nada para IE del mismo tipo....
-
markshock
Registrado desde 21/03/05 / Número de posts: 780
El IE8 si presionas F12, se te baré como un firebug, donde puedes cambiar el motor por el del IE7 para ver la web en IE7 y donde puedes hacer una edición online como en Firebug.
Eso si, firebug es mucho mejor, pero para 4 tonterías está bien.Desarrollo web, servicios integrales en internet
Work: http://www.estadoactivo.com
Yo: http://www.marctorres.es
Blog: http://www.marc-torres.com -
CP
Registrado desde 24/09/08 / Número de posts: 21
He probado a posicionar esa capa con float:left y con padding pero lo que me hace es desplazarme la capa de abajo y yo lo que quiero es ponerla encima. Tambien he probado a ponerla relativa y z-index:2 y luego con top y left moverla pero me crea un espacio bastante grande encima de la cabecera eso si de esta forma si que se me ve en ie6 si fuese capaz de quitar ese espacio que me crea me valdria asi. Voy a seguir dandole vueltas.
Por cierto yo tambien estoy igual no se como se edita HTML/CSS online en IE para FF uso lo mismo. -
e-lena
Registrado desde 07/09/09 / Número de posts: 63
Buenas CP!
El espacio en blanco que te crea es por el position relative, que mantiene el espacio que debería ocupar la imagen si no se hubiese desplazado. Para que no se deje ese espacio debe usarse el absolute, pero tiene el bug que comentamos en IE6.
Y la opción del float left en la capa logo no te funciona porque la capa de fotocabecera también está flotada a la izquierda, tendrías que eliminar esta propiedad (que además creo que en este caso no te sirve de mucho).
Yo personalmente usaría el mismo "protocolo" tanto para la capa de logo como para la de contacto, es decir, si utilizas posicionamiento en una, utilizalo también en la otra, y si usas el float en una pues lo mismo. Creo que te ahorrarás follones :) -
CP
Registrado desde 24/09/08 / Número de posts: 21
Al final he utilizado posicionamiento en todas las capas y problemas resuelto, ya se ve correctamente en todas las versiones de ie. Elimine tambien el float de la #fotocabecera que como bien dices de poco servia y todo correcto. Muchas gracias por la ayuda y las molestias.
Saludos. -
markshock
Registrado desde 21/03/05 / Número de posts: 780
Enhorabuena ;) y de nada, aquí cada uno aporta lo poquito que sabemos :PDesarrollo web, servicios integrales en internet
Work: http://www.estadoactivo.com
Yo: http://www.marctorres.es
Blog: http://www.marc-torres.com -
CP
Registrado desde 24/09/08 / Número de posts: 21
Se agradece un monton, intentare aportar tambien todo lo que pueda.
-
CP
Registrado desde 24/09/08 / Número de posts: 21
Una ultima pregunta, ¿es posible validar un enlace que lleva a un mapa de google? He puesto un enlace a un mapa de google y en el validador de xhtml me da 39 errores. No se si habra otra forma de enlazarlos que no sea la direccion que te dan ellos para enlazar del tipo:
http://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=Avenida+de+Francisco+Aguirre,+Talavera+250%E2%80...........
Áreas Domestika
- Diseño (gráfico, web, industrial, producto)
- Programación (cliente, servidor, accesibilidad)
- Ilustración (autores, inspiración, técnicas)
- Fotografía (técnica, equipo, autores)
- Motion Graphics (showreels, software, estudios)
- Publicidad (campañas, anuncios, ideas)
- Informática (software, hardware, trucos)
- 3D (técnicas, iluminación, modelado)
- Experiencia de Usuario (usabilidad, AI, HCI)
- Cine, vídeo y televisión (críticas, producción)
- Música y Audio (sonidos, loops, discos)
- Espacios (arquitectura, interiorismo)