It works on chrome but not on IE. I really need your help.
The site I am working is:
http://www.westerncircuit.com/results.php
I am trying to get sticky footer to work on IE but I cannot figure out what is wrong with my code.
I had tried including:
ie10-viewport-bug-workaround.js
ie10-viewport-bug-workaround.css
But it didn't worked. I have all the files required for the sticker footer such as bootstrap css, js and sticky-footer css. I really have no idea what am I missing.
Your kind assistance would be appreciated!
Turns out I just need to add
navbar-fixed-bottom
to my footer for it to work.
Related
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.
This is my first question here, so bare in mind that we may have some issues with code.
But the thing is that i'm using a template (Cant remember what template atm) that is supposed to work in every browser but i cant get the code to the bottom.
URL TO SITE IN 1 Comment.
I'm pasting the HTML & CSS with Pastebin for you people that don't wanna see the page.
Please bare in mind that the CSS is rough and not clean, same with the HTML as the page is under development.
I searched here a couple of times without result, and couldn't get it going without messing up the whole page.
I can only test this live on Safari in Yosemite, and on Chrome Win 7.
HTML and
CSS
I think myself that it have with the bottom images to do with.
FYI: I don't own any of the logos and this is a non profit entuisasm project for F1 Simracing.
Thank you and kind regards.
U have really messed your code a lot..!
Do these changes, it will work perfectly.
remove html,body {height:100%}
/**** add CSS ***/
html {min-height: 100%;position: relative;}
body {margin-bottom: 288px;}/* height of footer */
footer {position:absolute;width:100%;left:0;right:0;bottom:0;}
delete that container tag from bottom of html page.
Alright, I got the footer to the absoulte bottom of the browser (Safari atm)
But the content gets hidden behind the footer, and thats no good.
Attaching image and code
Screenshot CSS
Im really sorry for the messy CSS, but i really appreciate all help!
I've been working on a new theme for my wordpress website and after some tinkering everything looks and works fine except for my header.
When I open the website In firefox the header goes to It's full size and it ends up being too big while In other browsers It Is fine.
I've been googling solutions but none seem to work for me. Can anyone help me out so that firefox users won't get a big banner slapped in their faces?
Thanks In advance.
Link to my website
The problem is with the float on the wrapping div.navbar-header. I don't know is max-width within a float is offspec, but just override bootstraps "float: left;" with "float: none;" from on the .navbar-header and you're good to go.
You can also get rid of that img {max-width:100%;} and replace it with a simple width:100%;
I'm struggling to get the organization correct for a sticky footer. I'd like it to stay at the end of the page if the container above does not reach it. It's a sticky footer, correct? I've looked at examples and can't figure out where I've went wrong.
http://bootply.com/71311
You can use this
http://ryanfait.com/sticky-footer/, it is easy to add to a site and has a demo file.
Actually, this one works better: http://www.cssstickyfooter.com/ than the one from Ryan Fait. Simple and clean!
I was looking recently for a dynamic css sticky footer solution and came across this one:
http://pixelsvsbytes.com/examples/sticky-footers-the-flexible-way/simple.html
it seems to work great in most of the popular newer browsers that i've tried but for some reason chrome doesn't display it in the same way and my guess is that safari acts in the same way.
can anyone point a finger on where the problem might be?
Thank you.
ok I solved it thanks to Explosion Pills comment.
It is most likely a bug if you set the body tag display property to be display: table.
to solve it just place the elements inside another div tag and set it as display: table