css ul menu - strange gap at the bottom

Good morning,

I am helping out fixing some CSS bugs on this site: http://www.braidsbybreslin.com/, but for the life of me cannot figure out the gap seen at the bottom of the left bar navigation (above "Operating Hours").

The CSS for the menu is:

#elButtonContainer {
clear:both;
width: 169px;
margin: 0;
padding: 0;}

ul#elButton {
text-align: left;
list-style: none;
padding: 0;
margin: 0;
width: 169px;}

ul#elButton li{
display: block;
margin: 2px 0;
padding: 0;}

ul#elButton li a {
text-align: left;
display: block;
width: 100%;
padding: 3px 0 3px 3px;
color: #990000;
font:11px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration: none;
border:2px outset #FEF0ED;
background-color:#EDC8CF;}

#elButtonContainer>ul#elButton li a { width: auto; }


ul#elButton li a:hover {
background-color: #990000;
color:#EDC8CF;
padding-left:4px;
border:2px inset #FEF0ED;}


UL margin and padding is set to 0, so what could the problem be?

Any help would be GREATLY appreciated!

Thanks in advance -
Oslofish

 

modify that part accordingly to below data and all will look as desired with 3 px as other margins

#leftbar ul, #leftbar li {
padding: 0 0 3px 0;
margin: 0;
list-style: none;
}


the wrong value of 10px you have creates the additional gap!

have fun