The easiest way is to observe this live
Homepage footer (looks good): www.fishingreports.com
Screwed up footer: www.fishingreports.com/users/register
Whenever I export the code from /users/register onto another page like this: www.fishingreports.com/texas/lake-texoma
you can see the footer also goes haywire. I'm sure I'm missing something here that keeps the rest of the page in line.
Something interesting to note is that when there is OTHER STUFF on the page the footer acts fine, but when the form is the semi-last thing on the page the footer screws up. Compare these two pages:
http://www.fishingreports.com/washington/lake-saint-clair (good)
http://www.fishingreports.com/washington/lake-leota (bad footer!)
Thanks!
On the pages where the footer is messed up the footer is a part of the container div, causing the padding to apply and the size of the footer to be reduced.
You most probably have an unclosed div issue, this tool can help you with that: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fishingreports.com%2Fusers%2Fregister&charset=%28detect+automatically%29&doctype=Inline&group=0
Good luck.
Related
On my site http://math.byu.edu
I've been trying to make it responsive to screen size but I noticed a problem when I resize the broawser while on the page. If I shrink and enlarge the browser multiple times the min-height is dynamically getting set to a huge number and I end up with a lot of whitespace.
I've searched my php templates and my css and I can't find anythign that owuld be causing this min-height issue. Does anyone have any ideas?
As per the comments, just comment out the line positionFooter() from the $(window).resize() function.
The reason this theme has this script is to make sure the footer doesn't float into the middle of the page assuming the page has zero content. When the page has zero content, there's nothing to push the footer down. So that script is supposed to keep the footer at the bottom of the page, though it does it poorly.
For future reference, if you need a sticky footer (as it's called), I suggest using Ryan Faits Sticky Footer. Just wrap the content in a main wrapper, make sure the footer is a sibling of the main wrapper then use the supplied CSS to make it work.
Well I know there are a million questions regarding this topic - but I haven't found an answer for my specific case.
I am wanting to create a sticky footer (not position: fixed) but one that will stay at the bottom if the content isn't sufficient to fill the page space. If there is enough content the footer will act as normal.
Well on other pages not using bootstrap I have been able to do this:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
See it working on my site here:
http://www.magnetize.ca/policies.shtml#/pp
But on part of my site I am forced to use bootstrap and when I try the flexbox method things go really wrong:
http://my.magnetize.ca/knowledgebase.php
On most browsers I only see the footer get cut off on that page - but on Safari things get seriously messed up.
So, to summarize, I am looking for:
A sticky footer solution that:
Isn't the fixed footer solution (acts as a normal footer if content is sufficient to fill page)
Doesn't require a fixed footer height
Works with bootstrap
Any help you could give me with this specific problem?
EDIT:
I am just trying out the "table trick" method as listed:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
It is live now at: http://my.magnetize.ca/knowledgebase.php (on all my.magnetize.ca pages)
It is working much better than flex-box so I have ditched that idea. Everything is working beautifully on all browsers...except safari. On safari there are massive margins at the top and bottom of the page even though no margins are set.
You could try using http://stickyjs.com/ I have used it for navigation bars that start in the middle of the page and then stick to the top.
I also found this http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/# which looks more like what you are looking for.
I have a pretty simple site, which has a footer that is stuck to the bottom of the page and a content area that can scroll if the content is too long, and the end of the content will clear the footer like below. If the content fits in the page then no scrollbar is shown.
However, recently some CSS/php change which i can't for the life of me detect, has meant that the page no has this huge area under the bottom of the main content div which the user can scroll down like so.
Normal page view with everything looking as it should.
Here is the view for every page now, a user can scroll way below the end of the main content div to reveal this massive empty area underneath.
Having had this working nicely a day ago, Im not sure where to look next. I have check all of the css to make sure there are no syntax errors, I have checked all of the wordpress template files to make sure there are no unclosed divs or vice versa.
Does anyone know a starting point to look at to try and fix this? is there a common error for this type of thing? If you need a link to the stylesheet or html just ask (didnt copy as it was too long)
Not sure why you are using fade element. Definitely it's causing the issue.
Add this CSS to fix your scrolling problem by hiding it.
#fade { display: none; }
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.
There's this bug that I can't seem to fix where IE cuts off part of my text if I leave the footer in the same exact place as the main page. The following are examples of my main page footer position and the subpage footer position. I was wondering is it bad design to move the footer position this way? (the flow of the site fits better with the moving of the footer though)
Main page: http://www.sixfoldstudios.com/stars/index.html
Subpages: http://www.sixfoldstudios.com/stars/home.html
Thanks!
The footer doesn't look all that different except that it is smaller on the subpages. This is not a bad design decision.
As long as the footer looks the same overall and doesn't throws the text around it should be okay. People don't really look at the footer unless they need something from it so I'm sure most visitors won't even notice.
I am not a designer, so I can't answer you from this scope. But as user, I can't say that looks bad, your footer doesn't include any great information for the end user, that will visit just the website, I doubt if most users even check it. Of course the things change if you had a sitemap. Also big sites use different position for footers, here an example of ebay.
Homepage: http://www.ebay.com/
Answers Center: http://pages.ebay.com/community/answercenter/index.html
I would keep the footer the same everywhere. The reason why you might have a problem is because your footer div is in the rightcontent div.
Just move it outside just before the closing div of your container and if text overlaps it set the css to clear:both;
I have two sets of class for both me mainpage & subpages footer at times & it doesn't bother me much as long it does it work ^_^