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

HTML

Posted by John Faciane
John Faciane
6,833 Points

Annoying white bar at top of one page

I am working on my portfolio site, and after updating my page I've noticed that an annoying white bar has appeared on the header of my index page only. All other pages of my site are displaying correctly.

I was wondering if anybody else had this issue.

My site is at http://www.johnfaciane.com

and here is the code for the index page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>John Faciane | Actor, Improviser, Production Coordinator</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>John Faciane</h1>
        <h2>Actor, Improviser, Production Coordinator</h2>
     </a>
      <nav>
        <ul>
          <li><a href="index.html">Works</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="connect.html">Connect</a></li>
        </ul> 
      </nav>
     </header>
    <div id="wrapper">
      <section>
        <img src="img/john.jpg" alt="Photograph of John Faciane" class=" profile-photo">
        <p>John Faciane is an actor, improviser, and production coordinator specializing in Full CG 3D animation production. He is bilingual in English and Japanese.</p>
        <p>If you'd like to follow John on Twitter, his username is <a href="http://www.twitter.com/Ak_Tokyo_Duck">@Ak_Tokyo_Duck</a>.</p>
        <br>
        <br>
        <br>
        <h3>Bio</h3>
        <p>John was born on February 18th, 1986 in Anchorage, Alaska. He lived in Anchorage until college, when he moved to Eugene, Oregon to study at the University of Oregon. While at the University of Oregon John studied Theatre Arts and Japanese Language. 
        Throughout university he was in several university theatre productions and in 2007 he studied abroad in Japan.</p>
        <p>Upon graduating John moved to Tokyo, Japan to teach English and American Culture to students who were preparing to study abroad. After teaching John became a Production Coordinator on the show "Pac-Man and the Ghostly Adventures." In addition to teaching and production, John also appeared on Japanese television several times.</p>
        <p>John found improv while he was in Tokyo, and he became a member of Tokyo's only bilingual improv comedy troupe, The Pirates of Tokyo Bay. With the Pirates he performed in the Hong Kong International Improv Festival and The UCB Del Close Marathon in Manhattan in 2014. Currently John performs online improv through <a href="http://www.e-mprov.com">E-mprov.com</a></p>
        <p>In August 2014 John relocated back to the United States. He is currently looking for work in a variety of fields in LA, NYC, and Washington DC. John plans to continue pursuing improv and comedy in either LA, NYC, or DC.</p>
      </section>
      <footer>
        <a href="http://twitter.com/Ak_Tokyo_Duck"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://www.facebook.com/john.faciane"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 John Faciane.</p>
      </footer>
    </div>
  </body>
</html>

4 Answers

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

John,

Took me a while, but it looks like it's a float problem. Add this to your #wrapper rule:

clear: both;

That should do the trick. The problem actually persisted across all pages. You were only noticing it on the home page because it was the only page with content starting with a paragraph tag.

Hope that helps.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It looks have you have a paragraph tag on line 9 of your HTML that's pushing your margin all the way to the top.

Try a style of 

p {
padding: 0;
margin: 0;
}

And that should do the trick. :-)

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Jonathan,

This was my initial thought, too, but this solution removes the space around all paragraphs, effectively eliminating the visual breaks that paragraphs are supposed to provide.

I think if John just clears the float, he'll get the results he wants.

Christine Makkes van der Deijl
Christine Makkes van der Deijl
1,928 Points
Christine Makkes van der Deijl
Christine Makkes van der Deijl
1,928 Points

Thanks Shawn, I had the same problem but thanks to you I've fixed it!

John Faciane
John Faciane
6,833 Points
John Faciane
John Faciane
6,833 Points

Thanks everyone! Sorry I've been away from my coding for a while with holidays and such (I also got a new job in that time as well.)

The clear worked! I kept looking through my code, and couldn't find the error at first. Thanks again I really appreciate it.