Error de CSS de IE: ¿Cómo mantengo una posición: absoluta cuando cambia el contenido dinámico de JavaScript en la página?

Question

Tengo una página donde hay una columna y un div de contenido, algo así:

<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>

Con algo de estilo, tengo una imagen que está dividida entre la columna y el contenido, pero necesita mantener la misma posición vertical para que quede alineada.

El estilo es similar a este:

#column 
{
    width:150px;
    height:450px;
    left:-150px;
    bottom:-140px;
    background:url(../images/image.png) no-repeat;
    position:absolute;
    z-index:1;
}

#container 
{
   background:transparent url(../images/container.png) no-repeat scroll left bottom;
   position:relative;
   width:100px;
}

Esto funciona muy bien cuando el contenido en #content se carga dinámicamente antes de renderizar.Esto también funciona muy bien en Firefox siempre.Sin embargo, en IE6 e IE7, si uso javascript para cambiar el contenido (y por lo tanto la altura) de #content, las imágenes ya no se alinean (#column no se mueve).Si uso IE Developer Bar para actualizar el div (por ejemplo, agregar posición: absoluta manualmente), la imagen salta hacia abajo y se alinea nuevamente.

¿Hay algo que me falta aquí?

@Ricky - Hmm, eso significa que en este caso no hay solución, creo.En el mejor de los casos, habrá un enfrentamiento irregular después, pero a medida que mi contenido se expanda y contraiga, etc.ocultar/mostrar no resulta práctico.Aún así, gracias por responder con la mejor solución.

Answer 1

Es un error en el motor de renderizado.Me lo encuentro todo el tiempo.Una posible forma de resolverlo es ocultar y mostrar el div cada vez que cambies el contenido (lo que a su vez cambia la altura):

var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';

Esperemos que esto suceda lo suficientemente rápido como para que no se note :)

Answer 2

Otra solución que funcionó para mí y no tuvo ningún efecto de parpadeo fue agregar y eliminar un nombre de clase CSS ficticio, como este usando jQuery:

$(element).toggleClass('damn-you-ie')

Answer 3

Si le preocupa obtener un parpadeo al mostrar y ocultar Divcol, puede ajustar otra propiedad CSS y tendrá el mismo efecto, por ejemplo,

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';