DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore
Results found: 

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

StackOverflow https://stackoverflow.com/questions/33837

Question

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.

Solution

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 :)

If you like, leave us your opinion

Was the article helpful and is it translated correctly?

OTHER TIPS

Another workaround which worked for me and had no flickering effect was to add and remove a dummy CSS class name, like this using jQuery:

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

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 = '';

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow