Div con position absolute que desaparece en IE 6 y 7
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.
#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
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?
CP
Hola markshock, gracias por contestar tan rapido. Te dejo el enlace con la web . He probado a poner height:1% o 100% y nada.
markshock
quitale el width a la capa #logo....
markshock
perdon, quitale el height.... se me ha ido la olla...
CP
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
Mmm.. que extraño... mañana me lo miro mas detenidamente. Ahora mismo ya no veo nada :P
CP
Jajjaja muchas gracias, Yo estoy igual, asique lo mejor sera que mañana lo revise detenidamente. De nuevo, gracias por las molestias.: )
e-lena
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
A mi en IE7 quitandole el heigh a la capa #logo me aparece correctamente... pero CP me comento que no...
CP
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
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
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.
CP
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
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
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
Enhorabuena ;) y de nada, aquí cada uno aporta lo poquito que sabemos :P
CP
Se agradece un monton, intentare aportar tambien todo lo que pueda.
CP
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...........