473,550 Members | 2,573 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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>Untitl ed 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.getEle mentById("table ").offsetLe ft;
document.write( left);

document.write( " and ");

var Element = document.getEle mentById("table ");
var CalculatedTotal OffsetLeft;
CalculatedTotal OffsetLeft = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft ;
Element = Element.offsetP arent ;
}
document.write( CalculatedTotal OffsetLeft);
</script>
px away from left of screen.<br>
<br>
</body>
</html>
----------------------------------------------------
Jul 23 '05 #1
4 6788


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>Untitl ed 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.getEle mentById("table ").offsetLe ft;
document.write( left);

document.write( " and ");

var Element = document.getEle mentById("table ");
var CalculatedTotal OffsetLeft;
CalculatedTotal OffsetLeft = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft ;
Element = Element.offsetP arent ;
}
document.write( CalculatedTotal OffsetLeft);
</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>Untitl ed 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.getEle mentById("table ").offsetLe ft;
msg = msg + left;

msg = msg + " and ";

var Element = document.getEle mentById("table ");
var CalculatedTotal OffsetLeft;
CalculatedTotal OffsetLeft = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft;
Element = Element.offsetP arent;
}
msg = msg + CalculatedTotal OffsetLeft;
msg = msg + " px away from left of screen.";
alert(msg);
}
</script>
<br>
<br>
</body>
</html>
--------------------------------------------------
"Martin Honnen" <ma*******@yaho o.de> wrote in message
news:41******@o laf.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>Untitl ed 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.getEle mentById("table ").offsetLe ft;
document.write( left);

document.write( " and ");

var Element = document.getEle mentById("table ");
var CalculatedTotal OffsetLeft;
CalculatedTotal OffsetLeft = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft ;
Element = Element.offsetP arent ;
}
document.write( CalculatedTotal OffsetLeft);
</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.offsetP arent
with
Element.parentN ode

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

"Keith Thornhill" <pi*******@cox. net> ha scritto nel messaggio
news:tuQTc.2054 9$Yf6.17699@lak eread03...
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>Untitl ed 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.getEle mentById("table ").offsetLe ft;
document.write( left);

document.write( " and ");

var Element = document.getEle mentById("table ");
var CalculatedTotal OffsetLeft;
CalculatedTotal OffsetLeft = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft ;
Element = Element.offsetP arent ;
}
document.write( CalculatedTotal OffsetLeft);
</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>Untitl ed 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.getEle mentById("table ").offsetLe ft;
msg = msg + left;

msg = msg + " and ";

var Element = document.getEle mentById("table ");
var CalculatedTotal OffsetLeft;
CalculatedTotal OffsetLeft = 0;
while (Element.offset Parent) {
CalculatedTotal OffsetLeft += Element.offsetL eft;
Element = Element.offsetP arent;
}
msg = msg + CalculatedTotal OffsetLeft;
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*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2374
by: Pieter Van Waeyenberge | last post by:
Hello In the code below, theres a DIV, a TABLE and another DIV , each with an image in it. When i read out the offsetLeft/Top from imgB in the table , i get offset values relative to the containng TD ... *as it should be*, HOWEVER, the offsetLeftTop values for imgA/C in the DIVs are calulated realtive to the window border ???? is this...
11
2003
by: Saqib Ali | last post by:
Please excuse me, this is a fairly involved question that will likely require you to save the file below to a file and open it in a browser. I use Mozilla 1.5, so the problem I describe below should be reproducible with that version at least. BACKGROUND: =========== When you open this page in your browser, you will see a 4 cell table....
3
7618
by: ara.pehlivanian | last post by:
I've got a script that determines the true position of an element in the page by cycling up the .offsetParent elements all the way up to the <body> element and tallying up the .offsetLeft values returned by each element. It works fine on the major browsers (IE, Moz, NS) on PC but Safari on the Mac returns "0" for the offsetLeft right off the...
10
7711
by: Matt Kruse | last post by:
See: http://www.mattkruse.com/temp/offsetleft.html It appears that the offsetLeft value in IE6 (other versions not tested) incorrectly ignores the border width on a DIV when there is a width: property specified. Without a specified width: it gets it correct. Does anyone know 1) If this is a known bug, and if it affects any other browsers?...
2
2105
by: Gary Coutts | last post by:
Hi, I am developing a website using Visual Studio .Net 2003. When reading offsetLeft, in a javascript function, the result is fine when run under I.E. but gives wrong results when run under Firefox. The HTML and java are shown below: /-------------------------------HTML-------------------------------------------------------/
1
8714
by: Paul Nash | last post by:
This is a dropdown menu script thats works ok in IE but is not positioning properly in Firefox. m.style.pixelLeft and Top are being set to the right values. But the menu, in a div block, is being displayed as though the pixelLeft and Top are being ignored. <script type='text/javascript' > var cm=null; document.onclick = new...
2
11070
by: rohitchawla | last post by:
have a problem with this code when working in IE it gives me 0,0 coords when i use iframe tag but gives correct coords when using firefox function GetRealOffset(id) { var elem = document.getElementById(id); var leftOffset = elem.offsetLeft; var topOffset = elem.offsetTop; var parent = elem.offsetParent;
5
5465
by: montybytes | last post by:
Hi there, Although, I have already placed this question in the HTML/CSS section, perhaps it might be worthwhile asking the question here as well. I have a JavaScript function which retrieves the left-position of an Element. This JavaScript functions works in FF and IE7 but does not work in IE6, In IE6 it retrieves the wrong offsetLeft value....
3
4905
by: Nitinkcv | last post by:
Hi all, Im trying to do the following: Have 3 divs which are placed side by side. each has a two links 'left' and 'right'. Say on click of the 'left' hyperlink of the 2nd div(middle), the 1st div should take the place of the middle div, while the middle one should take the place of the 1st place. I'm using the prop offsetLeft, however...
0
7561
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7761
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7999
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6101
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5403
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5129
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
1
1978
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1094
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
801
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.