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
Seab Jackson
5,692 PointsHow to remove irremovable white space at the top?
/********************
GENERAL
*********************/
body
{
font-family: 'Open-Sans', sans-serif;
}
#wrapper
{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a
{
text-decoration: none;
}
img
{
max-width: 100%;
}
/****************************
HEADING
*****************************/
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;
}
/********************
FOOTER
********************/
footer
{
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
/*********************
PORTFOLIO
*********************/
#gallery
{
margin: 0;
padding: 0;
list-style: none;
}
#gallery li
{
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p
{
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/**********************
NAVIGATION
**********************/
nav
{
background: #599a68;
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul
{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li
{
display: inline-block;
}
nav a
{
font-weight: 800;
padding: 15px 10px;
}
/***************************
COLORS
***************************/
/* Site body */
body
{
background-color: #fff;
color: #999;
}
/* Green Header */
header
{
background: #6ab47b;
border-color: #599a68;
}
a
{
color: #6ab47b;
}
/* logo text */
h1, h2
{
color: #fff;
}
/* selected nav link */
nav a, nav a:visited
{
color: #fff;
}
nav a.selected, nav a:hover
{
color: #32673f;
}
7 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Seab,
I forked your workspace and previewed the page and did not see the gap. I then downloaded the workspace and viewed the file locally and still did not see the gap. Unfortunately I can't reproduce the problem on my end so I don't have an explanation for why you're getting this discrepancy between local and workspaces. Are you using the same browser when viewing locally and from workspaces?
One thing that you can do is to add a clear: left to your #wrapper rule. It might not solve your problem but it's a good idea to do anyways. It can prevent other header gap problems you might run into further into the course.
#wrapper {
clear: left; /* add this to the existing declarations you already have */
}
Because the header is floated, the content box for the wrapper element actually extends all the way to the top of the header rather than below the header where you might think. By adding the clear style the browser will force the wrapper element below the floated header which is where we would expect it to begin.
Before adding that in, try giving your #gallery a top margin of 30px or so. This should produce a 30px gap above your header. Then add in the clear: left and it should remove that gap. Don't forget to remove the top margin on your gallery since it was only for testing.
I don't know whether this will fix your local header gap problem but it's good to put it in anyways for the reason I outlined above.
You want to keep the header floated because it will become important in the responsive portion of this course. Later on the logo and the nav will be floated. Normally a parent will collapse when it contains floated children. Floating the parent is one way to keep it from collapsing.
Marcus Parsons
15,719 PointsHey Seab,
That white space is just from the browser's default stylings. In this course, you are supposed to link to normalize.css from each of your pages. This is a great CSS file that overrides those default stylings so that you get an experience across each browser that is almost the same.
You should link to it before any other CSS if you haven't done so. Make sure there aren't any spelling errors in your <link> element or in the filename of "normalize.css" and that you are including the proper folders, as these can cause errors.
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Seab Jackson
5,692 PointsThanks for the prompt feedback Marcus. I did in fact link to the normalize.css file, but that white space remains adamantly opposed to moving. Here's a snippet of my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" type="text/css" 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" type="text/css" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</h1>
<h2>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>Exper W Color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Exper W Color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2013 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
Marcus Parsons
15,719 PointsIs "normalize.css" in the same folder as "main.css" or is it at the same level as your "index.html" file? Right now, you are linking it at the same level as your "index.html" file.
michael Kraske
3,485 PointsHi seab , is the path to the normalize.css correct? Normaly when you follow the structure of nick there is a seperate folder for css and img so the. Href looks like this. Href="css/normalize.css" Also for the main.css
Href="css/main.css"
Seab Jackson
5,692 PointsThe file paths were correct, but I have now separated the css files into one folder and linked to them correctly as you indicated, but that white bar is as stubborn as a donkey that doesn't want to move!
Marcus Parsons
15,719 PointsTry this override in your "main.css" file (add the two properties in if you already have styles for the body):
html, body {
margin: 0;
padding: 0;
}
Seab Jackson
5,692 PointsMarcus Parsons I did try the override and it's still obstinately holding on there for dear life! What's interesting is that if I give the header a margin top of say -20px, then the white space goes away. I think I'll just leave the margin-top as negative for now and move on. Thanks for the help man!
Marcus Parsons
15,719 PointsAt this point, I'm going to need to see your code. Can you please post a snapshot of your workspace? If you don't know how to do that, check out this great article: http://www.teamtreehouse.com/forum/workspace-snapshots
Seab Jackson
5,692 PointsMarcus Parsons this should be the link to my workspace snapshots. https://w.trhou.se/aw2a9d4ppy
I wasn't working using workspaces. I was using sublime text 3 as my editor and had everything on my desktop. What's funny is that when I copy my files to workspace, everything seems perfect. The white bar is gone, but when I view the same html file on my desktop or from sublime text I get the white bar again.
Seab Jackson
5,692 PointsJason Anello yes, I did the clear left, and dabbled with changing the #gallery margin top properties you had highlighted. I made sure to refresh after each update to see which setting would do the trick.
One key thing is that I cannot select that white bar using the browser's dev tools. I can inspect element for each other area of the screen except there. Thus, it is only through estimation that I can change the margin top of the header to get it to conceal that white space.
After setting the margin-top to -15px, there is indeed a 2px white gap that's still there. I'm guessing -20px might be a tad to large. Does this tell you anything?
Marcus Parsons
15,719 PointsHave you tried clearing your internet history, including your cache?
Seab Jackson
5,692 PointsI just did that, and the white bar still doesn't move. It's pretty stubborn, but I'll teach it a lesson!
Jason Anello
Courses Plus Student 94,610 PointsIf you're only hitting your browsers refresh button then you might not necessarily be getting the latest changes to your files.
In firefox I can do ctrl - f5 and this forces a hard refresh. I believe that there is a way to disable caching with the various developer tools as well.
You can also clear cache as Marcus has suggested.
You won't necessarily be able to select that gap for inspection but you can hover over the other html elements and see if any has a box that extends all the way to the top of the viewport.
The reason I wanted to find out if it was 16px is because normalize puts 1em margins on some elements by default. A 16px gap might suggest that there is a 16px top margin on an element somewhere that is causing that gap.
This is kind of a tough problem because it can't be reproduced.
If it were happening to me I would focus on dev tools and hover over the various elements in the "html" tab and try to find the one whose box goes all the way to the top.
Seab Jackson
5,692 PointsThat sounds wise. I did in fact glance something to the effect that one might need to change the font size of the header tags after normalization. I will explore that, and the the dev tools for a bit.
Seab Jackson
5,692 PointsMarcus Parsons and Jason Anello I have a final update to the mysterious and obstinate white bar: After some more meticulous inspection using the browser tools, there was a mysterious " " added to the beginning of my body. When I deleted this odd line within the browser, the white space went away. Even more weird was that my normalize.css was found to be in my body element instead of in the head element as I had specified in my index.html file. This was the work of a zombie indeed!
Fortunately, I came to know of a most beautiful thing called jsbeautifier, which to my understanding formats your file so that it is more readable: (http://jsbeautifier.org). I installed the equivalent package , htmlbeautifier to sublime text, applied it to my html files, reloaded my pages and just like if it was passing through the Bermuda Triangle, the white space disappeared, and my webpage was as beautful as ever! I am now having a wonderful life without it!
Marcus Parsons
15,719 PointsIt has to be that nonbreaking space that was the issue then. HTML ignores whitespace in documents, so although it might be easier for other humans to read, the HTML compiler doesn't care about any amount of whitespace. It all renders the same i.e.
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>
Renders the same as:
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata
corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor
dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil
vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi
eorum defunctis go lum
cerebro. Nescio brains an Undead zombies.
Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
Jason Anello
Courses Plus Student 94,610 PointsNot sure how that made its way in there and why it wasn't in the workspace files but glad you got it sorted out.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsYet again, you have my thanks, Jason. Believe it or not, I love being proven wrong, as it helps me to continuously learn. Cheers! I will delete my answer so there is no discrepancy.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome.
I think it's not going to fix this particular problem though. Really strange that there's a difference between local and workspaces.
Yes, I checked your profile and you're obsessed with learning! :) That's good though.
You seem to have pretty good knowledge on javascript. I've been learning some things from your answers.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsAs I have been doing the same with your answers! haha :) My philosophy has always been to keep learning, because I believe once we stop learning, we become stagnant and run the risk of becoming deeply mired into the old ways of doing things.
I found it strange, as well. One question that hasn't been asked as far as I can tell is what browser Seab Jackson is using. To be honest, I saw no difference between either the local or Workspace implementation of his code myself; I just remember having this same question a while back and that getting rid of the float had solved the problem. I was too quick to jump back into the same conclusion that this would just immediately solve the problem. It's also been about a year since I've taken this course haha
Seab Jackson
5,692 PointsSeab Jackson
5,692 PointsFolks I have executed all offered diagnoses as accurately as possible. Though helpful, nothing seems to have solved the apparent discrepancy between local and workspaces. I had even downloaded an exact replica of the instructors css and html code, and the problem persists on all the browsers I use (Firefox, Safari, and Chrome). Since another individual was unable to recreate my issue with my code, I'll take solace in that fact because it also works if I upload to workspaces. I have now opted to believe there's a zombie in my machine and will move forward with the course by using the ad hoc "margin-top: -20px;" in the header. If I do have that eureka moment where I solve this anomalous behavior, I shall be sure to update here for my posterior's sake.
Marcus Parsons and Jason Anello, thanks once again for your patience and assistance. Your posts have didactic content and I look forward to learning from you both in the future.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsSeab,
You're welcome and I'm sorry we couldn't get this resolved for you.
I'm pretty much out of ideas.
Did you end up putting that clear: left in and doing a hard refresh to make sure you had the latest css file?
I don't know if it came up here but do you know how to use your browsers dev tools? That should shed some light on where the gap is coming from although I don't think they can detect zombies yet. :)
I'd be curious to know if you figured out the exact size of that gap. If you don't mind could you change the margin to -15px and see if there's still a 1px white gap? If you're done with this problem then don't worry about it.
Diana Terry
1,887 PointsDiana Terry
1,887 PointsI was having this issue but adding clear: left to the #wrapper fixed it! Thanks for answering in this thread. :)
Dekin O'Sullivan
10,749 PointsDekin O'Sullivan
10,749 PointsThanks Jason, great answer I've been looking for! One thing I'm not clear about yet: why does the clear: left property help clear a white space... on top of an element... Here the left side was "cleared" in the sense that the Header element has a width of 100%, so no room on either left or right...
And more frustratingly: why does Nick's code not need to clear the Wrapper element and I need to??
Do I make sense?