Firefox offsetParent woes

02-12-2008

I'm trying to select a row from a table in a 'dialog box' where the
HTML is (boiled down):

<body>
<div style='position:absolute; display:block;...'>
...other divs...
<div style='position:absolute...'>
...other divs...
<div style='display:block; overflow:auto; margin-left:auto;
margin-right:auto; width:...'>
<table style='width:100%;'>
<tr></tr>
<tr></tr>
</table>
</div>
...other divs...
</div>
</div>
</body>

Working upward through the chain of offsetParents to get
offsetTop and scrollTop works fine in IE. But FF skips the
overflow:auto div, it doesn't appear in the chain.

So, how do I get this to work correctly with IE and FF?

----
Geoff

02-12-2008

On Feb 12, 12:58*pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
> I'm trying to select a row from a table in a 'dialog box' where the
> HTML is (boiled down):
>
> <body>
> * <div style='position:absolute; display:block;...'>

The "display:block" rule is redundant here.

> * * ...other divs...
> * * <div style='position:absolute...'>
> * * * * ...other divs...
> * * * * <div style='display:block; overflow:auto; margin-left:auto;
> margin-right:auto; width:...'>
> * * * * * *<table style='width:100%;'>
> * * * * * * *<tr></tr>
> * * * * * * *<tr></tr>
> * * * * * *</table>
> * * * * </div>
> * * * * ...other divs...
> * * </div>
> * </div>
> </body>
>
> Working upward through the chain of offsetParents to get
> offsetTop and scrollTop works fine in IE. But FF skips the
> overflow:auto div, it doesn't appear in the chain.

That is because IE and FF implement offsetParent differently.

>
> So, how do I get this to work correctly with IE and FF?

Are you trying to create a generalized solution? If so, see the
parentNode property. If not, just adjust for the scrollTop/Left
properties of the known scrolling container.

02-12-2008

On Feb 12, 2:17*pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Feb 12, 12:58*pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
>
> > I'm trying to select a row from a table in a 'dialog box' where the
> > HTML is (boiled down):
>
> > <body>
> > * <div style='position:absolute; display:block;...'>
>
> The "display:block" rule is redundant here.

No big. It's coming from a combination of
stylesheet rules.

>
> > So, how do I get this to work correctly with IE and FF?
>
> Are you trying to create a generalized solution? *If so, see the
> parentNode property. *If not, just adjust for the scrollTop/Left
> properties of the known scrolling container.
>

parentNode it is then, I'm trying to get as many
generalized sol'ns as possible to sit in one file
and cut down on the amount of specific javascript
that is required.

---
Thanks,
Geoff

02-12-2008

On Feb 12, 2:38*pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
> On Feb 12, 2:17*pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> > On Feb 12, 12:58*pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
>
> > > I'm trying to select a row from a table in a 'dialog box' where the
> > > HTML is (boiled down):
>
> > > <body>
> > > * <div style='position:absolute; display:block;...'>
>
> > The "display:block" rule is redundant here.
>
> No big. It's coming from a combination of
> stylesheet rules.

I am not sure what you mean by that, but you can safely remove it from
this attribute.

>
>
>
> > > So, how do I get this to work correctly with IE and FF?
>
> > Are you trying to create a generalized solution? *If so, see the
> > parentNode property. *If not, just adjust for the scrollTop/Left
> > properties of the known scrolling container.
>
> parentNode it is then, I'm trying to get as many
> generalized sol'ns as possible to sit in one file
> and cut down on the amount of specific javascript
> that is required.

That isn't always the best solution. Realize that iterating through
parentNodes will slow down your position calculation. A generalized
offset position function should have a parameter that allows this step
to be skipped for elements that are known not to scroll. A parameter
to pass a known scrolling container (or containers) can also be used
to skip unnecessary iterations.

02-12-2008

On Feb 12, 3:43*pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> That isn't always the best solution. *Realize that iterating through
> parentNodes will slow down your position calculation. *A generalized
> offset position function should have a parameter that allows this step
> to be skipped for elements that are known not to scroll. *A parameter
> to pass a known scrolling container (or containers) can also be used
> to skip unnecessary iterations.

What the (h+e+2*hockey stick) ever is? W3 or no W3, the whole
html+css+javascript thing's still a bass-ackward, bloody mess.

The nice thing about programming is that when I have trouble
with fufilling a set of requirements well in one language I
can switch to another. Lots of fun!

But...

Thanks to incompatible browsers and everyone wanting Web apps
I'm stuck creating huge Rube Goldberg programs with lots of
little fiddly bits that are useless except on browser B vers.
2078-2092 (not counting 2082.3a, of course) Arrrrrggh!!!

Ok I feel better now. Oh, look at the pretty kitty.

----
Geoff

02-12-2008

On Feb 12, 4:36*pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
> On Feb 12, 3:43*pm, David Mark <dmark.cins...@gmail.com> wrote:
>
>
>
> > That isn't always the best solution. *Realize that iterating through
> > parentNodes will slow down your position calculation. *A generalized
> > offset position function should have a parameter that allows this step
> > to be skipped for elements that are known not to scroll. *A parameter
> > to pass a known scrolling container (or containers) can also be used
> > to skip unnecessary iterations.
>
> What the (h+e+2*hockey stick) ever is? W3 or no W3, the whole
> html+css+javascript thing's still a bass-ackward, bloody mess.

Your issue is not with any of those.

>
> The nice thing about programming is that when I have trouble
> with fufilling a set of requirements well in one language I
> can switch to another. Lots of fun!
>
> But...
>
> Thanks to incompatible browsers and everyone wanting Web apps
> I'm stuck creating huge Rube Goldberg programs with lots of
> little fiddly bits that are useless except on browser B vers.
> 2078-2092 (not counting 2082.3a, of course) Arrrrrggh!!!

There is no standard for the offsetParent property. And calculating a
(correct) absolute offset from the root of the document is difficult.
In your case, it can be avoided. Assuming you wish to position an
element over a row in the table, you can simply use position:relative
on the scrolling div and make the element to overlay a child of the
div with position:absolute. Then you need only compute the position
relative to the div. This will be much faster and will avoid numerous
pitfalls. For the most consistent results, with the least amount of
feature testing, do not put a border on the scrolling element (Opera
will count it in offsetLeft/Top, but others will not.)

>
> Ok I feel better now. Oh, look at the pretty kitty.

You sound as if you need a vacation from browser scripting.

02-13-2008

On Feb 12, 5:57*pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Feb 12, 4:36*pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
>
> There is no standard for the offsetParent property. *And calculating a
> (correct) absolute offset from the root of the document is difficult.
> In your case, it can be avoided. *Assuming you wish to position an
> element over a row in the table, you can simply use position:relative
> on the scrolling div and make the element to overlay a child of the
> div with position:absolute. *Then you need only compute the position
> relative to the div. *This will be much faster and will avoid numerous
> pitfalls. *For the most consistent results, with the least amount of
> feature testing, do not put a border on the scrolling element (Opera
> will count it in offsetLeft/Top, but others will not.)

Thx, I'll look into it when I get to work.

> > Ok I feel better now. Oh, look at the pretty kitty.
>
> You sound as if you need a vacation from browser scripting.

No, just picked a bad day to give up smoking, drinking, and
sniffing glue...

----
Geoff

02-13-2008

On Feb 12, 12:43 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Feb 12, 2:38 pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
>
> > On Feb 12, 2:17 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> > > On Feb 12, 12:58 pm, Geoffrey Summerhayes <sumr...@gmail.com> wrote:
>
> > > > I'm trying to select a row from a table in a 'dialog box' where the
> > > > HTML is (boiled down):
>
> > > > <body>
> > > > <div style='position:absolute; display:block;...'>
>
> > > The "display:block" rule is redundant here.
>
> > No big. It's coming from a combination of
> > stylesheet rules.
>
> I am not sure what you mean by that, but you can safely remove it from
> this attribute.
>
>
>
> > > > So, how do I get this to work correctly with IE and FF?
>
You can use position: relative for the div.

> > > Are you trying to create a generalized solution? If so, see the
> > > parentNode property. If not, just adjust for the scrollTop/Left
> > > properties of the known scrolling container.
>
Yep.

> > parentNode it is then, I'm trying to get as many
> > generalized sol'ns as possible to sit in one file
> > and cut down on the amount of specific javascript
> > that is required.
>
> That isn't always the best solution. Realize that iterating through
> parentNodes will slow down your position calculation. A generalized
> offset position function should have a parameter that allows this step
> to be skipped for elements that are known not to scroll. A parameter
> to pass a known scrolling container (or containers) can also be used
> to skip unnecessary iterations.

By specifying a common container it can be more efficient.

getOffsetCoords(el, cont) {

}

This link may be helpful:
http://dhtmlkitchen.com/ape/test/tes...offsetTop.html

Anne VK is trying to standardize these:
http://dev.w3.org/csswg/cssom-view/#...ementfrompoint

Could prob use some help.

Garrett

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
No offsetParent in Firefox?	webEater	Javascript	5	12-21-2006 11:29 AM
Firefox DOM -- offsetParent vs parentNode	amattie@gmail.com	Javascript	2	10-27-2006 04:16 PM
Compatibility problems with offsetParent and offsetWidth	Ned Baldessin	Javascript	1	03-03-2005 01:23 AM
Safari offsetParent/offsetLeft Problem!	ara.pehlivanian@gmail.com	Javascript	3	01-13-2005 11:12 PM
div - position - offsetParent	Vittore Zen	Javascript	1	11-04-2004 11:55 AM