Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    WTF is going on here?

    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
    Last edited by brothercake; 11-25-2004 at 12:04 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  2. #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,578
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm;
    Code:
                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:
    Code:
    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;
    }
    Last edited by liorean; 11-25-2004 at 12:34 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •