Problema de height con IE6

[gVenom]

Saludos.

Tengo un problema raro y no lo he podido corregir. En esta página pueden ver a que me refiero, eso si, con IE6:

http://blessingwave.org/

Como verán, cuando ya se termina el contenido de la página, el div "content", cuyo css es este:

Código css:

#content{
    position:relative;
    top:-550px;
    width:849px;
    height:300px;
}
 

sigue creciendo, como si hubeise algo mas ahi y no entiendo porque. Cuando comence esta página, use mucho las posiciones relativas ( que ya me corrigieron hace poco), asi que supuse que ese era el problema, pero se me desacomoda la cabecera si no las uso, mas bien, aun no soy capaz de organizar los elementos como se debe.

Pueden ver los css completos en http://blessingwave.org/css/
trabajo una hoja aparte para el IE6, en firefox y opera se ve bien.

Código CSS IE6:

#container{
    position:relative;
    margin:0 auto;
    width:860px;
    height:700px;
}
#header{
    width:857px;
    height:305px;
}
#menu{
 
    height:130px;
    width:190px;
    top:-162px;
    left:50px;
}
ul.menu{
 width:180px;
    list-style: none;
    margin: 0; padding: 0;
    border-bottom: 1px solid #000;
    border-right: 2px solid #999999;
}
ul.menu li {
  border-bottom: 1px solid #7C7C7C;
  border-top: 1px solid #000;
  font-family:"Tahoma", Arial, Century Schoolbook;
  font-size:14px;
  color:#fff;
  font-weight:bold;
  padding-top:6px;
  width:180px;
  display:block;
}
 
 
#pic-header{
 
    width:304px;
    height:206px;
    top:-331px;
    left:252px; 
}
#pic2{
 
    top:-534px;
    left:556px;
    width:258px;
    height:166px;
}   
#barra1{ height:37px; width:251px; top:-537px}
#barra2{  height:37px; width:291px; top:-575px; left:557px}
 
#content{
    position:relative;
    top:-550px;
    width:849px;
    height:300px;
}
#left_content{
    margin:0 10px 10px 15px;
    width:200px;
    float:left}
    
#center_content{
    margin:0 10px 10px 0;
    width:270px;
    float:left} 
    
#right_content{
    margin:10px 10px 10px 0;
    padding-left:15px;
    width:300px;
    float:right}    
 
#bottom{
    top:-550px;
    background-image:url(../images/bottom.gif);
    width:850px;
    height:35px;
    line-height:25px;
    clear:both;
}
 

[Mikmoro]

El asunto es este:
1.- cuando un contenedor sólo tiene dentro otros flotados no crece tanto como ellos, pero en IE6 sí lo hace, así que en primer lugar tu contenedor es tan grande como todo lo que contiene.
2.- cuando desplazas una caja con posición relativa, la mueves de su sitio, pero en realidad sigue ocupando el mismo espacio que antes de moverla.

Conclusión: en IE6, tienes una caja que mide tanto como su contenido, que luego has desplazado hacia arriba -550px, pero sigue ocupando su antiguo sitio. Quita el -550 y verás lo que pasa.

[gVenom]

Si ya lo habia pensado asi, segun lei en tu guia, pero si le quito el -550 se va el contenido abajo, en la posicion que deberia estar, y el vacio queda arriba.

[Mikmoro]

Iniciado por gVenom

Si ya lo habia pensado asi, segun lei en tu guia, pero si le quito el -550 se va el contenido abajo, en la posicion que deberia estar, y el vacio queda arriba.

Me refiero a que lo quites para ver que efectivamente es ese el problema.

Ahora, ¿cuál es la solución? pues no sé, porque no he mirado el código, pero si necesitas ese desplazamiento negativo tan bestia para colocar eso ahí algo no está bien desde el principio. Debes procurar que las cosas se coloquen de forma natural donde les corresponde según el flujo del documento, y sólo cuando no sea esto posible, buscar otras soluciones. Creo que tienes poco elementos como para poder posicionar las cosas sin tanta dificultad.

[gVenom]

yo estoy casi seguro que la cabecera es el problema, porque me costo horrores acomodar eso con divs, creo que mejor le hago una tabla a la cabecera, el resto es más fácil con div.

Bueno gracias.

[jomaruro]

Hola:

Iniciado por gVenom

creo que mejor le hago una tabla a la cabecera

Eso sería rendirse y no aprender, create, poco a poco, una página aparte con otra hoja de estilos y vas viendo lo que ocurre.

Saludos.

[gVenom]

Iniciado por jomaruro

Eso sería rendirse y no aprender

Hola jomaruro, si supieras cuanto tiempo llevo dandole a ese detalle. Mira que si ya vi que es la cabecera, que se la quite y todo se fue a su posicion debida.

Pero no veo el problema. Comence la hoja de IE6 aparte de uno en uno y cuando lo probe con el resto de elementos me hizo lo mismo. Le quite todas las posiciones relativas y corregi parametros y nada. Por eso ando por aqui jeje.