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

CSS

Posted by Samit Sheth
Samit Sheth
4,172 Points

White space above header

I followed the "How To Make A Website" project with Nick's videos, and then modified it to fit myself and uploaded to the web. I'm having some issues where my header is not consistent across my 3 pages. There is white space above the header on the index.html page, which disappears when I move to other pages. Any idea why?

5 Answers

craigschotchii
craigschotchii
9,115 Points

So on your Home page the code below shows that the <p> tag has a margin of 1em from the normalize.css that you use.

<div id="content">
            <section>
                <p>This is the body of the home page, where one would imagine I'd have some interesting tidbits about myself and what this page is.  One would imagine...</p>
            </section>

The other 2 pages dont have this issue as they have content that encapsulates (i think thats the right word) the <p> tags and remove the margin.

Code below removes this margin and overrides the normalize.css predefined top border. If you add the code below into your main.css I believe it will fix the issue and not interrupt any of the other pages. 

p {
  margin: 0;
}

Let me know if this works for you.

P.S. To be honest I don't know why this is happening as I believe normalize does this due to IE6 & 7 issues and have no clue why its doing it now.

craigschotchii
craigschotchii
9,115 Points

I just thought of something else. The p code i typed up would change everything in the future. A suggestion would be to make it more specific using a class or denoting it in css in a more specific way such as 

div p {
   margin: 0;
}

I even went back to some files i still had and checked this out and noticed I didn't have this issue. Then I found out why. I had a <h3> above the p tag. I went and removed the <h3> and got the same thing happening on my page. Hope this helps.

Samit Sheth
Samit Sheth
4,172 Points

Hey Craig! First of all, thanks so much, that DID work. My issue now is I'm not entirely sure I understand how/why it did work, and why it wasn't affecting my other pages. I know I had a "p" on my index page, but there was a "p" on the other pages too, just after a "h3" and a "ul". Is that the content you were referring to that is encapsulating that area and so making the normalize.css "p" margin irrelevant. Additionally, how exactly would you get the below code: div p {margin: 0;} to work? Regardless, that definitely did work which is awesome, so thank you!

craigschotchii
craigschotchii
9,115 Points
craigschotchii
craigschotchii
9,115 Points

Can you provide a link to the website and/or the code so we can take a look at it?

Samit Sheth
Samit Sheth
4,172 Points

www.samitsheth.com

craigschotchii
craigschotchii
9,115 Points
craigschotchii
craigschotchii
9,115 Points

Wow...ok. I thought I had a quick answer for you but alas i was actually clueless for awhile. I belive this is due to the floating of the elements on your css. I have been using firefox developer tools to look through your source and a quick fix would be to do the following on your css for the body

body {
    background-color: #FFF;
    color: #999;
    margin-top: -20px;
}

Now I admit this is far from optimal however it is a quick dirty fix. I came up with this from this website

http://www.sitepoint.com/web-foundations/collapsing-margins/

Let me know if that helps!

Samit Sheth
Samit Sheth
4,172 Points

Thanks for the help thus far! Only issue here is, the header is actually working on the other 2 pages (family.html & contact.html). So when I do what you've suggested, it fixes the header on the index page... but then the headers on the family & contact pages actually move up and off the screen! I guess I could format this to affect only page, but I'm just not sure why the exact same code for the header produces different results on the different pages.

craigschotchii
craigschotchii
9,115 Points
craigschotchii
craigschotchii
9,115 Points

So you could put a specific class for the exact area such as this 

    <div id="content">
        <div class="indexparagraph">
                            <p>This is the body of the home page, where one would imagine I'd have some interesting tidbits about myself and what this page is.  One would imagine...</p>
        </div>  
        <footer>
        </footer>
    </div>

Notice that the 2nd class 'indexparagraph' wraps around the <p> tag. Then in the main.css you can do something like this.

.indexparagraph p {
    margin-top: 0;

}

your calling upon the class 'indexparagraph' and then putting 'p' there just selecting the paragraph element. At that time you call the margin top and set to 0.

Im no expert but this seems to work. Im still getting around the way the styles cascade through multiple style sheets. I have found that the (http://www.w3schools.com) website is a great resource. Glad I could help!

Samit Sheth
Samit Sheth
4,172 Points
Samit Sheth
Samit Sheth
4,172 Points

Got it! Thanks again, much appreciated.