MOST Basic thing ever

Why is my body not moving to the top?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<title></title>
	<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<div class="nav">
				<ul>
					<li>Home</li>
					<li>Blog</li>
					<li>Contact</li>
				</ul>
			</div>
		</div>
		<div class="content">
			Test content!
		</div>
	</div>
</body>
</html>


body {
	background-color: #000;
	margin: 0 !important;
	padding: 0 !important;
}
.wrapper {
	width: 1000px;
	margin: 0 auto;
	background-color: #fff;
}

My UL was adding in a margin. This is solved.

Add

  • {margin: 0; padding:0; }

to the top, that takes care of it.

Also, you don’t need the !important where you’re using it. It overrides any foregoing styling for that element, and you have none.

Sorry, but that’s a really bad idea. A single global reset is likely to have all sorts of knock-on effects on other elements throughout the site. Work out exactly which elements you want to zero the margin and padding on, and then just apply the rule to those.

Stevie D, that is exactly a matter of opinion. I prefer to set everything to zero and add in whatever I want where I want it, regardless of any browser defaults, others use more customized resets. Nothing wrong with either approach, merely a matter of personal preference.

actually, there’s plenty wrong with the css reset concept

see fellow sitepointer Black Max’s article [url=http://sixrevisions.com/css/should-you-reset-your-css/]Should You Reset Your CSS?

Stevie D, that is exactly a matter of opinion. I prefer to set everything to zero and add in whatever I want where I want it, regardless of any browser defaults, others use more customized resets. Nothing wrong with either approach, merely a matter of personal preference.

Form controls. Don’t remove their padding. Opera and others won’t LET you add it back.

This makes the little arrows on dropdowns cover up the dropdown text.
It removes the visual feedback of depressing submits. Though this you can usually add back in manually but nobody I know who uses * to remove padding has ever bothered. It’s there for accessibility reasons. Kinda like how people who use a reset to remove outline from clickable elements never seem to bother adding :focus styles in later (not the fault of the reset, but this is how web developers work… let’s not encourage them).

That, and the number of elements you’re using on a page with goofy padding can be counted on one hand, so instead of getting a browser penalty, remove padding from those 2 or 5 elements, and spare the form controls.