Results 1 to 2 of 2

Thread: position:fixed in IE

  1. #1
    Join Date
    Nov 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default position:fixed in IE

    Hi guys,

    can anyone help me please. I used the following code to freeze the top navigation at the top while scrolling down the page:

    position: fixed;
    position: expression("absolute");
    left: 0px;
    padding: 0px;
    top: 0px;
    top: expression(eval(document.body.scrollTop));
    But for some reasen when I include the uri into the DTD:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    it's not working. Any ideas?

    Many thanks

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ekat View Post
    top: expression(eval(document.body.scrollTop));
    There's no need to use the eval function - the scrollTop property evaluates to a number - though you should append a unit.

    But for some reasen when I include the uri into the DTD:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    That's the document type declaration (DOCTYPE), not the DTD (document type definition). The declaration references a DTD. The URI that you're referring to is known as the system identifier. The quoted string before it is the public identifier (a formal public identifier, in this case).

    it's not working. Any ideas?
    IE, like some other browsers, features DOCTYPE sniffing, a rather dubious solution to a common problem: historically, documents that omitted a DOCTYPE completely, or used a Transitional FPI without a system identifier, weren't written in a way that conformed to standards. They depended on rendering errors in browsers of the day to look as the author intended. In fixing those bugs, browser vendors would break these legacy documents.

    The "solution" that is used is to intentionally break the rendering engine for documents that might need the old bugs. In "Quirks" mode, as it's known, IE 6+ considers the body element to represent the viewport, rather than the html element in "Standards" mode. IE 5.x and earlier is effectively always in "Quirks" mode.

    What you need to determine is what "mode" is used, then choose the element appropriately:

    Code:
    function getRootElement() {
        if ((typeof document.compatMode == 'string')
                && (document.compatMode.indexOf('CSS') != -1)
                && document.documentElement)
            return (this.getRootElement = function () {
                return document.documentElement;
            })();
        else if (document.body)
            return (this.getRootElement = function () {
                return document.body;
            })();
        return null;
    }
    Under "Standards" mode, IE also enforced more CSS processing requirements. This is why including the unit is also important.

    Use the following function in your expression:

    Code:
    function getScrollY() {
        var root = getRootElement();
    
        return root ? root.scrollTop : 0;
    }
    The CSS declaration itself should look like:

    Code:
    top: expression(getScrollY() + 'px');
    Hope that helps,
    Mike

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
  •