Problema Div y Margen en IE!

[Masterock]

Bueno, no se si ya han preguntado esto, pero no se como buscarlo.

EL problema que tengo es con IE, resulta que tengo un DIV flotante hacia la izquierda, dentro de el div HEAD, y luego un DIV con un banner, de esta manera!

Código HTML:

<div id"head">
	<div style="float:left">
		Contenido y Fondo
	</div>
</div>

<div id="banner">
Banner + fondo
</div> 

Resulta que el div flotante lo tengo ligeramente traspasando el borde del head, para que el fondo de este se olculte detras del fondo del banner.

Pero resulta que en IE, el DIV flotante no se oculta detrás del div banner, si no que mueve el div banner hacia abajo

Esto solo sucede en IE, en FX y Chorme no me pasa :S

Como puedo arreglarlo para IE?!

Proyecto: facciasas.com
El problema esta en el form_login (Modulo de sección ) y el h_area (header banner)

[alexk]

????... mas codigo CSS HTML o una URL del problema o espera que kseso? pase con sus habilidiades misticas chao

[Masterock]

la pagina es facciasas.com

[kseso?]

div#login_area
flotado a la derecha y no a la izquierda.

Sin bola pero con código

[Masterock]

No, eso no me ayuda :S!

Eso solo hace que el div cambie de modo de alineación, pero no que el div de abajo (div#h_area) se ponga por encima de el.

El problema es que el div#login_area quede debajo del div#h_area, eso lo logro fácilmente en Chrome y Firefox, pero en IE8 nop, el div#h_area no queda por encima, si no que se mueve hacia abajo, osea, hacia el footer, como si el div#login_area no "flotara", por debajo de el.

Si lo abren con Chorme/Firefox VS IE8 notaran que hay una pequeña linea gris entre estos dos DIVs, pero en IE8 hay una mas grande, y es por que el div#h_area esta separado del div#login_area y no sobre el.

[kseso?]

EL flotado anterior era para colocar las imágenes grandes en su sitio (debajo en "y" del login). Ya no es necesario (o bien no me cargó bien o tocaste algo que lo arregló)

En ie8 no puedo verlo, pero sí te puedo comentar que el "z-index" sólo se puede aplicar a elementos posicionados. Y como el valor por defecto de una caja es "static" y tú no tienes declarado otro, por eso los problemas.

También deberías ver la página en ie7 (el menú desplegado queda tapado por las imágenes grandes)

Así que aplica:
#top_menu ---> position: relative; z-index: 100;
#head_log ---> position: relative;
#login_area ---> margin: 30px 0 0 0; (ajusta los 30px a tu gusto)
#h_area ---> position: relative; z-index: 10;
Creo que con eso y cuidando algunas cosillas como "24px auto auto 15px" lo corregirás.

Un saludo

[Masterock]

:D nice

te agradezco mucho por los fix! ahora se ve mucho mejor en chrome y fx, ademas del problema con ie6, aunque aun no lo pruebo, no tengo ie6 :S.

Pero el problema del ie8 aun persiste :S!!

MS i hade u

[HackmanC]

Hola,

Para IE8 podrías agregar :

Iniciado por kseso?

#h_area ---> position: relative; z-index: 10; top: -4px;

Pero no creo que sea de mucha diferencia, y no te aconsejo que lo veas con IE6 que allí si tienes un problema.

Saludos,

ps:

Por otro lado, la animación Flash consume el 100% de uno de los procesadores en mi PC con la versión 10c de Flash.

[kseso?]

Si solo tienes ese margen en ie8, corrígelo con un comentario condicional para esa versión:

Código html:

<!--[if IE 8]>
 <style type="text/css">
#h_area {margin-top: -Xpx;}
</style>
<![endif]-->
 

Asegúrate de ponerlo después de hacer la llamada a todos los estilos.

[Masterock]

Iniciado por HackmanC

Hola,

Para IE8 podrías agregar :



Pero no creo que sea de mucha diferencia, y no te aconsejo que lo veas con IE6 que allí si tienes un problema.

Saludos,

ps:

Por otro lado, la animación Flash consume el 100% de uno de los procesadores en mi PC con la versión 10c de Flash.

Iniciado por kseso?

Si solo tienes ese margen en ie8, corrígelo con un comentario condicional para esa versión:

Código html:

<!--[if IE 8]>
 <style type="text/css">
#h_area {margin-top: -Xpx;}
</style>
<![endif]-->
 

Asegúrate de ponerlo después de hacer la llamada a todos los estilos.

muchísimas gracias por su ayuda, el problema se soluciono :D!!
por otro lado, el banner flash es solo una "prueba" en realidad usare otro, aunque no se si tenga los mismos problemas!