I have two div elements that are twins (i.e. their dimensions and contents are identical). I want to move of those div-s over another, so that their corners are at exactly the same coordinates. What I try to do is:
var offset = $('div#placeholder').offset();
$('div#overlay').css('position', 'absolute').css('left', offset.left + 'px').css('top', offset.top + 'px')
— but this causes the overlay to be exactly (or almost exactly, taking subpixel accuracy into account) 16px below the placeholder (below, i.e. overlay_top = placeholder_top + 16px).
I’m aware that offset() gives position relative to the document, and position: absolute sets position relative to body element, but compensating for body offset() doesn’t help much (I’m getting 8px offset, equal to margins):
offset.top -= $('body').offset().top;
offset.left -= $('body').offset().left;
Also, compensating for body margins (in case they were different that offset() didn’t help, as they were set to 8px).
Does somebody know what I’m doing wrong here?
UPDATE: Take a look at here – I’m getting the same result in FireFox 3.6.3 and Opera 10.10.
I’m suspicious that you have some CSS rule being applied based on a class/name/element type in the stylesheet. I suggest that you try setting margin/padding on the element to 0 via javascript. You might also want to use WebDeveloper or FireBug and inspect the computed styles on the element after repositioning to see what styles are being applied and from where.