Div Container showing space

[dyr]

http://i1093.photobucket.com/albums/i433/dyruse/Screenshot2012-04-22at112815AM.png

 

I'm using a text-menu list to display over my header image.  When there is no menu list, the container (the 1 px black border)  is fine.  However when I insert in the menu list, the container and the banner have around a 10 px space in between each other, as shown above.  Below is my code, how can I get it set up with no 10 px space and still use the menu links?

 

<div id="container">
<div id="header" style="background: url('/images/test.png') no-repeat; height: 286px;"><ul id="topnav">
<li id="topnav-1"><a href="home.php" title="Home">Home</a></li>
<li id="topnav-2"><a href="index.php" title="City">City</a></li>
<li id="topnav-3"><a href="about-us.html" title="About Us">About Us</a></li>
<li id="topnav-4"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
<li id="topnav-5"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
<li id="topnav-6"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
<li id="topnav-7"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
</ul>
</div></div>

[MarPlo]

Hi,

It is missing the starting <ul> for the list. Try this code:

<div id="container">
<div id="header" style="background: url('/images/test.png') no-repeat; height: 286px;"><ul id="topnav">
<ul style="margin:0; padding:0;">
<li id="topnav-1"><a href="home.php" title="Home">Home</a></li>
<li id="topnav-2"><a href="index.php" title="City">City</a></li>
<li id="topnav-3"><a href="about-us.html" title="About Us">About Us</a></li>
<li id="topnav-4"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
<li id="topnav-5"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
<li id="topnav-6"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
<li id="topnav-7"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
</ul>
</div></div>

[dyr]

Still doesn't seem to be working, that didn't effect it.

 

Here's some .css coding that relates to the ul, but that's the only portion I have (besides the actual image menu):

ul#topnav {
position:relative;
top:235px;
right:5px;
width:963px;
list-style:none;
height:36px;
}
ul#topnav li {
display:inline;
}

[salem80]

You are Doing it on wrong way 

You should not using "position:relative" to warping your web site .user margin and float instead

Any way I test and see what is the issue in CSS code make it like this

 

ul#topnav {
position:relative;
top:235px;
right:5px;
width:963px;
list-style:none;
height:36px;
margin:0px;
}
ul#topnav li {
display:inline;
}

[Jessica]

Try adjusting the padding and margin on the elements