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

Stephanie Engeling
Stephanie Engeling
8,959 Points

White Space Above Header on Index Page

I know there are several threads on this question, but I have tried the suggestions I have read both here and in other places to no avail.

On my index/overview page there is a white space at the top of the page above my header. It is not present on my "glee" & "merlin" pages and the html is identical minus the <section> which is blank and has not been built yet.

Here is a snapshot of my workspace: https://w.trhou.se/vdzxgjhba7

Any help would be greatly appreciated.

8 Answers

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,485 Points

I wasnt able to open the css folder to see your main.css file. Im guessing you need a correction somewhere in there & may have something to do with inline elements. Theres a few things it could be.

Stephanie Engeling
Stephanie Engeling
8,959 Points

Yeah, I figured the issue is in the css as well. I am just at a loss for what else to try. I am sorry you weren't able to open the folder. That's odd. :( Thank you for responding.

It looks like you created a <div></div> before your header in the index.html... try removing that and see if it fixes it. Here:

<body>
    <header>
      <div></div>
      <a href="index.html" id="logo">
        <h1>Favorite TV Shows</h1>
        <h2>by VTC</h2>
      </a>
Stephanie Engeling
Stephanie Engeling
8,959 Points

Nice catch! I removed the <div> from all my html files, but it didn't change the space on the index/overview page. Thank you for the response! At least I cleaned up unnecessary code thanks to you. :)

In your css under your heading your "padding" is capitalized in your h1 selector:

h1 {
  font-family: 'Exo 2', sans-serif;
  margin: auto;
  Padding: 15px 0 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
Stephanie Engeling
Stephanie Engeling
8,959 Points

Thank you again! Fixed that too. Good eyes! Though, sadly it did not correct the space issue. I am very grateful that you are even taking a look though. Much appreciated.

You're welcome.

I don't know if this will fix it but I also noticed that in your <meta> tag you have "urf'.

 <meta charset="UTF-8"> 
Stephanie Engeling
Stephanie Engeling
8,959 Points

You are just a master of the details. I am kind of embarrassed at these little things I have missed. hehe. Thank you! And no, that wasn't it either. :(

Okay, I have one more idea and I'm not sure if this will fix it either but try changing your margin-bottom: 2.5% to 1% or 0 in your header selector (header{}) in your css just to see if it changes it at all.

Stephanie Engeling
Stephanie Engeling
8,959 Points

It did not. :(

Really, though. Thank you so much.

You're welcome, I'm sorry none of this is working. I do have another idea if you are up for trying it; only because nothing else is working. You could go to your header selector in you css and give it margin-top of a negative value to see if it will close up this gap. Your code looks fine to me; it's quite the head scratcher lol.

Stephanie Engeling
Stephanie Engeling
8,959 Points

Yeah, I had tried that before, and I did it just now. It works to close the gap on the index page, but it throws the other two pages out of whack.

Here is the outcome and a new snapshot: http://port-80-4fa817hjye.treehouse-app.com/glee.html

https://w.trhou.se/x6bxx6e8h1

And you are correct, Sir, I am completely baffled. There's just got to be something I have done that has thrown that particular page off.

I clicked the link and saw the problem it created on my laptop but it actually looks good on my phone.

Stephanie Engeling
Stephanie Engeling
8,959 Points

The space is there on both my desktop and phone. :(

Someone found something odd with the gleelogo when looking at developer tools. (The first <li> item under <section>.)

It looks like the logo is pushing into that space above the header. I have tried deleting and commenting out anything to do with the images in the section, but that space is still stubbornly there.

Stephanie Engeling
Stephanie Engeling
8,959 Points

A couple of people in a chat room found what it was... (If you cared to know :))

I had to set the margin to 0 in both the #overview AND the #overview li! I was trying one or the other.

Then my images were slightly off center to the left, so I added margin: auto; to #overview li and it fixed it.

Thank you so much for going at this with me!

Good deal! No problem, I'm glad you got it. I Enjoy a good challenge :)