[JS/CSS] IE Positioning -.-

[Invent]

Hi,

I have a script which has a "container" div which holds many DIVs which are position "relatively". This is so that I can do things such as "top: 1px; left: 1px;" which means it will be 1px; inside the container DIV. (Where as if it was absolutely positioned, it would be 1px inside the whole page).

Anyway, I also have a Javascript code which upon request creates a NEW div layer and inserts it into the container DIV, my problem is in IE the div ends up going say 1px inside the whole page, not 1px inside the container DIV.

In Firefox, it works perfectly, it only messes up in IE.

The code for my insertation is:


function place_sticker(id, div) {

var qs = "selectedStickerId=" + id + "&div=" + div;


/* {

}*/

new Ajax.Request("place_sticker.php", {
parameters: qs, evalScripts: true,
onSuccess: function(t, jsonObj) {

new Insertion.Top("playground", t.responseText);
Effect.Appear("sticker-" + id);

}
}
);

}
(Note, I'm using the Scriptaculous library for the JS).

The page which it grabs is:


<div id="sticker-<?php echo("".$_REQUEST["selectedStickerId"].""); ?>" title="<?php echo("".$_REQUEST["selectedStickerId"].""); ?>" class="<?php echo("".$_REQUEST["div"].""); ?>" style="position: relative; left: 1px; top: 1px; z-index: 0; display: none;" onClick="zIndex(this);"><img src="store/images/delete_entry_button.gif" align="right" href="#" onclick="remove_sticker('sticker-<?php echo("".$_REQUEST["selectedStickerId"].""); ?>');" /></div>

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[

new Draggable('sticker-<?php echo("".$_REQUEST["selectedStickerId"].""); ?>',
{

scroll:window,
revert:isNotWithinPlayground,
zIndex:'0'
}
);

Element.setStyle('sticker-<?php echo("".$_REQUEST["selectedStickerId"].""); ?>', { "position":'relative' } );
// ]]>

</script>


If you have any idea to make it position itself inside the container, I'd be very grateful!

Thanks,
Simon