IE CSS Bug - How do I maintain a position:absolute when dynamic javascript content on the page changes

Question

Hi,

I have a page where there is a column and a content div, somewhat like this:

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

With some styling I have an image that is split between the column and the content but needs to maintain the same vertical positioning so that it lines up.

Styling is similar to this:

#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;
}

This works great when content in #content is dynamically loaded before rendering. This also works great in firefox always. However, in IE6 and IE7 if I use javascript to change the content (and thus height) of #content, the images no longer line up (#column doesn't move). If I use IE Developer Bar to just update the div (say add position:absolute manually) the image jumps down and lines up again.

Is there something I am missing here?

@Ricky - Hmm, that means in this case there is no solution I think. At its best there will be a jaggedy matchup afterwards but as my content expands and contracts etc. hiding/showing doesn't work out to be practical. Still thanks for answering with the best solution.

Answer 1

Its a bug in the rendering engine. I run into it all the time. One potential way to solve it is to hide and show the div whenever you change the content (that in turn changes the height):

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

Hopefully this happens fast enough that it isn't noticeable :)

Answer 2

Thanks so much for this solution!

Answer 3

If you are worried about getting a flicker from showing and hiding divCol you can ajust another css property and it will have the same effect e.g.

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