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. Advertisements

  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. Advertisements

  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. Advertisements

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,653
    ainigma
    Apr 4, 2008
  2. Noozer
    Replies:
    1
    Views:
    7,500
    Carolyn Marenger
    Mar 13, 2006
  3. Cuthbert
    Replies:
    8
    Views:
    689
    Ancient_Hacker
    Sep 13, 2006
  4. Jeff
    Replies:
    13
    Views:
    1,396
    vanilla
    Oct 6, 2007
  5. msdngroup
    Replies:
    5
    Views:
    962
    msgroup
    Jan 30, 2008
  6. Konrad Hammerer
    Replies:
    14
    Views:
    809
    Jonathan N. Little
    Feb 7, 2008
  7. Timo
    Replies:
    4
    Views:
    201
  8. Csaba  Gabor

    cross browser FF style SELECT element

    Csaba Gabor, Mar 25, 2006, in forum: Javascript
    Replies:
    0
    Views:
    583
    Csaba Gabor
    Mar 25, 2006
Loading...