Re: [cssom] Element size/positioning information

On 4/11/11, Alan Gresley <alan@css-class.com> wrote:
> On 12/04/2011 2:07 PM, Garrett Smith wrote:
>> On 4/11/11, "Gérard Talbot"<www-style@gtalbot.org>  wrote:
>
>>> There are at least 4 errors in the diagrams of this MSDN webpage:
>>>
>>> http://msdn.microsoft.com/en-us/library/ms533024.aspx
>>>
>>> 1- top and left offset properties are shown to be located between margin
>>> area and padding area: this is clearly wrong.
>>
>> There isn't any margin area; AFAICT margin could be 0.
>>
>> "The sample page contains a div element that is relatively positioned
>> on the page."
>>
>> Whether or not offsetTop includes the border width (clientTop) depends
>> on the version and mode of IE. Yeah, so you can feature test that,
>> There are other quirks with offsetTop that vary from browser to
>> browser and depend on the element (table related elements and BODY
>> tend to be problems).
>
>
> The version of IE you are referring to is IE7-

I am not referring to any version of IE.

As stated: "Whether or not offsetTop includes the border width
(clientTop) depends on the version and mode of IE." IE8 includes
border; IE9 probably does to, but can't test that now as my windows
machine died. Opera versions flip flopped and last I checked, Opera
included border top width in offsetTop.

IE7 and IE6 did not include border width. I'm fuzzy about IE5.5 and IE
quirks mode; I'm not very sure but I think that borders were NOT
included there.

and it depended on if an
> element had hasLayout=true or hasLayout=false. Surely you remember the
> discussion we had here [1].

I forgot that message but remembered what a pain the discussion was.
Anyways, the example from there, the div that has its offsetTop
calculated is calculating it not from its containing block but from
the root element (HTML).

<!doctype html>
<style>
 body { margin:0 }
 div { border:10px solid; height: 100px; }
 div#x { border:20px solid orange; position: relative }
</style>
<div><div id=x></div></div>

javascript:alert((document.getElementById('x').offsetParent.tagName) +
document.getElementById('x').offsetTop +  ", " +
document.getElementById('x').parentNode.currentStyle.hasLayout)

IE says: HTML10, true

offsetParent: HTML
offsetTop:     10
parent hasLayout: true

The element "x" has offsetTop 10 from its parent node DIV, which it
measures through the parent, which has border 10px, to the
offsetParent, HTML, resulting in 10 (from its parent).

I did not state which IE versions I tested but IIRC it was IE7 and
IE6. IIRC, that behavior was, at the time, "all IE" behavior.
Incidentally, such generalizations can't be expected hold up over
time, as IE8 and IE9 include the offset element's border in offset
calculations. I don't know because I don't have a windows machine
anymore. I can't test Opera because Opera does not provide a browser
that will run on my Mac. They don't even provide an older version of
Opera on their download page. http://www.opera.com/browser/download/

Oh well, guess its time to throw away a perfectly good computer. I
hear Ghana likes those. China, too.
-- 
Garrett

Received on Tuesday, 12 April 2011 05:55:51 UTC