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
Stephanie Engeling
8,959 PointsWhite 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
Courses Plus Student 6,497 PointsI 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.
Jeremy Hill
29,567 PointsIt 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
8,959 PointsNice 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. :)
Jeremy Hill
29,567 PointsIn 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
8,959 PointsThank 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.
Jeremy Hill
29,567 PointsYou'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
8,959 PointsYou 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. :(
Jeremy Hill
29,567 PointsOkay, 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
8,959 PointsIt did not. :(
Really, though. Thank you so much.
Jeremy Hill
29,567 PointsYou'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
8,959 PointsYeah, 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
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.
Jeremy Hill
29,567 PointsI clicked the link and saw the problem it created on my laptop but it actually looks good on my phone.
Stephanie Engeling
8,959 PointsThe 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
8,959 PointsA 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!
Jeremy Hill
29,567 PointsGood deal! No problem, I'm glad you got it. I Enjoy a good challenge :)
Stephanie Engeling
8,959 PointsStephanie Engeling
8,959 PointsYeah, 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.