Content Margins

[Manna]

Hi there
I am building my site using CSS and I seem to be having a margin problem. I would like my container to be flush on the top and bottom. I have set the margins to 0 in both the html and the container. I can not seem to find where the browser is getting the margin information. Can some one help?

Here is a link to my site:

http://www.premiumwebsites.net

here is my CSS
html {
margin: 0;
padding: 0;
background-color:#ffcc66;
color:#000000;
}
#content {
position: relative;
width:800px;
height:auto;
margin-top:0;
margin-left:auto;
margin-right:auto;
background-image: url(../images/bgcontent.jpg);
background-repeat: repeat;
}

#header {
background-image: url(../images/bgheader.jpg);
background-repeat:no-repeat;
height: 220px;
width: 800px;
margin: 0;
padding: 0px;
}

#leftnav {
background: #9966cc;
background-repeat:repeat-y;
width: 130px;
height: auto;
position: relative;
top: 5px;
margin: 0;

}
#leftnav ul {
list-style: none;
margin: 0;
position: relative;
padding: 0;
font: bold 1em Arial, Helvetica, sans-serif;
font-size: 90%;
text-decoration: none;

}
#leftnav li {
border-bottom: 1px solid #ffffff;
}
#leftnav li a:link, #leftnav li a:visited {
display: block;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 90%;
color: #FFCCFF;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #cc99ff;
border-right: 1px solid #663399;
text-decoration: none;
}
#leftnav li a:hover {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 90%;
color: #ffcc66;
text-decoration: none;
border-left: 12px solid #ffcc66;
border-right: 1px solid #663399;
padding: 0.4em 0 0.4em 0.5em;
}
.info {
position: relative;
top:-340px;
display:block;
border: 5px groove #9966cc;
width: 480px;
margin:0 50px 10px 150px;
padding: 10px;
color: #000;
}
#footer {
position:relative;
height: 70px;
width: 800px;
margin:auto;
text-align:center;
}
#footer ul {
list-style: none;
font: normal .6em Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
top: 20px;
width: 800px;
}
#footer li {
display: inline;
color: #000000;
padding-right: 3px;
text-align: center;
margin-left: 0px;
width: 800px;
}


#footer a {
color: #000000;
margin-right: 2px;
text-align: center;
}
.copyright {
font-size: 0.7em;
width: 800px;
text-align:center;
}
h1 {
font: 3em "Monotype Corsiva", cursive;
position:absolute;
top:35px;
right:50px;
margin: 0;
float: right;
letter-spacing: .2em;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:1em;
}
h3{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:.9em;
}
.phone {
position:relative;
font-family:"Monotype Corsiva", cursive;
font-weight:bold;
font-stretch:expanded;
font-size:1.2em;
top: 180px;
text-align:right;
margin-right:10px;
}
.rightbox {
position: relative;
top: -398px;
width: 130px;
float: right;
margin:0;
padding-top:40px;
padding-left: 5px;
text-align:right;
}
.rightbox p {
padding-left: 2px;
padding-right: 2px;
}

#ad1 {
position: relative;
width: 125px;
height: auto;
}

#ad2 {
position: relative;
width: 125px;
height: auto;
}
.validated {
position:relative;
vertical-align: baseline;
clear:both;
}
.portfolio {
list-style-type: none;
text-align: left;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-size: .8em;
vertical-align: top;
padding: 5px;
}
.pricing {
display: block;
list-style-type: disc;
text-align: left;
font-family: arial, helvetica, sans-serif;
font-size: .9em;
}
.pricing a{
color:#FFFF66;
}
.address {
display: block;
list-style-type: none;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 1em;
font-weight:bold;
}
.test {
font-family:"Monotype Corsiva", cursive;
font-size: 1em;
font-weight:bold;
}
.right {
font-family:"Monotype Corsiva", cursive;
font-size: 1em;
text-align: right;
font-weight:bold;
}
.right a {
color:#000000;
}


Thanks for your time.
Dotty

[Karpie]

From the body?

[markbrown4]

yep.

I recommend you start with a global reset of the padding / margin on all elements as each browser implements these slighlty differently.

* {
  margin: 0;
  padding: 0;
}

[Paul O'B]

HI,

The gap at the top is actually coming from 2 places in your code and they are the top margin on the h2 and the default margin on the body as already mentioned above.

Due to collapsing margins the margin on the h2 collapses onto the element above and moves the page downwards revealing a gap.

You need to ensure that when you have adjacent vertical or nested elements that there is something solid in the way such as a border or padding or the margin collapse onto the element above. In ost cases using a padding top will suffice.

You need to control all the margins and padding explicitly but be aware that if you use the global reset (* margin:0;padding:0) then some form elements will be effected and for example input buttons in mozilla lose their visual clue of being depressed when clicked.

[Manna]

Thank you so much for that explaination

Dotty