offsetLeft/Top Bug in Firefox? (value is 8)

Keith Thornhill · Aug 15, 2004

I'm trying to calculate the top and left distance from the side of the
browser of an object (either absolutely or relatively positioned) and i'm
running into a weird problem as i'm trying to make the code cross-browser.

normally i simply use the .offsetLeft/Top properties of the object to get my
numbers, and it is as simple as that. but in Firefox (v. 0.9.3), they both
return the value "8" no matter where the object appears on the page.

i've tried many ways to make this work, and always with the same results.

my current proof of concept page (included below) contains two methods (one
direct and one recursive) which both work in IE (v. 6) and Opera (v. 7.54)

any help to get this working in Firefox would be greatly appreciated.

thanks,
keith

----------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<table align="center" id="table" border="1">
<tr>
<td>test</td>
</tr>
</table>
<br>
<br>
table is
<script>
var left;
left = document.getElementById("table").offsetLeft;
document.write(left);

document.write(" and ");

var Element = document.getElementById("table");
var CalculatedTotalOffsetLeft;
CalculatedTotalOffsetLeft = 0;
while (Element.offsetParent) {
CalculatedTotalOffsetLeft += Element.offsetLeft ;
Element = Element.offsetParent ;
}
document.write(CalculatedTotalOffsetLeft);
</script>
px away from left of screen.<br>
<br>
</body>
</html>
----------------------------------------------------

Martin Honnen · Aug 16, 2004

Keith said:
I'm trying to calculate the top and left distance from the side of the
browser of an object (either absolutely or relatively positioned) and i'm
running into a weird problem as i'm trying to make the code cross-browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<table align="center" id="table" border="1">
<tr>
<td>test</td>
</tr>
</table>
<br>
<br>
table is
<script>
var left;
left = document.getElementById("table").offsetLeft;
document.write(left);

document.write(" and ");

var Element = document.getElementById("table");
var CalculatedTotalOffsetLeft;
CalculatedTotalOffsetLeft = 0;
while (Element.offsetParent) {
CalculatedTotalOffsetLeft += Element.offsetLeft ;
Element = Element.offsetParent ;
}
document.write(CalculatedTotalOffsetLeft);
</script>

What happens if you wait for the load event to fire and then check the
offset values in window.onload (not using document.write obviously)?
Does that give you the values you are looking for?

Keith Thornhill · Aug 16, 2004

When using the following code, I get the same results.

--------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body onLoad="check()">
<table align="center" id="table" border="1">
<tr>
<td>test</td>
</tr>
</table>
<br>
<br>
<script>
function check() {
var msg = "table is ";
var left;
left = document.getElementById("table").offsetLeft;
msg = msg + left;

msg = msg + " and ";

var Element = document.getElementById("table");
var CalculatedTotalOffsetLeft;
CalculatedTotalOffsetLeft = 0;
while (Element.offsetParent) {
CalculatedTotalOffsetLeft += Element.offsetLeft;
Element = Element.offsetParent;
}
msg = msg + CalculatedTotalOffsetLeft;
msg = msg + " px away from left of screen.";
alert(msg);
}
</script>
<br>
<br>
</body>
</html>

Alberto · Aug 16, 2004

I don't have firefox - it meddles with my netscape 7, dunno why...

Maybe worth a try changing
Element.offsetParent
with
Element.parentNode

lemme know if that does anything,
ciao
Alberto
http://www.unitedscripters.com/

Grant Wagner · Aug 16, 2004

Keith said:
When using the following code, I get the same results.

--------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body onLoad="check()">
<table align="center" id="table" border="1">
<tr>
<td>test</td>
</tr>
</table>
<br>
<br>
<script>
function check() {
var msg = "table is ";
var left;
left = document.getElementById("table").offsetLeft;
msg = msg + left;

msg = msg + " and ";

var Element = document.getElementById("table");
var CalculatedTotalOffsetLeft;
CalculatedTotalOffsetLeft = 0;
while (Element.offsetParent) {
CalculatedTotalOffsetLeft += Element.offsetLeft;
Element = Element.offsetParent;
}
msg = msg + CalculatedTotalOffsetLeft;
msg = msg + " px away from left of screen.";
alert(msg);
}
</script>
<br>
<br>
</body>
</html>

The problem appears to be specifically related to ALIGN="CENTER" on the
<TABLE>. If I set ALIGN="RIGHT", it reports the correct results. I managed to
resolve the problem by doing the following:

<div align="center"><table id="table" border="1">...</table></div>

Your code remains the same, but Firefox 0.9.3 now reports the correct results
(as do IE and Opera).

It may not be the solution you want, but it appears to be the only one that
works in Mozilla 1.7.2 and Firefox 0.9.3.

You may want to check bugzilla for this problem, and if you can't find it
reported, open a new bug report describing the problem and provide a
proof-of-behaviour page so it can be fixed for the next release.

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
offsetLeft bug with borders in IE when width: is specified?	10	Jan 10, 2006
Best Performance Javascript on IE6 for finding top and left usingoffsetTop and offsetLeft	31	Dec 28, 2009
How to wrap <td> content .	16	Sep 28, 2023
Help with code	0	Jun 12, 2022
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Help with my responsive home page	2	Dec 14, 2022

offsetLeft/Top Bug in Firefox? (value is 8)

Keith Thornhill

Martin Honnen

Keith Thornhill

Alberto

Grant Wagner

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads