Results 1 to 4 of 4

Thread: [CSS] Fixed position crossbrowser: addition

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default [CSS] Fixed position crossbrowser: addition

    1) CODE TITLE: Fixed position crossbrowser: addition

    2) AUTHOR NAME/NOTES: Arie Molendijk

    3) DESCRIPTION: Emulating 'position: fixed' in IE with IE-expressions that are inherently mode-independent.

    4) INFO: After writing these pages on emulating 'position: fixed' in IE I found a method for fixing elements (with the help of IE-expressions) that does not require checking the mode (quirks or standard) of the page. It must be preferred to what I proposed on the above link, because it's simpler. Both document.body and document.documentElement can indeed be replaced with offsetParent.
    Css:
    Code:
    .X (for class) or #X (for unique ID) {
    position: absolute; 
    top: expression(offsetParent.scrollTop + some_value_1 + 'px');
    left: expression(offsetParent.scrollLeft + some_value_2 + 'px');
    }
    If we want the element to be fixed at the bottom of the page, for instance, we write:
    top: expression(offsetParent.scrollTop -3 + (offsetParent.clientHeight-this.clientHeight) +'px' );
    (The small negative number is needed to avoid endless scrolling).
    ---
    Arie Molendijk
    Last edited by molendijk; 05-26-2008 at 10:50 AM. Reason: Correction

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Edit: sorry, what I wrote first doesn't hold any more, because I modified the post above.
    ---
    Arie.
    Last edited by molendijk; 05-26-2008 at 10:52 AM. Reason: Correction

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    That's actually not as effective though. If you have nested elements the offsetParent may be one of the element's more immediate containing elements, if so - the math and/or the actually positioning (visa vis appearing fixed) may not work out as well.

    With certain types of nesting even going directly for the body/documentElement will not work out the same as position:fixed; does in the browsers that support it. But it will be more accurate than the offsetParent method you've just outlined, which can fail to fix the element at all, while the body/documentElement method will at least still fix the element, just not in the location that corresponds to where it would be in a browser supporting fixed positioning. Adjustments can be made (interestingly enough, also involving the offsetParent would be one way) so that it does, not so with offsetParent alone.

    Consider trying to mimic the fixed positioning here:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .X {
    position:fixed;
    top:0;
    left:100px;
    }
    </style>
    </head>
    <body>
    <div>
    More
    </div>
    <div>
    Lo
    <div style="position:relative;">
    <table>
    <tr>
    <td><div class="X">
    Hi
    </div></td>
          </tr>
          </table>
          
    </div>
    </div>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    <p>something</p>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,396
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Thanks, John (I just returned from a holiday and found your comment).
    It appears that the offsetParent-method doesn't work if it's done in the scope of 'position absolute' or 'position: relative'. If that's the case, then we should just put the elements we want to 'fix' in IE<7 outside those positions.
    ===
    Arie.

Bookmarks

Posting Permissions

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