I have had this problem with every web page I have created. There is always a top margin above the 'main container' div I use to place my content in the center of the page. I am using a css style sheet and have set margins and padding in the body to 0px and set the margin and padding to 0 in the div:
body{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
color: black;
font-size: 10pt;
font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;
}
div.mainContainer{
height: auto;
width: 68em;
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
}
I have looked online many times, but all I can see to do is set these margin and padding attributes. Is there something else I should be doing? The margin exists in IE and Firefox.
Here is a more thorough look at the code (it is in the beginning stages of creation, so there isn't much in it...)
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainContainer">
<p>Here is the information</p>
</div>
</body>
</html>
Here is the CSS:
@charset "utf-8";
/* CSS Document */
body{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
color: black;
font-size: 10pt;
font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;
}
/* ---Section Dividers --------------------------------------------------------------*/
div.mainContainer{
position: relative;
height: auto;
width: 68em;
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
}
div.header{
padding: 0;
margin: 0;
}
div.leftSidebar{
float: left;
width: 22%;
height: 40em;
margin: 0;
}
div.mainContent{
margin-left: 25%;
}
div.footer{
clear: both;
padding-bottom: 0em;
margin: 0;
}
/* Hide from IE5-mac. Only IE-win sees this. */
* html div.leftSidebar { margin-right: 5px; }
* html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */
