Entrar

Problema con IE6 position: absolute

siddel77 · · Solicitar retirada
Hola, tengo una página (www.espaciosamsara.com.uy) la cual se ve perfectamente en FF, Opera, Safari e IE7+ pero en IE6 tiene un problema que supongo es relativo a la posicion de los divs que utilicé.

El html es algo así:

<body>
<div id="containter">
<div id="main">
<h1>Próximamente</h1>
<br />
<img src="img/espacio-samsara.png" title="Espacio Samsara - Inicio" alt="Logo Espacio Samsara - Inicio" />
<p>Sitio en construcción</p>
</div>

<footer>
<span>SAMSARA - Buffet Vegetariano</span><br/>
Zabala 1316 entre Sarandí y Buenos Aires<br />
Tel.: 2915 66 06 | www.espaciosamsara.com.uy
</footer>
</div>
</body>

Y el css:

body{
height: 100%;
text-align: center;
}

div#container{
height: 100%;
margin: 0px auto;
}

div#main{
position: absolute;
bottom: 63px;
left: 0px;
top: 0px;
right: 0px;
overflow: hidden;
height: auto;

background-color: #FFFFFF;
background-image: url("../img/general-bg.jpg");
background-repeat: no-repeat;
background-position: left bottom;
}

h1{
height: 40px;

background-color: #f9c12f;
background-image: url("../img/nav-bg.jpg");
background-repeat: repeat-x;

color: #bb7c09;
font-size: 24px;

text-shadow: 1px 1px 0px #ffffff;
}

footer{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;

font-size: 14px;
text-align: left;
padding-left: 10px;
color: #ffffff;
background-color:#999999;
}

footer span{
font-size: 14px;
color:#ffdf17;
background-color: transparent;
background-image: none;
}


Estoy muy tentado a no tomar en cuenta a IE6, pero me gustaría resolver esto ya que hay un porcentaje no despreciable de gente que lamentablemente todavia usa IE6.

Desde ya muchas gracias a quienes puedan ayudar :D
siddel77 · · Solicitar retirada
Me di cuenta de que no había especificado el problema :$
Lo que pasa es que el div#main que tiene la imagen de fondo se "termina" antes del footer, por lo que me queda un espacio vacío entre el div y el footer.
PD: Se que el código css esta bastante mal ordenado/optimizado, pero la verdad es que lo hice de apuro para poner al menos una página que diga, estamos en construcción.
Muchas Gracias :D
siddel77 · · Solicitar retirada
Ya lo resolví, fue una odisea, pero despues de unas 2 horas buscando en internet dí con la solución. La dejo acá para cualquiera al que le surja este mismo problema.

resulta que IE6 (creo que 7 tambien) tienen una funcion que se puede utilizar desde css para dar valores como funciones de otros valores, lo que hice fue lo siguiente: (en una hoja de estilos específica para IE6)

div#main{
height:expression(document.body.clientHeight-68);
}

Esto lo que hace es poner como altura del div la altura de la ventana del navegador menos 68 píxeles que es lo que mide el footer.

Espero que a alguien le sirva y si tienen alguna duda sobre esto simplemente pregunten.

Un saludo!
ricky · · Solicitar retirada
Amigo la verdad creo que te estas complicando mucho, creo q es una plantilla a menos q acostumbres escribir comentarios en ingles, tienes 4 hojas de estilos, condicionales para cada version de ie y hasta javascript, y para ser una portada con una barra superior y otra inferior un fondo y una imagen en el cuerpo, eso es demasiado con 6 divs y un poco de css lo pones bien en TODOS los navegadores, si es lo que creo te recomiendo que crees la plantilla tu mismo desde cero.
saludos