links with padding problems

[dazhall]

hi guys, hopefully you can help me out with this one! I have a menu:

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Online Shop</a></li>
<li><a href="#">Potted Shrimps</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">The History of Fishing</a></li>
<li><a href="#">Show Dates</a></li>
<li><a href="#">Boroug h Market</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contac t Us</a></li>
</ul>
</div>

and I have my style:

#menu ul { margin: 10px 0; padding: 0; }
#menu ul li { list-style: none; margin: 10px 0; display: block; }
#menu ul li a { color: #B2C8D1; text-decoration: none; padding: 10px; background: #F4F7F9; border-right: 1px solid #D7E4EA; border-bottom: 1px solid #D7E4EA; border-left: 1px solid #D7E4EA; }
#menu ul li a:hover { background: #FFF; text-decoration: none; }

but it's overlapping the links. can anyone think of a way of getting a nice 10px margin between each item? thanks! you can see it online at http://www.16-10-1972.com

darren.

[snowdonkey]

I don't quite understand the effect you're going for. Is this better?

#menu ul li { list-style: none; margin: 20px 0; display: block; }
 

[AricC]

Looking at your site I don't see anything overlapping IE 6 but you should give those buttons a width.