Elements Positioned Relatively Don't Move When The DOM Is Updated (IE6 And IE7)

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

Solution 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");
    }
};

Solution 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.