Foros del Web » Creando para Internet » CSS »

position:fixed y margin-top bug en explorer >7

Estas en el tema de position:fixed y margin-top bug en explorer >7 en el foro de CSS en Foros del Web. Buenas. Me encuentro con un problema que, según he estado viendo por ahí, es un bug de Explorer, pero que no se si existe alguna ...
  #1 (permalink)  
Antiguo 27/10/2009, 07:24
 
Fecha de Ingreso: septiembre-2008
Mensajes: 7
Antigüedad: 15 años, 7 meses
Puntos: 0
Pregunta position:fixed y margin-top bug en explorer >7

Buenas.
Me encuentro con un problema que, según he estado viendo por ahí, es un bug de Explorer, pero que no se si existe alguna regla para solucionarlo (yo no la he encontrado).

Tengo un div superior, horizontal, con position:fixed. El objetivo es que, al ser un menú, permanezca siempre arriba. El caso es que consigo que en explorer se quede fijo (cambiando el doctype) pero al colocar otro div debajo del menú, no consigo aplicarle el margen que quiero para que aparezca justo a continuación del menú.

El HTML que tengo es este:
Código:
.cabecera{width:1030px;height:60px;background:#FFF url('img/sombra_1px.png') repeat-x;background-position:bottom;position:fixed;left: 50%;margin: 60px 0 0 0;}
.contenedor_1{width:1030px;margin:0 auto;text-align:left;background:url('img/1px_fondo.jpg') repeat-x;height:374px;margin-top:60px;}
Y el HTML:
Código:
<div class="cabecera">
Prueba
</div>
<div class="contenedor_1">
  Hola
  </div>
¿¿¿Como puedo hacer para que contenedor_1 tenga un margin-top igual a la altura de la cabecera???
  #2 (permalink)  
Antiguo 27/10/2009, 07:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: position:fixed y margin-top bug en explorer >7

Supongo que te refieres a ie6, ¿cierto?
Si es así, efectivamente, no reconoce el valor 'fixed'.
Para lograr lo mismo tienes que cambiar la estructura y propiedades.
En www.araudi.net tienes algún ejemplo obra de Mikmoro. Y si hace una búsqueda en el foro, también se ha hablado del tema y aportado distintas soluciones.

2ª cuestión:
tu código:
Cita:
.cabecera{width:1030px;height:60px;background:#FFF url('img/sombra_1px.png') repeat-x;background-position:bottom;position:fixed;left: 50%;margin: 60px 0 0 0;}
.contenedor_1{width:1030px;margin:0 auto;text-align:left;background:url('img/1px_fondo.jpg') repeat-x;height:374px;margin-top:60px;}
.cabecera ha salido del flujo del documento, está ahí pero para el resto de elementos es como si no estuviese.
Según el modelo de caja estándar, tu caja .contenedor sí toma el margen superior de 60px, pero le quedan haciendo falta otros 60px (altura + margen superior de .cabecera) para no posicionarse sobre .cabecera ( y deberías añadir z-index a .cabecera)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 27/10/2009 a las 07:41
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:38.