I have created my first responsive layout with HTML 5 and CSS and all is good except in Firefox and IE 9 I cannot get the footer to stay down, it’s fine in chrome. Can anyone tell me the best way to sort this please in css?
What exactly do you mean by “won’t stay down”? If you mean that the area above it is collapsing, and the footer is inside it, you’ll have to clear floats before the footer.
clear: both on the #footer should do that, but perhaps for IE9 the footer also needs display: block, as it’s not necessarily recognized by IE9 (I can’t remember).
If this doesn’t help, let us see the page, or a full working example, as these things only make sense in the context of the whole page.
Your footer looks the same in all browsers to me, including FF and IE9. I do see some other problems, though, such as in the code below. You need to use a comma instead of a colon here:
My apologies I don’t know how I missed your comment above as well, our internet connection went down this morning and my page was not refreshing properly so I must have missed it. Thanks I will check that out later too, did not realise I had made those mistakes. Thanks for pointing that out.
{clear:both} in #footer fixed the problem in Chrome and Opera.
Firefox needed .footerCopyRight {margin-bottom:0}, also.
I cannot replicate any situation where any presence or absence of quote marks causes the dark footer to rise away from the bottom of the page. Back-ticks (or some mis-mark) will (of course) take away the background-image for the page… Is that what you were seeing?.. was the background-image missing?
If you can replicate it again, I would like to see it. To me, the association between the background-image and the footer is illogical.
There aren’t too may things that I feel very confident about any more, but the value of quotes around a path (in the world of html, anyway) lingers… hasn’t gone away. Quotes around a path are never a bad thing; always good. The absence of quotes can lead to a missing target if there is a space in the path.
If someone knows otherwise, PLEASE CLUE ME IN!!!
To quote a famous person… “Wee-uud”. :scratch:
(I will guess that my the time I joined the thread, the OP had already deleted the quotes and added {clear:both}. Just so happens I use Firefox most of the time, so I still saw a problem.)
No, the quote marks were causing the body background image not to appear at all in Chrome. (So, an unrelated issue that I suggested fixing. See post #7.)
Yes, you said “body background-image”. I misunderstood. Still, I can’t duplicate a problem with quotes around the background image path in Chrome on the PC. Oh, well. Another browser mystery. I seem to be accumulating a list of those little buggers… browser inconsistencies.
Sorry, Ralph. I’m not trying to be argumentive. I’m trying understand how things work and to avoid confusion.
No problem at all. The idea of you trying to figure out why quote marks around a bg url was causing a footer problem was funny, that’s all (that would be a real hair tearer! ). I’m not sure why Chrome Mac was having troubles either, but as you say, just another bug to watch out for.