Annoying white line at the top of the web-site

tarasmuz · 10-03-2012, 02:06 PM

Hello again. I got a small white annoying line at the top of the web-site. It also creates a massive white space on the right. I have no idea where it is coming from. Can someone please help me with this issue?

Screenshot:

HTML:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JFM</title>
<link rel="icon"  type="image/ico" href="favicon.ico" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="whole_site_container">

	<div class="top_blue">
	</div>
	
</div>
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

.whole_site_container {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;	
}

.top_blue {
	width: 2000px;
	height: 100px;
	background-color: #01A4A4;
	}

Thank you!

VIPStephan · 10-03-2012, 02:10 PM

This is the default viewport background color. The body element has a default margin or padding which you need to remove in the first place:

Code:

body {
  margin: 0;
  padding: 0;
}

And then you assigned your div a fixed width so no wonder that the default background color of the page is visible at the right if your viewport is larger than that specified width.

tarasmuz · 10-03-2012, 02:18 PM

Thank you!