Calculate absolute position of inline elements in IE

[Markus Fischer]

Hi,

based on http://www.faqts.com/knowledge_base/view.phtml/aid/9095/fid/128
I'm using a function to caculate the absolute position of flowed
elements, in my case inline-level elements (siehe example at the end of
the post).

The is layed out so that the two spans inside each are positioned in a
line like this:

+---------+
|some test|
|some test|
+---------+

and below is a button which trigger the calculate function. When I click
the button in firefox I get:

| span1: x = 9, y = 9, w = 57, h = 19
| span2: x = 9, y = 21, w = 57, h = 19

when I do the same in IE 6 i get:

| span1: x = 10, y = 15, w = 57, h = 19
| span2: x = 10, y = 15, w = 57, h = 19

It's ok for me that x and y are different across the two browsers.

However, that the both spans in IE 6 return me the same y values is a
problem.

Interesting is also when I test the example in IE 5.0. He gives me back
x = 10 for span1 and y = 71 for span2 .. (rest of the values are identical).

thanks for any hints,
- Markus

Example:
------------------8<--------------------------
<script type="text/javascript">
function getBoundingBox(domElement) {
var offsetWidth = domElement.offsetWidth;
var offsetHeight = domElement.offsetHeight;
for (var lx = 0, ly = 0; domElement != null;
lx += domElement.offsetLeft - domElement.scrollLeft,
ly += domElement.offsetTop - domElement.scrollTop,
domElement = domElement.offsetParent);
return {
x:lx,
y:ly,
wffsetWidth,
hffsetHeight,
toString: function() {
return "x = " + this.x + ", y = " + this.y +
", w = " + this.w + ", h = " + this.h;
}
};
}
function test() {
alert('span1: ' + getBoundingBox(document.getElementById('s1')) +
'\nspan2: ' + getBoundingBox(document.getElementById('s2')));
}
</script>
<div style="width: 65px; border: 1px solid red;">
<span id="s1">some test</span>
<span id="s2">some test</span>
</div>
<input type="button" onclick="test();" value="get bounding boxes of spans">
------------------8<--------------------------