Stupid space in all browsers for ul li

[nate51]

I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows...

HTML

<ul id="nav">
<li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a>
<ul>
<li><a href="#" style="color:#000;">About Asthma</a></li>
<li><a href="#" style="color:#000;">Treatment</a></li>
<li><a href="#" style="color:#000;">Taking Control</a></li>
<li><a href="#" style="color:#000;">Lifestyle</a></li>
<li><a href="#" style="color:#000;">Resources & Support</a></li>
</ul></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
</ul></li></ul>

I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here?