1.11M Members

CSS White outline around page

 
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?

 
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

 
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 six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article