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 How to Make a Website Debugging HTML and CSS Problems How to Fix Problems with Code

White space between header and the top of the page. (Only on About page)

Hello guys

I have some troubles. There is a white line between above my green header. This only occurs on the About page and is not a problem on my Portfolio and Contact page.

I have tried to find the problem, but i cant. Anyone know where the problem is and where i should look?

Evan Sennott
Evan Sennott
685 Points

same thing happens to me thomas. I have some info that could help you. The .profile-photo is the cause of this problem when i write float:left; it causes there to be space on top. and by the way i have figured out how to fix the problem itself yet.

16 Answers

Amy Tucker
Amy Tucker
13,273 Points

No problem. BTW, I copied and pasted your code into my own file and loaded it and it looks good on my end - in Chrome :)

Amy Tucker
Amy Tucker
13,273 Points

If it's only on the about page, it sounds like the trouble could be in your html. Can you post the code for that page?

Hello Amy. Here it is:

<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>Supreme Design af Leopold</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Thomas Leopold</h1> <h2>Web-Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Eksperiment med farve og tekst.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Laver en hyggelig hjemmeside.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Treehouse er godt.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Jeg er bange.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Nu skal jeg snart leget med photoshop :D.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/Thomas.leopold.5"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a> <p>© Alt på denne side tilhører Thomas Leopold - 2015</p> </footer> </div> </body> </html>

Amy Tucker
Amy Tucker
13,273 Points

It looks like you're missing your <head> tags, which should surround your top block of code (from the first <meta> to the last). Then the <body> tag also seems to be missing, it should start before <header> and end after </div>. Then all of it should be between <html> tags (except the DOCTYPE at the top). Not sure if some of these errors are copy/paste related, but the missing <head> and <body> tags in particular might be the cause of the white space.

Amy Tucker
Amy Tucker
13,273 Points

"head" tags around the top block of code "body" tags before the first header tag and after the last div "html" tags around everything except DOCTYPE... Apologies for answering literally and not paying attention to how the markup works on this page. Hope this helps :)

Hi again Amy.

I think i've made a copypaste error.. Dont know what happened. I will try add my code again:

<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>Supreme Design af Leopold</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Thomas Leopold</h1> <h2>Web-Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Eksperiment med farve og tekst.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Laver en hyggelig hjemmeside.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Treehouse er godt.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Jeg er bange.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Nu skal jeg snart leget med photoshop :D.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/Thomas.leopold.5"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a> <p>© Alt på denne side tilhører Thomas Leopold - 2015</p> </footer> </div> </body> </html>

I dont know why it removes some of the code when i insert.

</head> <body> <header> <a href="index.html" id="logo"> <h1>Thomas Leopold</h1> <h2>Web-Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Eksperiment med farve og tekst.</p> </a> </li> <li>

Mmm it removes the body tags. :S

Amy Tucker
Amy Tucker
13,273 Points

That's interesting - it makes me wonder if it removed those tags when you copied from index.html and pasted into about.html, or if it's just happening here?

Yes it's very strange.. But no I have the <body></body> html in the About page.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header>

Omg. I just copied 4 lines of code consisting of the </head> then the <body> then <header> and so on. But it removes is..

And then it removes it again.. What is the problem?

Can i upload a screenshot?

Amy Tucker
Amy Tucker
13,273 Points

Yes the Markdown Cheatsheet at the bottom has a way for you to put up an image - that might be better

file:///Users/thomasberg98/Desktop/Sk%C3%A6rmbillede%202015-04-11%20kl.%2011.41.06.png

alt text

Im not sure how to do that

Sorry for being a little retarded :D

Amy Tucker
Amy Tucker
13,273 Points

I was having the same problem - I don't know where that image file is supposed to live. I wouldn't be surprised if this forum page is stripping those tags out on purpose so it doesn't conflict with the page itself... so if those body tags are really there, I don't know where the problem is. If you can figure out how to post an image, I'll check back in the morning. Everything else looks correct though. Which is mind boggling.

Amy Tucker
Amy Tucker
13,273 Points

There's also tips on posting code in the Markdown Cheatsheet that might help

Okay now i try again to post code inside ```

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Supreme Design af Leopold</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Thomas Leopold</h1> <h2>Web-Designer</h2> </a> <nav> <ul> <li><a href="index.html" >Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick" class="Profile-photo"> <h3> About </h3> <p> Hej mit navn er Thomas, og dette er en forsøgs hjemmeside</p> <p> Hvis du vil følge mig på facebook, så siger jeg bare nej hejhej</p> </section> <footer> <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/Thomas.leopold.5"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a> <p>&copy; Alt på denne side tilhører Thomas Leopold - 2015</p> </footer> </div> </body> </html>

Well, this makes it hard to view, but atleast it shows code now. However, I think I will ignore this error. But thank you for the assist :)