Footer RWD

HTML & CSS
1

Hi all

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?

Kind regards

rob

2

Gotta see some code, preferably on a live site.

3

Apologies for the delayed reply. Here is my CSS and markup below for the footer, hope this helps

#footer {
clear: both;
/*background: #0f3d48; */
background: #302f2b;
font-size: 85%;
height:200px;
border-top: 2px #ffc21f solid;
}

.footerContent{
margin: 0 auto 53px;
width: 93.75%; /* 900px / 960px /
color: #ffdd6b;
}
.footerCopyRight{
margin: 12em auto;
width: 93.75%; / 900px / 960px */
color: #ffdd6b;
}

<footer id=“footer”>
<div class=“footerContent”>

&lt;/div&gt;	
&lt;div class="footerCopyRight"&gt; 
	&lt;p&gt;&#169; Yellow Belly Designs. All rights reserved.&lt;/p&gt;
&lt;/div&gt;

</footer>

Kind regards

Rob

4

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.

5

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.

6

Thanks Ron and Ralph.m I will try that when I get back later, in the mean time this is the web page, its a made up portfolio I am creating.

http://www.lrpdesigndetailing.com/myportfolio/

Kind regards

Rob

7

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:

<meta name="viewport" content="width=device-width[COLOR="#FF0000"];[/COLOR] initial-scale=1.0">

Also, your body background image is failing in Chrome, because you have included quote marks around the URL path, so remove those:

background-image:url([COLOR="#FF0000"]'[/COLOR]images/kindajean.png[COLOR="#FF0000"]'[/COLOR]);
8

The footer is “rising” in Firefox because of some creative copyright code.

Give the margin-bottom a zero…

newstyle.css Line 290


.footerCopyRight {
    color: #FFDD6B;
    margin: 12em auto [color=blue]0[/color];
    width: 93.75%;
}

PS: I didn’t see a problem in Chrome. The quote marks shouldn’t be causing a problem, though. They’re good things. :slight_smile:

9

Excellent thanks I will try that out later, yeah Chrome is fine it was Firefox and IE that I could not stop the footer from rising in.

Thanks

Rob

10

You’re quite welcome. :slight_smile: Being able to see live code always helps the troubleshooting process.

Cheers!

11

Did you see my comments above?

12

Hi Ralph.m

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.

Kind regards

Rob

13

Hi Ron and Ralph

Thanks for all your help, I added what you recommended and it worked. Thanks very much

Kind regards

Rob

14

Yes, they aren’t supposed to be an issue, but removing them did fix the background issue in Chrome for Mac, so I figured I should recommend it.

Glad you’ve gotten the result you need. See you later! :slight_smile:

15

{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.)

16

No, the quote marks were causing the body background image not to appear at all in Chrome. :lol: (So, an unrelated issue that I suggested fixing. See post #7.)

17

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.

18

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! :lol: ). I’m not sure why Chrome Mac was having troubles either, but as you say, just another bug to watch out for.