gap between nav UL and body [Archive]

Aet

16th February 08, 01:50 AM

I'm attempting a very simple site setup with header, navigation links that look like tabs, and a body where images and descriptions will go. The problem is that there's a sizable gap between the nav and the body, where I want it to look seamlessly connected. I'm guessing it's because each is in their own div? Or due to unordered lists automatically applying space above and below?

Here's the body's code:
<body bgcolor="#eeeeee">

<div id="head"><h1>Web Gallery</h1></div>

<div id="nav">
<ul id="navlist">
<li id="active"><a href="#" id="current">Current</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</div>

<div id="body">
<p>Text body here.</p>
</div>

</body>

Here's the CSS:
#head
{
padding: 0 1em;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
color: #778;
background: #EEE;
}

#body
{
padding: 0 1em;
border-left: 1px solid #778;
border-right: 1px solid #778;
border-bottom: 1px solid #778;
background: #FFF;
}

#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: 12px Verdana, sans-serif;
background: #EEE;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

Aet

17th February 08, 01:46 AM

Here's an example of it:

http://aetsgallery.zzl.org/index.html

gerryuk

21st February 08, 10:34 AM

* {margin:0; padding:0;} in the stylesheet will close the gap. There are several errors to correct.

Aet

21st February 08, 05:59 PM

Thank you!