I'm trying to build a horizontal menu and when I view it in IE6 and IE7 (I haven't checked IE8 or 9), the last item in the list is offset vertically by about 3-5 pixels. I first assumed that it was the element that was wrong, but I'm willing to believe that it's the rest of the list that is displaying incorrectly by not taking the padding on the element. Either way, I've tried everything I can think of, to no avail. I'm sure it's something easy I'm overlooking, but I could use some help/advice on this. Thanks!!

Here's the (dev) site: convocation.weebly.com

And here's the css:

#navigation {
  width: 500px;
  margin: 0em auto 3em;
  overflow: hidden;
}

#navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navigation li {
  float: left;
  margin: 0;
  padding: 0px 5px;
}

#navigation a {
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 12px;
  color: #4F6FCA;
  font-variant: small-caps;
  text-decoration: none;
  font-weight: bold;
}

There's also a reset at the top of the css:

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
    margin:0;
    padding:0;
}

And the html (all id's except for "navigation", and inline styles generated by the system):

<div id="navigation">
<ul>  
	<li id="active"><a href="/index.html">Home</a></li>
	<li id='pg670036731034452'><a href="/old-home.html">Old Home</a></li>
	<li id='pg39248481'><a href="/contact-us.html">Contact Us</a>
		<div class='weebly-menu-wrap' style='display:none'>
			<ul class='weebly-menu'>
				<li id='weebly-nav-121967688282820110'><a href='/new-page.html'><span class='weebly-menu-title'>New Page</span></a></li>
			</ul>
		</div>
	</li>
	<li id='pg231479734217758808'><a href="/history.html">History</a></li>
	<li id='pg365442622815104784'><a href="/service-schedule.html">Service Schedule</a></li>
	<li id='pg736980101173487005'><a href="/ministries.html">Ministries</a></li>
</ul>
</div>