Annoying space at top of page

HTML & CSS
1

I am trying to format the page to have a 100% height layout. An example can be seen here: 100% Height Layout Using CSS

The problem I am encountering is small. I have a space at the top of the page where the middle section doesn’t appear to be stretching the 100%.

Here is the .CSS I have

Body {
background-color: #49290C;
/* background-image: url(images/hatch.gif); */
margin:0;
padding:0;
border: none;
height:100%;
}

html, body {
min-height: 100%;
}

#layout {
min-height: 100%;
text-align: center;
width: 70%;
border-left: solid 7px;
border-right: solid 7px;
border-color: #a5a18c;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
border-top: none;
border-bottom: none;

}

* html #layout {
min-height: 100%;
}

* {
padding: 0 px;
margin: 0 px;
}

section {
display: block;
text-align: center;
}

header {
top: 0;
}

p {
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.875em;
text-align: center;
}

h1 {
color: #6ecdd9;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.875em;
text-align: center;
}

footer {
bottom: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 0.750em;
}
#copyright {
font-size:80%;
}

and here is the html:

<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Online Action Trading Card Game.">
		<title>Lorem ipsum dolor</title>
		<link href="lbcstyle.css" rel="stylesheet" type="text/css">
	</head>
	<section id=layout>
	<body>
		<header><h1>Lorem ipsum dolor</h1></header>
		<hr>
		<nav>Lorem ipsum dolor</nav>
		<br>
		<h1>Lorem ipsum dolor</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non orci non nulla suscipit vestibulum ut quis lacus. Etiam molestie urna in augue suscipit vel convallis augue suscipit. Duis a augue quis urna dapibus rhoncus non a orci. Curabitur cursus lacus eget dolor ultrices lacinia. Pellentesque porttitor fringilla suscipit. Vestibulum imperdiet lectus vel mauris malesuada placerat. Nullam dui lorem, iaculis nec ultrices sit amet, commodo quis nisi. Morbi ornare pretium purus, ut faucibus magna bibendum a. Donec sed dui nec lectus congue mollis. Sed ullamcorper lobortis imperdiet. Sed hendrerit tempor odio, eget dictum ante posuere at. Nulla facilisi.

Curabitur porttitor, urna sed porta feugiat, tortor magna pharetra libero, vitae commodo nulla lacus sit amet orci. Sed velit leo, ultricies eget malesuada vitae, vestibulum quis sem. In tempor, nunc ac gravida bibendum, tellus nunc placerat tortor, in consequat sem urna vel dolor. In sed tellus sit amet tellus scelerisque pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce quis pretium ipsum. Donec viverra, arcu quis vehicula tincidunt, turpis felis luctus felis, vitae commodo nunc orci bibendum tellus. Nullam est orci, feugiat at faucibus eget, egestas eget quam. Mauris mi nulla, scelerisque sit amet vehicula et, pretium et odio. Vestibulum pretium tincidunt pretium. Pellentesque vel eros vel eros dapibus ornare eget ut risus. Sed fringilla libero gravida nulla aliquam eu ullamcorper urna porttitor. Fusce molestie tristique mi, et pulvinar arcu rhoncus vel. Fusce nulla leo, ultricies ut tincidunt non, tincidunt et eros. Praesent diam nisl, pharetra eget fermentum at, cursus ut nulla. Vivamus rhoncus lectus ante, in accumsan nibh.

Sed interdum, lectus a porttitor facilisis, sapien lorem placerat sem, sit amet fringilla nisi sem condimentum leo. Etiam dignissim mauris sem. Nulla pharetra elit et massa egestas ac vulputate nulla facilisis. Nunc sed mauris id ante scelerisque mattis. Integer vitae arcu ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec commodo quam non nisi condimentum vel ornare mauris ornare. Donec luctus fringilla leo eget iaculis. Sed a turpis urna. Donec eu risus et mi molestie venenatis ut a tortor. Donec lectus dolor, auctor in ornare sit amet, congue in ligula.

Donec vel neque nibh, ac placerat nisl. Aliquam lectus magna, laoreet sed ultrices ullamcorper, pharetra ac nisi. Duis accumsan leo at lorem laoreet ac lobortis eros mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut tellus massa, sed luctus felis. Vestibulum ut velit ut eros facilisis vestibulum in ut sem. Sed tempus posuere congue. Nullam a felis ut libero ultricies accumsan. Nam sit amet elementum libero. Nunc ac commodo nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet volutpat libero, vel volutpat neque condimentum at.

Cras ac eros vel est lacinia vestibulum ac et lacus. Mauris sed quam et ligula rutrum ultricies. Maecenas cursus convallis arcu id aliquam. Duis molestie congue odio. Sed posuere condimentum sodales. Nulla quis porta odio. Donec vel euismod magna. In at auctor nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dignissim, nisi eget iaculis fermentum, sem libero ornare augue, eget imperdiet lorem lorem eget dolor. In laoreet malesuada aliquet. Maecenas pretium tortor vehicula elit commodo tristique. Nullam volutpat arcu sed orci rutrum a aliquet felis laoreet. Integer risus justo, sollicitudin ut fringilla vitae, commodo tincidunt enim.
		<footer>
			<p>This website makes extensive use of new web based technologies and coding.
			<br>We recomend that you make sure you are running the 
			<a href=#>latest version</a> of your current web browser. </p>
			<p id=copyright> &copy; 2011 Lorem ipsum dolor || liamhockley@hotmail.com </p>
		</footer>
	</body>
	</section>
</html>

I had it working, but for some reason it is now broken. :frowning:
I have no idea what broke, but can anyone find my problem?

2

you wrapped a <section> tag around the <body> tag… BAD!!
also
Body {
background-color: #49290C;
/* background-image: url(images/hatch.gif); */
…}

note you capitalized “Body” it should just be “body”, and it’s a good idea to put quotes around your classes and IDs … <section id=“layout”> , for example.

put the #<section id=“layout”> within the body tag and use this CSS:


*{margin:0;
padding:0;
}
body {
background-color: #49290C;
/* background-image: url(images/hatch.gif); */
border: none;
}
 
html, body {
height: 100%;
}
 
#layout {
min-height: 100%;
text-align: center;
width: 70%;
border-left: solid 7px;
border-right: solid 7px;
border-color: #a5a18c;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
border-top: none;
border-bottom: none;
 
}
 
* html #layout {
min-height: 100%;
}
 
* {
padding: 0 px;
margin: 0 px;
}
 
section {
display: block;
text-align: center;
}
 
header {
top: 0;
}
 
p {
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.875em;
text-align: center;
}
 
h1 {
color: #6ecdd9;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.875em;
text-align: center;
margin:0;
}
 
footer {
bottom: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 0.750em;
}
#copyright {
font-size:80%;
}
3

Note, this was a last resort attempt at diagnosing the issue (not how the page was originally intended). Just so happened that the code I posted was that way. Either way, it made no difference to the issue.

Quotes are no longer required. One of my favorite new features of html tbh.

also, I tried putting the class/id in the body section. And it did not work (this was with the body on the outside as it should have been). I’ll try again later I guess.

4

Still, phoenix’ point about “Body” still stands…
because I’m guessing the 0 margins and padding you’re setting there is not getting read, since Body doesn’t match body.

And since nothing can be outside the body, I dunno if having the section around it with zero’d margins/padding would have fixed it… browsers do show text from the <head> if it’s not correctly wrapped in a tag but they seem to place it “in” the body when they do that anyway… so possibly the default margins/padding of your body element were still showing through (or if it was the margins, they may have been collapsing back up to the section element anyway).

So, does setting Body back to body fix it? Usually a gap at the top of a web page is those default body paddings/margins.

Quotes are no longer required.

Unless you are listing multiple classes?
But, browsers otherwise never look at quotes, and non-strict doctypes let you leave them out since forever. By now I think it’s mostly just developer preference (or, you’re using a strict doctype). Most editors nowadays highlight attributes so they stand out. My browser will make unquoted attributes red when I’m viewing source, but again I think that’s just for readability.

5

The problem appears to have ended up being that I had

* {
margin: 0 px;
padding: 0 px;
}

instead of…

* {
margin: 0;
padding: 0;
}

Could be wrong, but yeah. Either way it’s fixed now, so I am happy. :smiley:

6

One small adjustment to your CSS


* html #layout {
min-height: 100%;
}

Should be


* html #layout {
height: 100%;
}
7

Could be wrong, but yeah.

No, that does look like it could trip up browsers. Without the space between 0 and px would have been fine though:
0px
With the space, the browser may have thought there should have been a non-zero number in there somewhere, and so ignored the whole declaration.

Donboe’s point is also good: the * html #layout line is for IE6, but IE6 doesn’t know what min-height is (too old). Luckily for us, IE6 treats “height” the way other browsers treat min-height, so “height” works.

Right now, in IE6, the height should just be collapsed to whatever the height of the content inside is.