Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Jason Atkinson
Jason Atkinson
26,245 Points

firefox - newbie to treehouse

Hi, i'm new here just signed up a couple of days ago and enjoying what i've seen so far BUT i've run into a problem the HowToMakeAWebsite Stage7 the about page styling. The project isn't displaying like it is in the video but after swamping browsers it seems to be something to do with the last version on firefox (maybe only on the mac version?) but displaying fine in chrome

Andrew Shook
Andrew Shook
31,709 Points

Jason, what is the problem that you are seeing in firefox?

Jason Atkinson
Jason Atkinson
26,245 Points

thanks for the replies (sorry, i didn't see the note below) but thanks for fixing the problem for me anyway

3 Answers

The Teacher's Notes does contain the fix for this but it is specific to this firefox problem.

There is a more general problem though with the floated header that happens on both firefox and chrome. Since the floated header is never cleared, the content boxes for the wrapper div, <section>, and whatever the first child of section is, all extend to the top of the header. So if any of those 3 elements have a top margin it will produce a gap above the header.

The wrapper div should clear the floated header since its the first element after the header.

clear: both should be added to the existing #wrapper rule:

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
    clear: both;

This drops the content box for the wrapper div down below the header. Now any top margins on the 3 previously mentioned elements will not produce a gap above the header.

This also prevents the firefox profile photo problem from happening and the correction James linked to wouldn't be needed.

James Barnett
James Barnett
39,199 Points

That's a known issue with that code.

Check out the teacher's note below the video on that page.

Sean Perryman
Sean Perryman
13,810 Points

Will you post the snippets of code that you are referencing?