IE not observing offset position

Question

Hi All, I have just noticed my new script has a problem in ie 7 and 8 re: offset and position.

Everything works fine in modern browsers, but i can not account for the reason IE refuses to adhere to the offset position i specify..?

The Jquery:

$(document).ready(function() {

$("#%id%").css("margin" , 0);
var position = $("#%id%").offset();


$("<div/>", {
  "class": "doosuperoverlay"
})
.prependTo("body")
.delay(%id=delay%000)
.fadeOut(%id=fadeout%000);



var orgStackWidth = $("#%id%").width();
var tempClone = $("#%id%").clone();
$(tempClone).css({
"width" : orgStackWidth + "px",
"text-align" : "left"
});
$(tempClone).appendTo(".doosuperoverlay").css(position)
.delay(%id=delay%000)
.fadeOut(%id=fadeout%000);


});

There is a working demo page setup here

Solved: The answer lay in this portion of the script:

var orgStackWidth = $("#%id%").width();
var tempClone = $("#%id%").clone();
$(tempClone).css({
"position" : "relative",
"width" : orgStackWidth + "px",
"text-align" : "left"
});

The addition of position:relative to the temp clone sorted ie issue out. Thanks you all.

Answer 1

offset() returns an object containing the properties top and left.

so replace

$(tempClone).prependTo(".doosuperoverlay").css(position)
.animate({opacity: 1.0}, %id=delay%000)
.fadeOut(%id=fadeout%000);

with

$(tempClone).prependTo(".doosuperoverlay").css({top: position.top, left: position.left})
.animate({opacity: 1.0}, %id=delay%000)
.fadeOut(%id=fadeout%000);

Think that is gonna work.