Menu
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 */ 
566
Is your first element h1 or similar? That element's margin-top could be causing what seems like a margin on body.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
