For some reason I get extra margin between #main-image and #form-container. There should only be 1 pixel high margin there. Anyone could help?
Code:
html, body
{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

body
{
	font: 12px Arial, Verdana;
}

img
{
	border: 0;
}

#top-logo
{
	float: left;
	margin: 28px 20px;
}

#main-image
{
	margin: 1px 0;
	padding: 0;
	width: 800;
	height: 222;
}

#main-container
{
	width: 800px;
	margin: 0 auto;
	background-color: #FFFFFF;
	color: #000000;
}

#top
{
	height: 83px;
}

#top-strip
{
	height: 20px;
	background-color: #02397C;
	clear: left;
}

#form-container
{
	background-color: #C4D5E8;
	margin-top: 0px;
}
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="login-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="main-container">
		<div id="top"><img id="top-logo" src="images/logo-top.jpg" /></div>
		<div id="top-strip"></div>		
		<img id="main-image" src="images/main.jpg" />
		<div id="form-container">
			<br />
		</div>
	</div>
</body>
</html>