View Full Version : Positioning not working as expected

08-09-2007, 05:37 AM
I have a TD that is relatively positioned into which i append an absolutely positioned DIV with top and left set to 0, with the expectation that the the inserted DIV will be layered over what is in the TD. This works perfectly in IE but does not in Mozilla. In mozilla the inserted DIV goes to the top left of the window and not the top left of the TD.

On the other hand in Mozilla if i give the absolute coordinates of the TD as the position of the inserted DIV (not 0,0) as before then the inserted DIV is layered correctly - as long as i don't resize. This behavior is as i expect.

The code below is a simple test of the above.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<table border="1" width="100%">
<td align="left" width="50%"> Overlay should happen in the other TD</td>
<td id="outer" width="50%" id="layer" style="position:relative;">
<div>This should be overlaid</div>
<input type="button" onclick="IE()" value="Works in IE not Mozilla"/>
<input type="button" onclick="Mozilla()" value="Works in Mozilla but fails when resized"/>
<input type="button" onclick="deleteImg()" value="Clear"/>

function IE()
var parentNode = document.getElementById("outer");
insertImg(0, 0, "absolute", parentNode);
function Mozilla()
var parentNode = document.getElementById("outer");
var parentPosition = findAbsolutePosition(parentNode);
insertImg(parentPosition[0], parentPosition[1], "absolute", parentNode);

function insertImg(x, y, positionType, parentNode)
var div = document.createElement("div");
div.style.position = positionType;
div.style.left = x;
div.style.top = y;
div.style.zIndex = 5;
div.id = "testLayer";
//var innerHtml = "<img src='images/Miniaturebulb.gif'/>";
var innerHtml = "<div >Lower Layer</div>";
div.innerHTML = innerHtml;

function findAbsolutePosition(obj)
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
return [curleft,curtop];

function deleteImg()
var overlay = document.getElementById("testLayer");
if(overlay != null)