A
Andrew Poulos
The following is a test HTML page I'm using and in it I want 'drag0' and
'target0' to be, more or less, over each other with their top and left
edges aligned.
IE 7, FF 3, Opera 9, Cr 1, and Safari 4 more or less align the two
elements. For 'ol' and 'ot' they all return 204 and 99.
Whereas IE 8 is way off - for 'ol' and 'ot' it returns 126 and 156.
What gives?
Andrew Poulos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta http-equiv="Content-Style" content="text/css">
<style type="text/css">
#drag0 {
position:absolute;
border:1px solid red;
width:100px;
}
#target0 {
display: inline;
border:1px solid blue;
width:100px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var d = document.getElementById("drag0");
var t = document.getElementById("target0");
var ol = 0, ot = 0;
while (t) {
ol += t.offsetLeft;
ot += t.offsetTop;
t = t.offsetParent
}
d.style.left = ol + "px";
d.style.top = ot + "px";
alert(ol +" + "+ ot);
};
</script>
</head>
<body>
<div id="drag0">here</div>
<div style="position:absolute; left:100px; top:100px;">
<div>
<div>
This is some text <div id="target0"> </div>
</div>
</div>
</div>
</body>
</html>
'target0' to be, more or less, over each other with their top and left
edges aligned.
IE 7, FF 3, Opera 9, Cr 1, and Safari 4 more or less align the two
elements. For 'ol' and 'ot' they all return 204 and 99.
Whereas IE 8 is way off - for 'ol' and 'ot' it returns 126 and 156.
What gives?
Andrew Poulos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta http-equiv="Content-Style" content="text/css">
<style type="text/css">
#drag0 {
position:absolute;
border:1px solid red;
width:100px;
}
#target0 {
display: inline;
border:1px solid blue;
width:100px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var d = document.getElementById("drag0");
var t = document.getElementById("target0");
var ol = 0, ot = 0;
while (t) {
ol += t.offsetLeft;
ot += t.offsetTop;
t = t.offsetParent
}
d.style.left = ol + "px";
d.style.top = ot + "px";
alert(ol +" + "+ ot);
};
</script>
</head>
<body>
<div id="drag0">here</div>
<div style="position:absolute; left:100px; top:100px;">
<div>
<div>
This is some text <div id="target0"> </div>
</div>
</div>
</div>
</body>
</html>