Cross-Browser Element Bottom Position

Discussion in 'Javascript' started by vunet.us@gmail.com, May 4, 2007.

  1. Guest

    I have no perfect cross-browser solution to position html element on
    the bottom of the page.
    I know that with Firefox I do it as:
    position:fixed; bottom:0px;
    However, IE does not understand that. Did anyone come across this
    issue to share with me?
    Thanks you
     
    , May 4, 2007
    #1
    1. Advertising

  2. -Lost Guest

    wrote:
    > I have no perfect cross-browser solution to position html element on
    > the bottom of the page.
    > I know that with Firefox I do it as:
    > position:fixed; bottom:0px;
    > However, IE does not understand that. Did anyone come across this
    > issue to share with me?


    Yeah, Internet Explorer does not support that particular CSS declaration.

    I imagine you could position the element taking into consideration its
    height (and width if necessary), and the canvas height.

    If the canvas is 600px tall, and your element is 100px tall, then
    placement at 500px down (top: 500px;) would place it at the bottom.

    http://jibbering.com/faq/#FAQ4_9

    --
    -Lost
    Remove the extra words to reply by e-mail. Don't e-mail me. I am
    kidding. No I am not.
     
    -Lost, May 4, 2007
    #2
    1. Advertising

  3. Guest

    On May 4, 10:08 am, -Lost <> wrote:
    > wrote:
    > > I have no perfect cross-browser solution to position html element on
    > > the bottom of the page.
    > > I know that with Firefox I do it as:
    > > position:fixed; bottom:0px;
    > > However, IE does not understand that. Did anyone come across this
    > > issue to share with me?

    >
    > Yeah, Internet Explorer does not support that particular CSS declaration.
    >
    > I imagine you could position the element taking into consideration its
    > height (and width if necessary), and the canvas height.
    >
    > If the canvas is 600px tall, and your element is 100px tall, then
    > placement at 500px down (top: 500px;) would place it at the bottom.
    >
    > http://jibbering.com/faq/#FAQ4_9
    >
    > --
    > -Lost
    > Remove the extra words to reply by e-mail. Don't e-mail me. I am
    > kidding. No I am not.


    yes, that could be a way to handle.
    a great way to handle top positioning in IE is to use this in CSS:
    top:expression(this.offsetParent.scrollTop)
    position:absolute;
    i wish i could have something easy as that for bottom positioning
     
    , May 4, 2007
    #3
  4. On May 4, 8:34 am, wrote:
    > yes, that could be a way to handle.
    > a great way to handle top positioning in IE is to use this in CSS:
    > top:expression(this.offsetParent.scrollTop)
    > position:absolute;
    > i wish i could have something easy as that for bottom positioning


    position:absolite;
    top:expression(document.body.offsetHeight-this.offsetHeight)
     
    scripts.contact, May 4, 2007
    #4
  5. Guest

    On May 4, 2:26 pm, "scripts.contact" <>
    wrote:
    > On May 4, 8:34 am, wrote:
    >
    > > yes, that could be a way to handle.
    > > a great way to handle top positioning in IE is to use this in CSS:
    > > top:expression(this.offsetParent.scrollTop)
    > > position:absolute;
    > > i wish i could have something easy as that for bottom positioning

    >
    > position:absolite;
    > top:expression(document.body.offsetHeight-this.offsetHeight)


    does not work in my IE7.

    but here is what I found for mozilla-based browsers:
    body > div#myDiv{
    /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb
    4.5+, iCab, ICEbrowser */
    position: fixed;
    }
     
    , May 4, 2007
    #5
  6. Guest

    On May 4, 4:07 pm, wrote:
    > On May 4, 2:26 pm, "scripts.contact" <>
    > wrote:
    >
    > > On May 4, 8:34 am, wrote:

    >
    > > > yes, that could be a way to handle.
    > > > a great way to handle top positioning in IE is to use this in CSS:
    > > > top:expression(this.offsetParent.scrollTop)
    > > > position:absolute;
    > > > i wish i could have something easy as that for bottom positioning

    >
    > > position:absolite;
    > > top:expression(document.body.offsetHeight-this.offsetHeight)

    >
    > does not work in my IE7.
    >
    > but here is what I found for mozilla-based browsers:
    > body > div#myDiv{
    > /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb
    > 4.5+, iCab, ICEbrowser */
    > position: fixed;
    >
    > }


    <style type="text/css">
    #fixme {
    /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use
    this */
    position: absolute; right: 20px; bottom: 10px;
    }
    body > div#fixme {
    /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb
    4.5+, iCab, ICEbrowser */
    position: fixed;
    }
    </style>
    <!--[if gte IE 5.5]>
    <![if lt IE 7]>
    <style type="text/css">
    div#fixme {
    /* IE5.5+/Win - this is more specific than the IE 5.0 version */
    right: auto; bottom: auto;
    left: expression( ( -20 - fixme.offsetWidth +
    ( document.documentElement.clientWidth ?
    document.documentElement.clientWidth : document.body.clientWidth ) +
    ( ignoreMe2 = document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft : document.body.scrollLeft ) ) +
    'px' );
    top: expression( ( -10 - fixme.offsetHeight +
    ( document.documentElement.clientHeight ?
    document.documentElement.clientHeight : document.body.clientHeight ) +
    ( ignoreMe = document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop ) ) +
    'px' );
    }
    </style>
    <![endif]>
    <![endif]-->
     
    , May 4, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan
    Replies:
    1
    Views:
    8,374
    ainigma
    Apr 4, 2008
  2. Video Flyer
    Replies:
    12
    Views:
    593
    Whitecrest
    Feb 17, 2004
  3. Dave Smithz
    Replies:
    11
    Views:
    1,368
  4. Noozer
    Replies:
    1
    Views:
    7,171
    Carolyn Marenger
    Mar 13, 2006
  5. Cuthbert
    Replies:
    8
    Views:
    437
    Ancient_Hacker
    Sep 13, 2006
Loading...

Share This Page