Footer Refusing to Stick When Zoom Above 100%

Question

zobadof -7 Junior Poster

11 Years Ago

Hello,

So I've managed to get the footer to stick, at long last, but now if you are on 100% or above and scroll down the footer decides to not actually stick anymore. I believe this to be the case for all browsers, and I need a fix to this as obviously 100% is the default.

style.css

body {
background-color:#000000;
}


a,a:visited {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #ff9000;
}

.content {
    width: 1020px;
    height: 860px;
    background-color: #282828;
    border-radius: 20px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    margin-bottom: 20px;
    margin-left: 50px;
    text-align: center;
}

.line {
    width: 1020px;
    height: 60px;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px outset #000;
}

#footer {
    background: url(/images/footer.png) repeat-x top center;
    width: 100%;
    padding-top: 120px;
    padding-bottom: 150px;
        position: absolute;
        bottom: 0%;
}

#footer .container {
    margin: 0 auto;
    width: 940px;
}

The website, again, is teamshift.co.uk. I had a look through the books, I've had a look online but no luck with this.

web-design

4 Contributors
26 Replies
3K Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by zobadof

JorgeM 958 Problem Solver

11 Years Ago

You've got a lot of references to different style sheets so its going to take someone else a long time to go through them. Here is some info with regard to setting up a sticky footer. The basics are...

CSS:

* {margin:0;}
html, body {height: 100%;}
#wrapper {min-height:100%;margin-bottom:-75px;}
#push, #footer {height:75px;}

HTML

<body>
  <div id="wrapper">
     HTML Content here!
     <div id="push"></div>
  </div>
  <div id="footer">Footer Area</div>
</body>

With those basics...you'll get the footer to stick to the bottom. This may be helpful to you...I have two examples on line that you can look at and adapt to your needs:

Pushing a Footer to the Bottom of a Web Page

One example centers content while having a header and footer span the width and the other just spans the width for the header, content, and footer.

You may want to revisit your logo and the use of float. If you resize your screen small enough, the logo pushes the nav menu. In addition, your content and footer widths are distored at very small widths. you can take care of that problem by applying a min-width to the footer as well as the header. My examples cover that.

KavithaK 0 Newbie Poster

11 Years Ago

try deleting container #footer.container{ width:940px;}

JorgeM 958 Problem Solver

11 Years Ago

In the example link I provided above, you'll see the that the footer sticks to the bottom and there is no gap on the right side. The gap is resolved with adding the min-width property. Quite a bit of other articles document this gap when min-width is not used.

You mentioned earlier that you tried and the results were not as expected. I'd recommend you make a copy of what you have know and tinker some more. If it gets no result or worse, delete the new version.

You can try the demo, zoom in and out, change the height and width of the window and the footer should stick and remain 100% wide.

pixelsoul 272 Red Pill

11 Years Ago

Okay bro, I really have no idea why the JS isn't working and I looked at it for a good 30 minutes.

I went a little further with this than what I would usually do (partly because I was curious), so don't hold this as a standard for the normal help ;-) There was changes that needed to be made to the markup as well as the CSS to make the CSS sticky footer work, so I went ahead and pulled your site files down and just did it here.

err will fix the link and re-post

Edited 11 Years Ago by pixelsoul

pixelsoul 272 Red Pill

11 Years Ago

http://pixelsoul.com/data/shift/teamshift.co.uk/index.php

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

zobadof -7 Junior Poster · Answer 1 · 2013-03-20T02:27:47+00:00

Hi,

I added all of that but nothing changed.. So for the time being I've removed it to avoid confusion for myself.

header.php

<!DOCTYPE html>
<html lang="en">
<html>
<head>

    <title>TeamShift - Parkour</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link rel="SHORTCUT ICON" href="#" />
        <link href="css/menu.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="menu.css"/>


    <div class="wrapper">   
                <div class="container">
  <a href="/index.php"><img src="images/logos.png" ></a>
                <div class="menu" rel="sam1">  
                 <div><a href="/index.php">Home</a></div>  
                 <div><a href="/Gallery.php">Gallery</a></div>  
                 <div><a href="#">Forums</a></div>  
                 <div><a href="#">Profiles</a></div>
                 <div><a href="#">Videos</a></div> 
                 <div><a href="#">Contact Us</a></div>

          </div>  
         </div>
         </div>


</head>
<body>



<div class="bg">



        <div class="clear"></div>
        <div class="grid_12" id="content">
            <div class="content-spacer">
  <br > <br >

 <div class="content"> 
   <div class="line">
   test test test
 </div>
 </div> 
  </div>

style.css

body {
background-color:#000000;
}


a,a:visited {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #ff9000;
}

.content {
    width: 1020px;
    height: 860px;
    background-color: #282828;
    border-radius: 20px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    margin-bottom: 20px;
    margin-left: 50px;
    text-align: center;
}

.line {
    width: 1020px;
    height: 60px;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px outset #000;
}

#footer {
    background: url(/images/footer.png) repeat-x top center;
    width: 100%;
    padding-top: 120px;
    padding-bottom: 150px;
        position: absolute;
        bottom: 0%;
}

#footer .container {
    margin: 0 auto;
    width: 940px;
}

index.php

<?php
$home = true;
$title = 'Home';
include('header.php');
?>

<?php
include('footer.php');
?>
</div>

menu.css

.wrapper {
    width: 100%;
    height: 60px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
    background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
    background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
    border-top: 2px solid rgb(90, 90, 90);
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.container {
    width: 100%;
    margin: 0px auto;
    position: relative;
}

.container img {
    position:relative;
    top:5px;
    float:right;
    padding:0 10px 0 0;
}

.menu {
    height: 60px;
    float: left;
}

div.menu {
    height: 60px;
}

div.menu a:first-child {
    border-right: 0;
    border-left: 0;
}

div.menu div {
    list-style: none outside none;
    float: left;
    height: 60px;
    text-align: center;
}

div.menu a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 60px;
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

div.menu a:hover {
    background: transparent none;
}

div.active a{
}

div.menu p:first{
}

I'm totally lost with what you meant. Above I've pasted the files, not all of them as I don't think all of them are needed. Though, I added it into my header.php as that is where the main bit is and it didn't fix it or change anything about the website. Everything remained the same. I also added the CSS code to style.css and again nothing changed.

Did I do something wrong?

zobadof -7 Junior Poster · Answer 2 · 2013-03-20T16:10:02+00:00

That did not fix it, did not change anything. Am still looking for a fix on this :/

zobadof -7 Junior Poster · Answer 3 · 2013-03-20T16:55:13+00:00

The problem reversed now :( If you go under 75% the footer breaks with the gap, though I fixed it for 100% and above. Any idea's on how to get it working on ALL zooms? I'm aware it's possible.

zobadof -7 Junior Poster · Answer 4 · 2013-03-21T22:14:34+00:00

zobadof -7 Junior Poster

11 Years Ago

Any help on this?

zobadof -7 Junior Poster · Answer 5 · 2013-03-22T02:48:30+00:00

min-width did nothing, tried having a play around with it too. Nothing happens.

Pretty annoying to be honest, I don't expect you to have tried but have you had a play around with it for a little while, if so did you find where the problem lays? As I'm puzzled.

Any help is much appreciated. :)

pixelsoul 272 Red Pill Featured Poster · Answer 6 · 2013-03-22T02:59:15+00:00

It looks stuck to the bottom in my browser. Or were you actually attempting to make it scroll with the window?

zobadof -7 Junior Poster · Answer 7 · 2013-03-22T03:02:24+00:00

Hello pixelsoul,

No that wasn't what I'm after. Sorry for confusion. Lets say you scroll out it past 75% then the footer decides to have a massive gap appear underneath it. How do I fix this?

pixelsoul 272 Red Pill Featured Poster · Answer 8 · 2013-03-22T03:08:34+00:00

Okay no prob. So a lot of people throw catch phrases around and sometimes they mean different things.

For instance, this is an ALL css (no js) sticky footer http://ryanfait.com/sticky-footer/
It stays down at the bottom of what ever you have set your height at and will adjust it self for different screen sizes, BUT it will never go over the content.

The other sticky footer which uses JavaScript to hold into place even when you scroll is like the one her on the Daniweb forums. It holds its place no matter what you do, or how big or small your screen resolution is.

To me, it sounds sort of like you wanted the one like they have here on Daniweb, and have it always stuck to the bottom of the screen. Am I wrong, or was it the all css sticky footer?

zobadof -7 Junior Poster · Answer 9 · 2013-03-22T03:18:58+00:00

Hello,

No I've done that with my header and I think it would be too much for a user to have both stuck there when scrolling. I want the footer to always be at the bottom no matter the zoom, no matter the screen size/resolution, no matter the browser. Right now it goes all weird past certain zooms/screen sizes and has a MASSIVE gap. You can see by zooming out past 75% (Chrome).

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 10 · 2013-03-22T03:41:11+00:00

i really wish I had the time to debug your code and give you a solution that you can incorporate, but I just dont have that kind of time available. What I did was take the example that I had suggested from the link above and incorporated your picture so that I can make sure what I was suggesting about the min-width and other settings are working.

So with the code shown below, I validated that there is no gap and no matter what zoom/size of display, its working as expected. Hopefully you can use this as a template and incorporate your content into this. maybe that will be quicker and easier than trying to figure out how to adapt your current code.

Notes.. No content within the "push" div. Its only function is to create a seperation so that you dont get text behind the footer.

I hope this helps you.

270dc61cc7c13915c33d206980b22af9

<!DOCTYPE html>
<html>
<head>
<style>
    html, body {height: 100%;margin: 0;background:#6e6e6e;}
    #wrapper {min-height:100%;margin: 0 auto -374px;}
    #header {background-color:black;min-width:100%;height:100px;float:left;color:white;}
    #push, #footer {height:374px;}
    #content {margin:0 auto;padding:15px;}
    #footer {min-width:100%;float:left;background: url(http://teamshift.co.uk/images/footer.png) repeat-x top center;}
</style>
</head>
<body>
  <div id="wrapper">
     <div id="header">Header</div>
     <div id="content">
        <p>website content here!</p>
     </div>
     <div id="push"></div>
  </div>
  <div id="footer"></div>
</body>
</html>

pixelsoul 272 Red Pill Featured Poster · Answer 11 · 2013-03-22T03:46:54+00:00

Okay sorry, I am a moron. I have been up for almost 24 hours and my brain is completely fried. What I said was not really accurate about the options for the footer. I should probably go to sleep lol.

You don't need jQuery to make it scroll with the window... Really not sure why I was thinking that.

zobadof -7 Junior Poster · Answer 12 · 2013-03-22T03:57:45+00:00

pixelsoul, I think you probably should get some sleep then! :)

@JorgeM, now there is a MASSIVE gap under the footer; http://teamshift.co.uk/

pixelsoul 272 Red Pill Featured Poster · Answer 13 · 2013-03-22T11:45:03+00:00

It is always at the bottom for me with

#footer {
    background: url(/images/footer.png) repeat-x;
    width: 100%;
    position: absolute;
}

I like to do things with CSS if I can, but if for some reason it just isn't working you could use the below jQuery solution. You would just need to include this code along with the jQuery library on your pages. Here is a an example of it working http://jsfiddle.net/pixelsoul/L6HLu/4/

function positionFooter() {

    var mFoo = $("#footer");

    if ((($(document.body).height() + mFoo.outerHeight()) < $(window).height() && mFoo.css("position") == "fixed") || ($(document.body).height() < $(window).height() && mFoo.css("position") != "fixed")) {
        mFoo.css({
            position: "fixed",
            bottom: "0px"
        });
    } else {
        mFoo.css({
            position: "static"
        });
    }
}

$(document).ready(function () {
    positionFooter();
    $(window).scroll(positionFooter);
    $(window).resize(positionFooter);
    $(window).load(positionFooter);
});

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 14 · 2013-03-22T13:32:26+00:00

Regarding the massive gap...its because you didnt remove the other settings from your CSS file. You are applying all of these other settings. remove the padding, margin, and bottom settings. When I remove those settings, the "gap" is gone.

You mentioned that you were frustrated and annoyed. I think it has to do with trying to fix these issues in pieces and the fact that you are getting two different types of direction/advice from the contributors of this thread.

I dont mind helping you, but if you feel my suggestions have not been that helpful, I'll move on to another thread so that you arent going in circles...

#footer {
    background: url(/images/footer.png) repeat-x top center;
    width: 100%;
    padding-top: 120px;
    padding-bottom: 150px;
    position: absolute;
    margin-right: 15px;
    margin-left: auto
    bottom: 0%;

pixelsoul 272 Red Pill Featured Poster · Answer 15 · 2013-03-22T13:49:00+00:00

You're right JorgeM, my added suggestions probably only added to the confusion of on this topic :)

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 16 · 2013-03-22T15:11:28+00:00

@pixelsoul - not at all.... you have great suggestions and have greatly helped. I unfortuantely do not have the time to rewrite all of the existing code and fix issues as they arise.

My suggestion is that if the fixed footer is important, Start with a new page (save the current project) get the footer fixed and working and then start to add in each component, one at a time... header, then wrapper for the body, content, images, etc...

I think this approach will work well and would allow multiple members to provide guidance without everyone trying to do a different approach.

Please continue to help out zobadof... I think that I've come to the point where I have been able to provide a good solution for the fixed footer which was the topic of the thread...I'm not sure what else I can add of value at this time.

zobadof -7 Junior Poster · Answer 17 · 2013-03-22T19:31:20+00:00

@JorgeM I tried what you suggested and yet when I zoom out past 75% there is still a gap. I really appreciate everyone's help, and I hope you will continue to help me with this.

I'm stuck on what to do with this and I really would like to get the footer stuck to the bottom of the page by the end of today. I wanted it so no matter which zoom you are on the footer will always be stuck there to the bottom of the page. There are no problems with the header.

@pixelsoul You are being very helpful also, I was unsure of how to use that javascript code though.

pixelsoul 272 Red Pill Featured Poster · Answer 18 · 2013-03-22T19:50:44+00:00

Sometimes a solution is inpeded by other elements on the page, when typically it should work. That is why JorgeM was talking about reworking the design again from scratch starting with getting the footer working correctly. Over time I have gotten frustrated about something that I thought should work, only to find out that it was just my inexperience and something else that I had done wrong elsewhere that was causing it not work correctly. But, live and learn even the best of us get frustrated still :)

The javascript can go inline on the page or in a separate file. I like to do another file and keep my markup clean. It also needs the jQuery library which you can download and host, or you can link to one on Google or the jQuery site.

Example:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/stickyfooter.js"></script>

The stickyfooter.js file (or whatever you feel like calling it) would be yours that you would need to create and put that JavaScript code into it. The jQuery file is a file hosted on the jQuery website that you can link to. Hosting your own jQuery file is usually the best, but I do this often when developing or I am not really concerned about a problem arising.

That should be all you have to do.

zobadof -7 Junior Poster · Answer 19 · 2013-03-22T19:55:37+00:00

I've added all of that and such. Though the problem still remains. I removed footer from the css and then the footer disappeared.

zobadof -7 Junior Poster · Answer 20 · 2013-03-22T19:59:33+00:00

This is driving me nuts as I wanted to get this footer sorted for tonight :(

zobadof -7 Junior Poster · Answer 21 · 2013-03-22T23:33:19+00:00

@pixelsoul You're a life safer! Thank you so much for this, it's now fully working! Thank you so much for going out of your way as well.

Many thanks to JorgeM also who has assisted me with various parts concerning the footer and both of you together have helped to get it fully working.