Elements positioned relatively don't move when the DOM is updated (IE6 and IE7)

Question

I have a form with a few fieldsets. One fieldset has a table of time preferences set by the user. The user can add and delete time preferences. When they add a row, a table row is dynamically inserted into the DOM using a jQuery append().

The issue is that in IE6 and IE7 any relatively positioned elements on the page do not "bump" down when the new table rows are added. Furthermore, they don't move when table rows are deleted either. They are kind of just stuck in their spots.

This would be relatively minor, but each fieldset is relatively positioned in order to avoid the IE background overflow issue with fieldsets. Therefore, the form likes quite bad after one adds two or more rows to the table.

Here is the CSS being applied to the fieldsets:

form.pancake fieldset {
    position: relative;
    margin-top: 1.5em;
    padding-top: 1.5em;
}
form.pancake fieldset legend {
    position: absolute;
    top: -0.5em;
    left: 0.5em;
}

When the position: relative is removed from the stylesheet, the dynamically added rows work perfectly and the content moves down as appropriate.

Any help is much appreciated.

Answer 1

Yeah IE is a real pain when it comes to this. I found that I actually had to force it to redraw the DOM element inorder to get it to move. How I did this was to very quickly hide and show the parent object in your case it sounds like the parent to your row. This is not the most elegant solution, but it does the job.

In my case I used jQuery to get the job done.

var forceRedraw = function(obj) {
 /// <summary>Forces a redraw of passed objects.</summary>
 /// <param name="obj" type="jQuery" optional="false">The object for force the redraw on.</param>

 obj = $(obj);

 // force IE to redraw the obj
 if (jQuery.browser.msie) {
  obj.css("display", "none");
  obj.css("display", "block");
 }
};

Answer 2

I recently encountered the same problem. I ended up finding that this only happened when my relatively positioned element was contained within another relatively positioned element.

Although it wasn't possible for me to change the positioning style of the element itself, I was able to remove position:relative from the containing element, and it solved the problem. This might be a good alternative solution, especially on a page with lots of actions that could cause elements to move.