Space between header and nav

[cgacfox]

I am experiencing a space between the header and nav of this site. I have tried adding overflow: hidden in several places and cannot get it to come together. http://foxdenwebsolutions.com/wingsofhope/index.html. What am I missing? Thanks.

[Force Flow]

The page doesn't seem to be loading.

[cgacfox]

Seems my business site is down. I moved it to my jewelry site for now. http://foxdencreations.com/wingsofhope/index.html.

[ronpat]

Try adding {margin-bottom:0px} to your h1 element.

[cgacfox]

thank you that worked!

[ronpat]

Excellent! Thanks for the feedback.

[flightshub]

Have you tested by removeing the <h1> inside the <header>

[cgacfox]

That I haven't tried....I will see if that changes anything.

[ralph.m]

Do you mean the white line between the header and nav? That is part of the background image. Or is the issue fixed now?

[bill_1983]

it's the h1 css problem. you should add padding:0; margin: 0; in h1{}. and change
#navcontainer ul {
background-image: url("../images/nav.png");
background-repeat: no-repeat;
float: left;
font-family: Calibri,arial,helvetica;
font-size: 26px;
height: 89px;
padding-left: 35px;
padding-right: 50px;
padding-top: 1px; to padding-top: 0;
width: 1143px;
ADD margin: 0;
}

[cgacfox]

The issue is fixed. Thank you everyone for your input.

[ralph.m]

it's the h1 css problem. you should add padding:0; margin: 0; in h1{}. and change
#navcontainer ul {
background-image: url("../images/nav.png");
background-repeat: no-repeat;
float: left;
font-family: Calibri,arial,helvetica;
font-size: 26px;
height: 89px;
padding-left: 35px;
padding-right: 50px;
padding-top: 1px; to padding-top: 0;
width: 1143px;
ADD margin: 0;
}

Did you actually test that? It doesn't make a difference when I try it. No CSS is going to remove the white line that is part of the image—if that's the issue.

[ronpat]

cgafox, there are actually a couple of other small problems with the page, if you're interested.

You may have noticed that the page is slightly off center in the browser window. There is an unnecessary width assignment causing that which can be deleted. That width plus the padding throws the total width off.

#navcontainer ul {width:1143px;}

(width:1143 has already been assigned in div.container.)

In addition, you can delete the following <h1> width as it is unnecessary, too (albeit harmless).

h1 {width:1143px;}

There is also a 1px space beneath beneath the navcontainer. It's most noticable at the edges of the images and the background is barely visible across the page. That can be eliminated by deleting

#navcontainer ul {padding-top:1px;}

If you want the additional padding above the ul, it would probably be easier if the background image and container height were assigned to #navcontainer first, then #navcontainer ul assigned separately.

[cgacfox]

Thanks ronpat, your suggestions look good.