468,754 Members | 1,340 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,754 developers. It's quick & easy.

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

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>
----------------------------------------------------
Jul 23 '05 #1
4 6620


Keith Thornhill wrote:
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?

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2
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>
--------------------------------------------------
"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:41******@olaf.komtel.net...


Keith Thornhill wrote:
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?

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #3
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/

"Keith Thornhill" <pi*******@cox.net> ha scritto nel messaggio
news:tuQTc.20549$Yf6.17699@lakeread03...
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>
----------------------------------------------------

Jul 23 '05 #4
Keith Thornhill wrote:
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.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by ara.pehlivanian | last post: by
2 posts views Thread by Gary Coutts | last post: by
1 post views Thread by Paul Nash | last post: by
3 posts views Thread by Nitinkcv | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.