Estoy rediseñando un sitio, y topé con un problemilla cuando quise anidar una capa absoluta dentro de una relativa.
Si bien al navegar el sitio con Firefox obtengo el efecto deseado, parece que Internet Explorer interpreta mi CSS de otra forma.
Así es como se ve el sitio con FireFox 3.0, y es como quiero que se vea (marqué con un reborde verde las capas, a saber: la relativa ocupa todo el ancho de la plantilla, comenzando en la parte superior; la absoluta es la que contiene el título "POSTRES"):
Como ven, el título "POSTRES" quedó totalmente fuera de posición en IE. Esto me desorientó un poco, ya que estaba seguro de que una layer absolute dentro de una relative se puede posicionar perfectamente bien.
Como muestra el siguiente esquema, para anidar la capa absoluta dentro de la relativa, bastaría con asignarle a la absoluta un left:30px y un top:40px. Esas coordenadas serán relativas al 0,0 de la capa relativa en la que está inmersa, no importando en qué posición del documento se haya ubicado la capa relativa:
Tras googlear un rato, dí con la solución: IE se "marea" si a la capa relativa no le asignamos un height, y eso fue lo que omití. Yo tan solo había asignado el width a la capa relativa, y al no asignar el height seguramente quedó en 0px. Eso no parece ser un problema para FireFox, pero es un mundo de diferencia para Internet Explorer.
Asigné entonces un height apropiado a la capa relativa, y listo, todo comenzó a verse como quería:
jueves 30 de abril de 2009
Problema al anidar una layer absolute dentro de una layer relative en IE (Internet Explorer)
Etiquetas:
css,
diseño,
firefox,
html,
internet,
Internet Explorer,
navegadores
Suscribirse a:
Enviar comentarios (Atom)





0 comentarios:
Publicar un comentario en la entrada