Hey guys, I'm designing a new website layout for my site but I have a problem with a white gap below the footer. The layout is here: www.simplyfreeiphone4.com/New/ As you can see there is a white gap below the footer... I've been trying to fix this problem for hours and to no avail. Any help would be amazing. Thanks
i think your major problem coming from the container class. i can see you defined 100% height for it. where you would use it inside the footer, its probably pushing it down. i am testing this with FF.
#footer { height:210px; /* remove this */ } Secondly: #container { height:210px !important; /*Adjust this height as needed to get desired effect, somewhere between 90-100px */ }
Are you referring to the white area below your footer? That is normal since your website has less content than the amount of available real estate. Meaning the actual height is 1000px, and your content only takes up 800px of that, then of course you'll have 200px of empty space at the bottom, which will all depend on your resolution. If you want your footer to stick to the very bottom. Then you'll need to google the code for "sticky footer".
Right I've installed a sticky footer code, which has pushed the footer to the bottom of the page, but yet the user can still scroll down and find a white gap. Also, I tested adding more code to make the footer went down with the text, but it just pushed the text of the footer down, not the footer as a whole... :S
Well the best way is to retrace the steps and figure out what might be causing your problem. We know that the sticky footer code works, but you are simply implementing it wrong, or something in your existing code is conflicting with the sticky footer. Best way is to have a basic page with the just the sticky footer on it, and then adding your own code back in in chunks, that way you can narrow down the problem and figure out when it breaks and what might of caused it. Trial and error.
Hi, Think a couple of people have already explained where the problem is - but maybe not what you need to do so you understand how to correct it? I guess you don't have tools to see and edit your css file(s)? In that case the best thing to do is to use a good text editor such as notepad++ which is free: http://notepad-plus-plus.org/download You could use notepad - but that doesn't let you find things very easily by using different colors on the page. First make a copy of your existing *.css file then open it in notepad++ and do a search for 'container' - you will probably see the height set to too large a value? You should be able to change the height to a smaller value that will get rid of your white space? Let your mouse wander down to the star button bottom left of this post if you found it helpful.
The footer has always had this problem ever since it was first coded. Before there was anything else.
What I meant was that if you take any live example of a working sticky footer: (such as this one) Then we know it works. If you start integrating your OWN existing content into this working example and then it suddenly breaks and stops working, then you know something in your own code broke it. Then it's just a matter of retracing your steps to figure out what chunks of code caused the working code to break. I hope that makes sense.
Hi, I fixed it on my side. Just change this in your CSS file. #footer { background:url(images/footer_background.png) repeat-x; height:210px; margin:0; } .container { width:1000px; margin:0 auto; padding:50px 0 0 0; } In case you need the files, let me know. I have them saved. If you want to fix the footer to the bottom, use position:fixed; bottom:0; in the footer div and make your footer image bit smaller so that it doesnt hide the text. Regards, coldfiredesignstudio[dot]com
Not sure if that's the whole problem, but on IE, the site doesn't look very good at all. Just an FYI. Everything is all mashed together.