W3C home > Mailing lists > Public > www-style@w3.org > April 2008

Re: [cssom-view] padding edge / border edge for offsetTop/offsetLeft?

From: Garrett Smith <dhtmlkitchen@gmail.com>
Date: Fri, 25 Apr 2008 19:02:01 -0700
Message-ID: <c9e12660804251902l2e1718d2rd7491a21bb2cd574@mail.gmail.com>
To: "Alan Gresley" <alan@css-class.com>
Cc: "Sylvain Galineau" <sylvaing@microsoft.com>, "Mike Wilson" <mikewse@hotmail.com>, Www-style <www-style@w3.org>

On Fri, Apr 25, 2008 at 5:35 PM, Alan Gresley <alan@css-class.com> wrote:
> Garrett Smith wrote:
>
>
> > Some confusion must have lead to Anne's assumption that hasLayout
> > determines this behavior. In fact, that claim is provably false.
> >
> > <!doctype html>
> > <style>
> >  body { margin:0 }
> >  div { border:10px solid  }
> >  div#x { border:20px solid orange; zoom:1 }
> > </style>
> > <div><div id=x></div></div>
> >
> > javascript:alert(x.offsetTop + ", " + x.currentStyle.hasLayout)
> >
> > IE7 => 10, true
> >
> > Shows that the offsetTop includes the parentNode's border-width and
> > also has a layout.
> >
>
>
>  What Anne has said is correct. You have given hasLayout to wrong element.
> HasLayout is on the child div#x instead the parent. Reverse that and you may
> see the difference.
>
>
What Anne said was "that is exactly the hasLayout bug I was trying to avoid".

The example didn't back up any claim of hasLayout. That is a useful
example though. We have a case where the element has position: static,
and its parent node has position: static, and when the parentNode has
zoom, it becomes the offsetParent.

Here is a case where hasLayout is triggered by height, not zoom. Watch
what happens:

<!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 has position relative.

Garrett

>
>  <!doctype html>
>  <style>
>  body { margin:0 }
>  div { border:10px solid; zoom:1 }
>
>  div#x { border:20px solid orange; }
>
>  </style>
>  <div><div id=x></div></div>
>
>
>  Alan
>
Received on Saturday, 26 April 2008 02:02:33 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:05 GMT