Question

I use a jQuery .animate() to move an absolute positioned container. FF, IE and Opera move the container correctly to the top. With Chrome the container jumps to the top and moves down the 200px from margin.

jQuery:

$("#indexbox").animate({top: "0", marginTop: "0"}, 500);

CSS:

#indexbox {
 position: absolute;
 width: 500px;
 left: 50%;
 top: 50%;
 margin-left: -250px;
 margin-top: -200px;
}

Can anyone help?

Answer 1

If you want the element to come from below and move upwards, you shouldn’t set a negative margin-top. In my personal opinion, Chrome is the only browser with a “logical” rendering of your code.

I’ve made an example here that does what I think you want: http://jsfiddle.net/QLBvh/1/