We want to dynamically show an image below a span html element.
The javascript creates a div element, than assigns new offsets using jQuery offset() and then appends the div to document.
It worked as expected in FireFox, but moved the new element to the bottom of the page in IE.
I found, that if I will call offset after document.body.appendChild, it will assign values correctly.
In the test page below if offset is called after document.body.appendChild,
new img assigned left: -8, top: 110
img left: -8, top: 110 -expected
If offset is called before document.body.appendChild,
new img assigned left: -8, top: 110
img left: 0, top: 214 -wrong
The test page OffsetAfterAppend.htm: <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p style="height:"100px">Offsets to show</p>
<p id="currentP"> Hello <span id="curr" style="background-color:Green">span to be above the image </span></p>
<p></p>
<script>
var p = $("p:first");
var s = $("span:last");
var currentOffset = s.offset();
p.html("span left: " + currentOffset.left + ", top: " + currentOffset.top);
var currentHeight = 20;
YOffset = 40;
XOffset = -55;
sImageURL = "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif";
var divMapContainer = document.createElement('div');
var imgMap = document.createElement('img');
$(imgMap).attr('src', sImageURL);
$(imgMap).attr('alt', '');
$(divMapContainer).append($(imgMap));
newLeft = currentOffset.left + XOffset;
newTop = currentOffset.top + currentHeight + YOffset;
p.html(p.html() + "<BR/>new img assigned left: " + newLeft + ", top: " + newTop);
//$(divMapContainer).offset({ top: newTop, left: newLeft }); document.body.appendChild(divMapContainer);
$(divMapContainer).offset({ top: newTop, left: newLeft });
var img = $("img:last"); var imgOffset = img.offset();
p.html(p.html() + "<BR/>img left: " + imgOffset.left + ", top: " + imgOffset.top)
</script>
</body>
</html>