1,105,406 Community Members

CSS White outline around page

Member Avatar
Ries
Newbie Poster
20 posts since Apr 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

This HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" /
<title>Site</title>
</head>

<body>
<div id="top"></div>
<div id="menu"></div>
<div id="main">
</div>
<div id="content"></div>

</body>
</html>

And this CSS

#top {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: #3A3226;
	color: #FFFFFF;
	font-family: verdana, helvetica, sans-serif;
}
#menu{
	position:relative;
	width:100%;
	height: 75px;
	background-color: #B96E00;
	color: #000000;
	font-family: verdana, helvetica, sans-serif;
}
#main{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #CCCCCC;
}
#content{
	position: absolute;
	top: 225px;
	left: 200px;
	background-color: #BFA88E;
	width: 600px;
	height: 548px;
	color: #FFFFFF;
	font-family: verdana, helvetica, sans-serif;
}

Produces a white border around the div's separating it from the page and stopping it from fitting snuggly within the browser, can anyone explain what I am doing wrong?

Member Avatar
Airshow
WiFi Lounge Lizard
2,798 posts since Apr 2009
Reputation Points: 333 [?]
Q&As Helped to Solve: 393 [?]
Skill Endorsements: 11 [?]
Team Colleague
 
0
 

Ries,

To be rid of your white border, you need to ensure that the page margin is reduced to zero. Try adding to your CSS:

body { margin:0; }

You will then typically want to add some CSS padding to your divs' to prevent their content abutting the edge of the page (unless that is an effect you want), eg:

#menu{ padding:10px; }

Airshow

Member Avatar
almostbob
Nearly a Senior Poster
3,391 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 425 [?]
Skill Endorsements: 14 [?]
 
0
 

If this is actually copied from your html file you may want to close the link

<link rel="stylesheet" type="text/css" href="style.css" /
<link rel="stylesheet" type="text/css" href="style.css" />

and complete the html declaration and doctype so that the styles you are choosing, actually work
W3c Recommended list of DTDs

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article