Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Evan Osczepinski
Evan Osczepinski
5,189 Points

Whitespace above header color

I have white space above the header color when i display in the browser. For example in the how to make a website videos Nick tells us how to fix that. I do just that and it still doesn't fix it for all pages. Two pages are correct at different widths to the browser screen. The code appears to be correct and the fact that at two different sizes there are two separate cases of it working on different pages is what has me confused because it has white space on the other pages. Any thoughts?

17 Answers

Laura Cressman
Laura Cressman
12,548 Points

Hi Evan, Would you mind sending your code along? It is possible that the CSS selector isn't targeting all of the pages, just some of them, but hard to tell for sure.

Evan Osczepinski
Evan Osczepinski
5,189 Points

what code. both css and html? its quite a lot.

Laura Cressman
Laura Cressman
12,548 Points

Perhaps just the styling for the header? If I understand correctly, the header white space isn't there for like the Home and About page, but is for the Contact page? Or some variation thereof?

Evan Osczepinski
Evan Osczepinski
5,189 Points

in full browser white space is on the home and about pages. but not on the contact page. when i shrink the browser to the min 480px the about page is fine and other two are screwy.

header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
}

h1, h2 {
    font-family: 'Handlee', sans-serif;
    font-weight: 600;
    line-height: 0.8em;
}

h1 {
    margin: 15px 0;
    font-size: 1.75em;
}

h2 {
    font-size: 1em;
    margin: -10px 0 0;
}

h3 {
    font-family: 'Handlee', sans-serif;
    font-size: 1.0em;
    font-weight: 600;
    text-align: center;
    margin: 15px 0 20px 0;  
}

I don't have exact answer to your question, but I have this kind of issue several times.

The tips to handle it is to view it using Chrome Inspect Element feature (Open the page in Chrome, right click on the page, select Inspect Element). Then, open the 'Elements' tab (bottom left) and 'Styles' tab (bottom right). Scroll the 'Styles' tab until you can see the box with 'margin', 'padding', 'border', etc.

Now to debug the whitespace, select the elements one by one (at bottom left), while using your mouse to highlight the 'margin' or 'padding' (at the bottom right). You'll find that most of the unwanted whitespace belongs either to the padding or the margin from one of the elements.

To fix that, add the selection in your CSS to select the problematic element, and adjust its 'margin' or 'padding'.

Hope that helps

Evan Osczepinski
Evan Osczepinski
5,189 Points

unfortunately this didn't help in this scenario however a great tool to have. there aren't any margins/padding showing that is pushing this out of the way. Whenever the correct page is viewed it shows the same as when the whitespace pages are viewed.

Laura Cressman
Laura Cressman
12,548 Points

I compared your code to Nick's and couldn't find anything glaring. You did use a different font, font weight, and slightly different margins for h2, which may be worth looking into to see if there's nothing funky going on there. Does copying his code exactly work? If it still has the same issues, then maybe it's something in the browser.

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}
Evan Osczepinski
Evan Osczepinski
5,189 Points

I'm just following his videos along for a reference to a site I am doing to further understand the content. When I followed along with them the first time they worked out perfectly. Thats why I am so confused.

Why don't you post the HTML for the header ?

Evan Osczepinski
Evan Osczepinski
5,189 Points
<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Jenna Nicole</h1>
            <h2>Photographer</h2>
        </a>
            <nav>
                <ul>
             <li><a href="index.html" class="selected">Galleries</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="contact.html">Contact</a></li>
                 </ul>
        </nav>
    </header>

here it goes. I really cannot figure this out. I have been on other forums asking around too. Seems like a mystery.

Evan Osczepinski
Evan Osczepinski
5,189 Points

Either of you use Code pen? I may just post it up there and post a link in here to take a look at it?

Laura Cressman
Laura Cressman
12,548 Points

That is a good idea-I'll look at it there!

Your <header> has 5px margin on top, and the <H1> has 15 px margin on top and the bottom. I think that's the white space above the header that you are seing now. Try this :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <header>
        <a href="index.html" id="logo">
            <h1>Jenna Nicole</h1>
            <h2>Photographer</h2>
        </a>
            <nav>
                <ul>
             <li><a href="index.html" class="selected">Galleries</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="contact.html">Contact</a></li>
                 </ul>
        </nav>
    </header>
  </body>

</html>
header {
    float: left;
    margin: 0 0 30px 0;
    padding: 0 0 0 0; /*< Remove the padding on top */
    width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
}

h1, h2 {
    font-family: 'Handlee', sans-serif;
    font-weight: 600;
    line-height: 0.8em;
}

h1 {
    margin: 0 0 15px 0; /*< Remove the margin on top */
    font-size: 1.75em;
}

h2 {
    font-size: 1em;
    margin: -10px 0 0;
}

h3 {
    font-family: 'Handlee', sans-serif;
    font-size: 1.0em;
    font-weight: 600;
    text-align: center;
    margin: 15px 0 20px 0;  
}
James Ingmire
James Ingmire
11,901 Points

White space issue for white gap accross the top is normally caused when using inline-elements, you can fix this bug by setting a border-top: 1px solid #color; property to the top element.

element { 
    border-top: 1px solid #000;
}
Evan Osczepinski
Evan Osczepinski
5,189 Points

Thanks for all the feedback, all seem useful in different areas of debugging however non of these are working for me. I am stumped. I have a friend who is a from end developer I will get to check it out. Thank you all for the help!

Courtney Novits
Courtney Novits
3,113 Points

HI Evan Osczepinski I am having this exact same problem. As far as I can see my code is exactly as per the lessons. I have white space on the About page only and no problem once I resize it smaller. Did you manage to find a solution?

Jaime Almond
Jaime Almond
638 Points

I have the same problem with the About page.

Skye Aoki
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Skye Aoki
Full Stack JavaScript Techdegree Graduate 28,347 Points

I found the answer. For me the problem lies in the h3 element that says 'General Information'. Normalize.css applies this code :

h3 { font-size: 1.17em; margin: 1em 0; }

So to clear use h3 { margin:0; }

in main.css

When you are using the chrome inspector you have to open up all the nested elements and search carefully.

Jonas Ajane
Jonas Ajane
2,347 Points

Nice. Worked for me! :)