CODEWITHSUNDEEP
cssinternet-explorer-6internet-explorer-7
Matt Mitchell
Matt Mitchell

Reputation: 41871

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

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.

Upvotes: 2

Views: 1443

Answers (3)

Yousef Salimpour
Yousef Salimpour

Reputation: 714

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

Upvotes: 1

tedL
tedL

Reputation: 1

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

Upvotes: 0

Ricky
Ricky

Reputation: 5377

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

Upvotes: 3

Related Questions