WTF is going on here?

[brothercake]

Yeah sorry that's such a vague title ... but basically, I'm hunting down what may or may not be a CSS or JS bug in one or more browsers ... but I can't really make head nor tail of what's going on.

Here's the URL: http://www.brothercake.com/Ref/mp-something.html

The demo page does three thing:

- click the red square and it tells you it's offset position with an iterative* function

- click the light purple square and it's undisplayed, changing the rest of the layout accordingly

- double-click the light grey central area (which is the BODY) and it becomes position:relative instead of position:static

Using Firefox and Opera 7, or Firefox and Safari, as comparitors - try playing around with that page. change the states of the test elements; get the position of the red square at various states;

Something's wrong there in Opera 7 and Safari ... probably more than one thing ... but I've lost the plot with this - I just can't work out what's happening or why.

* thanks to jkd for reminding me of the difference between recursion and iteration

[liorean]

Hmm;

            initial     pclicked        bodyclick       body&pclicked
ff1.0m      0   0       0   0           0   0           0   0
op7.6m      10  100     10  10          10  100         10  10
saf1.2      10  100     10  10          10  100         10  10
msnosx      0   0       n/a n/a         10  10          n/a n/a
ie5.2m      -10 -10     n/a n/a         0   0           n/a n/a

From the results, I read this out:

- Ff1.0m: Rendering is correct, but not offsets. It adds the offsets of div and body with both static and positioned body, and the body offset is calculated to zero. Offset values and offset parents are broken.

- Op7.6 and Saf1.2: Rendering is correct, so are offsets. It adds the offsets of div and body in both cases, and in both cases body is correctly calculated. Offset parents are broken.

- MSN/OSX: It doesn't render the p because it's empty, but if it wasn't empty you would get the same results irrespective of whether the p was clicked or not. It doesn't seem to collapse the p margin with the body margin. It adds div and html offsets if static body, div and body offsets if positioned body. Margin collapsing broken.

- Ie5.2m: Rendering is same as MSN/OSX. It adds div and body offsets in both cases, but the div is calculated to minus ten in the static case, zero in the positioned case. Offset parents, offset values and margin collapsing broken.


For testing, add a fullstop or something to the p. Also, a better getRealPosition for inspection:

function getRealPosition(a,b){
    var
        c=0;
    do
        alert(a.tagName+'\n'+(c+=b=='x'?a.offsetLeft:a.offsetTop));
    while(a=a.offsetParent);
    return c;
}