spacing between div's

[olly.draper]

CSS makes me dispair. Everytime I think i've got the hang of it, it throws me a curveball.

http://www.postaldesigns.co.uk

for some reason, the containing div(#table-01) seems to have a margin above and below it that I can't get rid of. Meaning the header div (#header) has big gaps between the top of the page and the navigational bar.

Also, the navigational bar which should be contained within the #table-01 div seems to be outside of it.

Any suggestions as to what's going on? It's probably dead simple, but it's got me stumped.

Here's the css:

/* CSS Document */

/*text formatting*/
a {
font-size:10px;
font-weight:normal;
}
p {
color:#330000;
font-family: Trebuchet, Arial, Helvetica, sans-serif;
font-size:10px;
padding:0px 0px 0px 0px;
margin:0px;

}

h1 {
color:#FFF;
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:12pt;
padding:0px 0px 0px 0px;
margin:0px;
}


/*page layout*/
#body {
padding:0;
margin:0;
}

#Table-01 {
padding:0;
width:800px;
height:115px;
margin-left: auto;
margin-right: auto;
border:1px solid #600;
border-right:1px solid #600;
margin-top:0;
margin-bottom:0;

}

#header {
width:800px;
height:115px;
background-image:url(images/logo.gif);
padding:0;
margin:0;
border:0
}

/*navigation*/

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #900;
color: White;
float: left;
width: 100%;
height:inherit;
font-family: Georgia, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
font-size:10pt;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color:#C33;
color: #fff;
}

Tested in firefox and safari.
Thanks for any help!

[Phishposer]

Try removing margin and padding from the #navcontainer ul:

/*navigation*/

#navcontainer ul
{
padding: 0;
margin: 0;
background-color: #900;
color: White;
float: left;
width: 100%;
height:inherit;
font-family: Georgia, helvetica, sans-serif;
}

[olly.draper]

Thanks phishposer, that's got rid of the space between the navbar and the header. But why is the navbar outside the header, and whats causing the gap between the header and the top of the browser?

[toicontien]

There's a margin on the BODY tag. Some browsers place padding on the BODY tag, so you best bet to snugging your layout up to the edges of the browser window is to set the margins and padding of the BODY tag to 0.

[Phishposer]

The white space is coming from browser-assigned default padding and margin to the body element. Check your values for widths assigned to the relevant divs to resolve the width issues.
CSS is fun. Keep plugging away!

[David Harrison]

Why wouldn't the nav bar be outside of the header? You didn't put it in the header, you didn't put anything in the header:<div id="header"></div>The browsers apply default margins and padding to various elements, paragraphs, lists, headers and also the body, among other things. The gap between the top of the browser and the header is caused by the margin/padding on the body. This will remove it:body{
margin:0;
padding:0;
}However, I like to put this little snippet of code at the beginning of my CSS, and I recommend that you do to:*{
margin:0;
padding:0;
list-style-type:none;
}That code will remove default margins and padding on all elements to stop them interfering, it will also remove the bullets and numbers from lists, but if you want those back for some lists than you can always over-ride it by specifying a list-style-type for those cases.

[bol]

That's a great snippet, will use. thanks.