ansaurus

Question

Sticky Footer doesn't work well on Safari and Chrome

Answer 1

A:

Have you tried the one over at CSS-Tricks?

markup

<div id="footer">
    Sticky Footer
</div>

css

#footer { height: 100px; }

script

// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() { 

       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");

       positionFooter();

       function positionFooter() {

                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }

       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

});

DEMO LINK

rockinthesixstring 2010-07-08 15:32:06

That one is really cool, but the Footer 'moves' and I don't want it to 'move' or slide whenever I'm moving the page, that is wrong !

UXdesigner 2010-07-08 15:42:22

but that's the whole reason for using a JS style sticky footer... so that it moves as you scroll.If you want a fixed footer, then you go purely CSS

rockinthesixstring 2010-07-08 15:54:21

A pure CSS solution is in my other answer.

rockinthesixstring 2010-07-08 16:09:13

Answer 2

+1 A:

I recommend trying a CSS only solution link. That will work on browsers with disabled javascript.

Chris Diver 2010-07-08 15:41:06

As I mentioned on my post... I tried that one, but it is not working for me. I don't know if using .NET / IIS has to do with the interpretation of the codes... but I've had to design for .NET apps and it is a pain. It's way easier when I do work for php/mysql apps, way way easier.

UXdesigner 2010-07-08 15:44:26

HTML / CSS / JavaScript is client side, the server side language makes no difference if the client side code is the same.

Chris Diver 2010-07-08 15:48:16

I too recommend using a CSS solution. Our website uses the "sticky footer" ability and it works on every browser we've tried. http://infinitas.ws - just break apart the source code to see what we did.

rockinthesixstring 2010-07-08 15:53:15

I don't know what's so special about this .net project that everything I know is wrong. Designing this project was painful, it works pretty well, except for thefooter in SAFARI and Chrome. Firefox and IE works wonders. Did you see the sticky footer im using ? Is there something i could add to it to let it work well in the other browsers for some reason ?

UXdesigner 2010-07-08 16:11:35

check out my answer for a little push in the right direction. Some minor CSS modifications and you "should" be off to the races.

rockinthesixstring 2010-07-08 16:16:26

Answer 3

+1 A:

Here's how we've done our CSS ONLY solution

Markup

<body>
 <div id="wrapper">
     <div id="header"></div>
     <div id="menu"></div>
     <div id="main"></div>
     <div id="clearfooter"></div>
 </div>
 <div id="footer">
     <div class="footer"></div>
 </div>
</body>

CSS

/*General Site Design*/
body
{
    margin: 0;
}
#wrapper
{
    width: 900px; /*same width as w\idth inside "outer" element*/
}
#header
{
    height: 63px;
}
#menu
{
    width: 798px;
    height: 20px;
    margin-left: 50px;
}
#main
{
    width: 780px;
    margin-left: 60px;
    margin-top: 20px;
    min-height: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

/*Footer Layout*/
#clearfooter
{
    height: 75px; /*same as footer height*/
}
#footer
{
    width: 900px;
    height: 75px;
    background-image: url(Images/Footer_bg.gif);
    margin: -75px auto 0; /*opposite px to height*/ 
    z-index:10;
}
.footer
{
    padding-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    width: 800px;
}

rockinthesixstring 2010-07-08 16:02:26

notice how the "footer" is outside of the "wrapper". Essentially it's a completely separate element outside of the rest of the layout.

rockinthesixstring 2010-07-08 16:19:01

ansaurus

tags:

views:

answers:

Sticky Footer doesn't work well on Safari and Chrome

related questions