Footer esta fuera de lugar en IE7

[junihh]

Hola señores

No se por cual razon, pero el footer del site que estoy preparando se mueve fuera de su lugar en IE7 (no se si tambien en el 8), aunque tenga "clear: both;" en un div que lo antecede para mantenerlo en su lugar.

Realmente no me sorprende que IE de problemas, lo que me parece curioso es que mi diseño en IE6 se ve tal como se ve en Firefox, Safari, Opera y Chrome.

Seria posible que lo revisen y me den alguna sugerencia ???. Lo encontraran aqui.

Este es el CSS y la parte que maneja el footer es esta:

Código:

.clear {
	clear: both;
}
.siteW {
	width:831px;
}
.siteCtr {
	margin: 0px auto;
}

.ftr {
	background-color:#F3F3F3;
	width:100%;
	height:186px;
	margin-top:60px;
}
.ftr_cont {
	background:url(images/fondo_footer.gif) no-repeat;
	height:186px;
}
.ftr_cont_txt {
	padding-left:40px;
	padding-top:18px;
	font-size:10px;
	color:#9E9E9E;
	text-align:left;
	line-height:12px;
}
.ftr_cont_txt a, .ftr_cont_txt a:visited {
	color:#003C82;
	text-decoration:none;
	font-weight: normal;
}
.ftr_cont_txt a:hover, .ftr_cont_txt a:active {
	color:#F39E00;
}

Por adelantado gracias a cualquier sugerencia que me puedan ofrecer.

[WillxD]

En tu código pones

<div class="clear"> y luego el <div class="ftr">. (el .clear tiene el clear:both; pero el ftr no) Prueba agregandole.

Código:

clear:both;

a tu clase ftr

Salu2

[junihh]

Hola @WillxD y gracias por responder. Hice lo que me sugeriste, de hecho, le aplique "clear" a cada div bajo "ftr" y aun persiste el problema.

Sera que debere hacer algun hacking con JS ???, la verdad no me gustaria.

[WillxD]

Que raro, lo he vuelto a ver con el IE Tester en IE7 y le reducí el tamaño a tu web y lo volví a agrandar a 100% y se ve bien. Pero si vuelvo a entrar se vuelve a desaparecer el footer.

Prueba agregandole a tu clase siteMainDiv que es la que tiene todo el contenido y es la que está encima del footer, lo siguiente:

Código:

overflow:auto;

Salu2

[junihh]

Pues lo hice y vaya que se porta extraño. En alguna oportunidad un amigo me conto que con "overflow:auto;" podemos hacer que un div active una barra de scroll, eso fue lo que paso con el site y ahora se ven dos barras, la del navegador en si mismo y la del div.

Eso solo pasa en mi Firefox, pero en Safari, Chrome y IE6-7 no aparece la segunda barra. Por cierto, aun el footer sigue haciendo de las suyas en IE7.

[WillxD]

Me confundí, no debí decirte que agregaras overflow:auto; debe ser el stress que anda surgiendo efecto en mi xD

Creo que esta vez si di con la solución (espero sea así ) quitale el "height:100%" de tu clase siteMainDiv

y agregale

Código:

overflow:hidden;

Espero que ahora si se solucione.

Salu2

[junihh]

Tambien me parece raro. Lo mas molesto de todo es justo eso, que IE7 sea el unico con el problema, pero no asi el IE6.

Ciertamente debere hacer el hacking con JS, de todos modos muchisimas por tus consejos.

[junihh]

Iniciado por WillxD

Me confundí, no debí decirte que agregaras overflow:auto; debe ser el stress que anda surgiendo efecto en mi xD

Creo que esta vez si di con la solución (espero sea así ) quitale el "height:100%" de tu clase siteMainDiv

y agregale

Código:

overflow:hidden;

YES, YES, YES... pues eso si soluciono mi problema. Pensandolo bien, quizas "height:100%" fue el causante de mis disgustos.

Te agradezco muchisimo tu esfuerzo @WillxD. Un saludo desde Republica Dominicana, ahora a descansar tu stress