Firefox offsetParent woes

Geoffrey Summerhayes · Feb 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?

David Mark · Feb 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;...'>

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.

Geoffrey Summerhayes · Feb 12, 2008

The "display:block" rule is redundant here.

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

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.

David Mark · Feb 12, 2008

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.

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.

Geoffrey Summerhayes · Feb 12, 2008

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.

David Mark · Feb 12, 2008

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.

Geoffrey Summerhayes · Feb 13, 2008

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.

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...

dhtml · Feb 13, 2008

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

You can use position: relative for the div.

Yep.

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/tests/dom/inline-offsetTop.html

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

Could prob use some help.

Garrett

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Image shifts to the right when export the page to pdf	4	May 5, 2023
How to have two html audio players on one page?	0	May 3, 2022
Help needed with thank you message	5	Sep 11, 2021
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023

Firefox offsetParent woes

Geoffrey Summerhayes

David Mark

Geoffrey Summerhayes

David Mark

Geoffrey Summerhayes

David Mark

Geoffrey Summerhayes

dhtml

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads