jquery .animate causes ASP.Net controls to move in I.E. 6.0

Question

I'm using the .animate function from the jquery.color.js library to highlight a label on an ASP.Net page when the value of the label changes. It works great in I.E. 7.0, but in I.E. 6.0 it makes a button control on the page change positions. Anyone know how to fix this problem?

Here is the snippet of the jquery code that causes the problem, when the .animate function is run, that's when a button on the page moves position.

    ParentItem.text("$" + itemCost);

    ParentItem.stop(true);
    ParentItem.animate({ backgroundColor: "#FFFF80"
    }, 300)
         .animate({ backgroundColor: 'white' }, 1250);

Answer 1

If having the functionality is not required in IE6 I'd just check for it and then return from that function.

    if ($.browser.msie && $.browser.version == "6.0") {
        return;
    }

Answer 2

This likely because of IE6's Double Margin bug.

See http://www.positioniseverything.net/explorer/floatIndent.html for more info.

Answer 3

"Anyone know how to fix this problem?"

ignore IE6 users ;-)

<!--[if IE 6]>
<script type="text/javascript"> 
    /*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("<script type=\"text/javascript\"   src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>"); var __noconflict = true; } 
    var IE6UPDATE_OPTIONS = {
        icons_path: "http://static.ie6update.com/hosted/ie6update/images/"
    }
</script>
<script type="text/javascript" src="http://static.ie6update.com/hosted/ie6update/ie6update.js"></script>
<![endif]-->