SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I have this static footer

    Hi experts,
    Could someone hint me how I can have the static footer. An example like the one at http: // www dot mazdaspb dot ru/. It seems to work fine in FF3 but tends to disappears in IE7 when scrolling the content up.

    I will appreciate for any help or pointers on the web.

    thnx
    Alex

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Alex

    The link below should should answer your problem.

    http:// matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are looking for a fixed position footer then use something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    * {
        margin:0;
        padding:0
    }
    p {
        margin:0 0 1em
    }
    #outer {
        width:100&#37;;
        margin:auto;
        padding:0 0 75px;
    }
    #footer {
        margin:auto;
        position:fixed;
        margin:auto;
        left:0;
        bottom:0;
        height:50px;
        background:red;
        width:100%;
    }
    * html #footer {
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
        position:absolute;
    }
    * html {/* stop jitter by adding a 1px transparent gif to background of html*/
        background-image: url(image.jpg);
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <div id="footer">Footer</div>
    </div>
    </body>
    </html>

    The footer in the page you linked to fails because the javascript routine that implements the fixed footer for ie6 is targeting all versions of IE and its only IE6 and under that need it. therefore IE7 which understands "position:fixed" is getting both the fixed positioning and the offset from the javascript routine thus throwing it off.

    Use the method in my example above which uses an expression for ie6 and under only. All other browers get the position fixed.

    (If on the other hand you were looking for a "sticky footer" then read the CSS faq.)

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks a lot Paul.

    flooby, the link you gave is not accessible.

    I also found the example at www dot cssplay dot co dotuk/layouts/body2 dot html just in case someone could find it useful.

  5. #5
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like this Footer the best:

    http://ryanfait.com/sticky-footer/

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JordashTalon View Post
    I like this Footer the best:

    http://ryanfait.com/sticky-footer/
    That footer is broken in IE7 and I advise against using it.

    As the original developer (if there is such a thing) of the sticky footer technique I suggest you use my methods as shown the css footer faq

  7. #7
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That footer is broken in IE7 and I advise against using it.

    As the original developer (if there is such a thing) of the sticky footer technique I suggest you use my methods as shown the css footer faq
    It works on my version of IE 7, i'll have to try yours out though it looks easier to implement.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It works on my version of IE 7
    You may think it works but it doesn't

    Load the page. Drag the bottom of the window upward. Scroll vertically to the footer and then drag the bottom of the window back down. The footer hangs in mid-air.

  9. #9
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that, it doesn't float in mid-air on mine, it did stick in mid-air for a little bit (split second) until it was corrected Are you sure you aren't testing in IE 6 (which would still be a problem)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JordashTalon View Post
    I tried that, it doesn't float in mid-air on mine, it did stick in mid-air for a little bit (split second) until it was corrected Are you sure you aren't testing in IE 6 (which would still be a problem)
    Send me a link and I'll check it for you. If you have altered the original then you may have corrected the problem.

    Here is an attachment of the site you linked to showing the footer hanging in mid air. It's not a big deal but all the same it's not right
    Attached Images Attached Images


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
  •