Forum: Rails Spinoffs (closed, excessive spam) Positioning Oddities

I'm having some trouble using Element#cumulativeOffset and
Element#cumulativeScrollOffset to absolutely position an element right
under a link in certain browsers.

I made a couple of tests to illustrate the issue, which can be found
here: http://www.jeffreykeen.com/sandbox/position.

But in summary, I've found two cases which seem to be problematic.

1. If the link has a relatively positioned parent that also has a set
margin of X pixels, the position will be reported X pixels off of the
true position in IE6 & IE7.

2. If the link has an absolutely positioned parent, with a floated
sibling, the link's position will be reported incorrectly in IE6.

Can anyone provide any insight?

Jeff

Anybody run into this problem? Jeff and I work together and this one
has us stumped. The relatively positioned parent is needed to deal
with some other rendering issues in IE, so we can't exactly take that
property out. Also, the absolutely positioned element is a lightbox
style window (but draggable) which requires the absolute positioning.

For now we're just special casing these conditions, but it's getting
ugly.

-justin

Hi guys :).

Those are indeed interesting bugs.
They are most likely related to bugs with offsetLeft and offsetTop.
They appear in the my forked edge of the newer Prototype as well
(running your test page).

using e.findElement('div') helps on some because it gets the position
of the container (div, the one with the outerline around the link).

You can see how complex finding the proper offset values are my
looking at Garrett Smiths coord methods>
http://dhtmlkitchen.com/ape/example/dom/getOffsetCoords.html
view the source of position-f.js.

I will look into this some more :)
Thanks for the heads up

- JDD

Yes I tried it with his coord method and its correct in IE and All
other browsers:

<script src="APE.js" type="text/javascript" charset="utf-8"></script>
<script src="position-f.js" type="text/javascript" charset="utf-8"></
script>
...
        var position   = APE.dom.getOffsetCoords(element,
document.documentElement );
        var offset = element.cumulativeScrollOffset();

        var menuLeft = offset.left + position.x;
        var menuTop = position.y + dimensions.height;
...

you may not need the APE.js that much (I havent really checked but I
think it just uses the APE object for its namespace (I don't think it
uses any helper methods from it). (minified his code is like 3kb or
less)

I hope this helps
- JDD

actually this will work better:
APE.dom.getOffsetCoords(element); //skip the second argument