document.body vs. document.documentElement in IE

Ahh, cross-browser fun. Even when you’re only supporting very recent browsers (my targets are IE5.5+, Moz/Firefox and Safari), there’s always cross-browser joy to be had. I was positioning a div in response to a click, and it worked just dandy in Firefox, but gave an error in IE. I was using event.pageX and event.pageY, which IE knows nothing about. I found many references that said to use event.clientX+document.body.scrollLeft, but it was clear that document.body.scrollLeft was always zero. I finally found the answer here: Event handling in the DOM Part 2- Page ³⁄₄

For IE, the above code adds the scroll offset values of both the HTML tag (represented by document.documentElement) and the BODY tag (represented by document.body). This is because IE 5.5 uses the BODY as a base for rendering and measuring offsets, as does IE 6 when in compatibility mode. But in standards-compliant mode IE 6 instead uses the HTML tag as a base.

So, if you want the document position of an event, the formula is: x = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft. (y is left as an exercise for the reader).