Removing space between header and navigation bar

[qtluvsjc]

I am having trouble removing the space between the header and navigation bar. Hopefully someone can help me out.

here is the test site:

http://home.comcast.net/~tbldesigns/smc/2/index.html

here is the relevant css:

body,
html {
margin:0;
padding:0;
background:#F1EDEC;
color:#000;
}
body {
min-width:760px;
}
#wrap {
background:#;
margin:0 auto;
width:760px;

}

#header{padding:0px;

}

#nav {
float:left;
width:760px;
text-align:center;
}

 

[Vragabond]

It's due to margin collapsing. Add [tt]margin-top: 0;[/tt] to your [tt].nav[/tt] declaration.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[solaris5]

Actually,

I ran into this issue when I started converting my HTML pages to XHTML pages (Which you are using). This issue is due to the way the <img> tag is rendered in XHTML vrs HTML which most people learned how to mark up. With HTML images tags block by default. In XHTML they are inline by default.
You need to force the image to block by using the following css:
display:block;

Your current image tag:
<img src="images/smcheader.jpg" width="760" height="98" border="0" usemap="#Map" />

The working one you need:
<img src="images/smcheader.jpg" style="display:block; width:760px; height:98px; border-style:solid; border-width:0;" usemap="#Map" />

Rembember this because you will surely run into it again if you continue XHTML markup.

 

[Vragabond]

solaris5, albeit the issue with an inline image getting extra margins is not uncommon, it should be stated that that was not the problem the OP was experiencing. The problem were the collapsing margins from the paragraph (.nav), where navigation is.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[grtammi]

Good call Vragabond!

Each browser will render different a different default margin / padding size if a default value is not entered. My preference is to apply a margin and padding value of 0 to everything, and then explicity define these values for each element as required. I find it allows more control over the layout of the page rather than allowing the specific browser control over how my elements are laid out.

* { margin: 0; padding: 0 }

is normally the first line in all my CSS documents.


Greg