Spacing Problem

If you look at the menu on the following link, you see that there is a small gap above (3 or 4 pixles) and below (1 pixel) the menu, how can i remove this?

Also if i put the menu in like this:


<ul>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>


i get gaps between the links, but if i put it like this its fine :-S



<ul>
<li>Menu Item</li><li>Menu Item</li><li>Menu Item</li><li>Menu Item</li><li>Menu Item</li><li>Menu Item</li>
</ul>


This last issue, is more to do with neatness of my code.

http://chantrybee.pwp.blueyonder.co.uk/newsite1/

any help much appreciated

I don't see the 1px gap below the menu. I do see the one above it though. Add this to your CSS
#pagehdr img {
display:block;
clear:both;
}

I don't see the 1px gap below the menu. I do see the one above it though. Add this to your CSS
#pagehdr img {
display:block;
clear:both;
}

it was only apparent when you hovered over the link. That code you suggested cleared the bottom gap, as well as the gap between the two background colours, however there is still a slight gap at the top when you hover over the images, but only in ff.

reduce the margin-top and or the padding-top ??? on the ul...