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

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 UTC