I'm having a problem in IE6 with a background image on an unordered list. Whenever I add an 1px bottom border to an <a> inside the list, the background of the ul extends another 20px below the ul. If I remove the 1px border from my <a> element the overflow of the background image disappears.

If anyone knows how I can fix this, I'd really appreciate it. I did some googling on the subject but I couldn't find anything about my specific situation.

I posted the code below, or you can check it out at the following link:
http://www.fortyeightdesigns.com/v2/contact.php



CSS:
#nav_bar ul {
list-style:none;
margin:0;
padding:0;
background:url("images/subnav_bg.jpg");
color:#9fbb3e;
text-decoration:none;
}
#nav bar li {
margin:0; padding:0;
background-color:#fff;
}
#nav_bar a {
display:block;
font:11px/32px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background:url("images/subnav_li_bg.jpg") no-repeat;
padding:0 0 0 23px;
border-bottom:1px #415a64 solid;
color:#fff;
text-decoration:none;
}
#nav_bar a:hover {
color:#9fbb3e;
background:url("images/subnav_li_bg_o.jpg") no-repeat;
text-decoration: underline;
}



HTML:
<div id="nav_bar">
<div><ul><li><a href="contact.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Contact Me</a></li><li><a href="quote.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Request a Quote</a></li></ul></div>
<div id="nav_content">
<h4>Mailing Address:</h4>
<p>Kenny Saunders<br />
P.O. Box 6895<br />
Lee's Summit, MO 64064</p>
<h4>Phone Number:</h4>
<p>1 (816) 820-4806</p>
<h4>Email Address:</h4>
<p>kenny(at)fortyeightdesigns.com</p>
</div>
</div>