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
Tj Dhavale
1,921 PointsLayout (and the position property)
Having a go with the CSS Layout tute on http://learnlayout.com/ and for some reason my footer (which is fixed to the bottom of the viewport) has a little gap at the base that the body text shows through while scrolling. I attempted a few different things like setting bottom position to 0 but to no avail.
Would really appreciate any hints on what I'm doing wrong. Codepen link below:
Cheers in advance.
1 Answer
James Barnett
39,199 PointsRemember browsers apply default styling to page elements, in your case the issue is the default margin on the <p> in the footer.
Situations like this are why I always reset the padding & margin to 0 for any elements I've used on the page so they behave as I expect them to, that's in addition to using normalize.css which smooths out all the other styling inconsistencies between browsers.
Whenever something doesn't seem to look right double check if it's not some default padding/margin. Firefox's inspect element feature has a really helpful box model view to help with this.
Tj Dhavale
1,921 PointsTj Dhavale
1,921 PointsThanks for the help James, much appreciated. I've never used normalize.css (although I have heard of it) so I'll look into that now, I didn't test the preview on multiple browsers either because I couldn't get it work on preview mode in Coda. I'll review it using Firefox's inspect element feature as well.
Cheers!