offsetTop and borders

Firefox and IE don't take the border width into account when calculating the offsetTop and offsetLeft JavaScript properties of an element.

ppknote 4/feb/06: JavaScript error in test page. Useless in IE.

Test page Workaround is included
Reported by: Chad Plummer.

(Orphaned), Explorer 5-6 Windows, Mozilla | Reported on 29 August 2005.

Atom RSS

This site heavily relies on bug reports created by its readers. Anyone can report a bug and be published.

Main navigation:

Search reports by browser:


(Add your own)

1 Posted by GĂ©rard Talbot on 5 September 2005


1- MS-Script debugger pops up complaining a "object required" at line 113 error message when I load your testcase in MSIE 6.

2- You say that MSIE 6 does not take the border width into account when calculating the offsetLeft/Top JS properties of an element. That may not be entirely true: the border width around the body element is taken into consideration when computing the offset* values.

3- MSIE 6 will report a positive offsetLeft value and offsetTop value for the body node and at the same time will report that the offsetParent is null. This is clearly an implementation bug. The definitions provided at MSDN clearly suggests that such incoherence should not exist.
I already reported this as a bug at a MSIE product feedback wiki page for IE 7 dev.

4- "Retrieves the calculated left/top position of the object relative to the layout or coordinate parent" means and refers in my mind to the padding-box, not to the border-box. Since a nested element do not overlap its own parent's border, then such assumption seems adequate, reasonable.

5- There is a need for more testing.

2 Posted by Sjoerd van der Hoorn on 21 December 2005

Another workaround for Internet Explorer: use "objectname.offsetTop + objectname.clientTop" to also take the border in account. This does not work in Firefox, since Firefox doesn't contain the .clientTop attribute.

3 Posted by Beau Hartshorne on 20 January 2006

Here are another couple test pages for this problem:

Sjoerd's workaround helps, but I think the best workaround is to avoid padding, margins, and borders or to use nested divs.

4 Posted by Mark Peterson on 2 October 2006

To find clientTop for IE and Firefox, you subtract obj.clientHeight from obj.offsetHeight and then divide by 2. This assumes that your top and bottom borders are of equal height.

var clientTop = (obj.offsetHeight - obj.clientHeight) / 2;

Post a comment

Commenting guidelines:

  1. When quoting specs, articles or your own research, please include a URL of the document.
  2. Test your stuff. When reporting browser behaviour, make sure that your report is correct.