Gap in horizontal UL and images wont load between.
===

I was using CSS to pull up hover images for my link bar but then decided to dabble in an unordered list due to lag on load time with the hover buttons. So I have never built an unordered list and things are working fairly well. I have run into 3 problems though. 
1) there is a gap between the 4th and 5th buttons.
2) it wont load the spacer images that make the bar 1080px wide
3) and lastly the link bar is aligned left in mozilla and chrome but not IE

Any thoughts? here is the live link: www.grossmag.com/2012/august/home.shtml


CSS:
    .menu {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
    }
    .menu li {
	padding: 0;
	margin-left: 0px;
	height: 54px;
	margin-right: 0px;
	list-style: none;
	background-repeat: no-repeat;
    }
    .menu li a, .menu li a:visited {
	display: block;
	text-decoration: none;
	height: 54px;
	background-repeat: no-repeat;
    }
    .home a {background-image: url(img/1.jpg); width: 65px;}
    .home  {background-image:  url(img/1_2.jpg); }
    .2 {background-image: url(img/2.jpg); width: 35px;}
    .mobile a {background-image: url(img/3.jpg); width: 145px;}
    .mobile  {background-image: url(img/3_2.jpg); }
    .4 {background-image: url(img/4.jpg); width: 31px;}
    .facebook a {background-image:  url(img/5.jpg); width: 133px;}
    .facebook  {background-image: url(img/5_2.jpg); }
    .6 {background-image: url(img/6.jpg); width: 26px;}
    .gallery a {background-image:  url(img/7.jpg); width: 172px;}
    .gallery  {background-image: url(img/7_2.jpg); }
    .8 {background-image: url(img/8.jpg); width: 33px;}
    .blog a {background-image:  url(img/9.jpg); width: 83px;}
    .blog  {background-image: url(img/9_2.jpg); }
    .10 {background-image: url(img/10.jpg); width: 29px;}
    .past a {background-image:  url(img/11.jpg); width: 137px;}
    .past  {background-image: url(img/11_2.jpg); }
    .12 {background-image: url(img/12.jpg); width: 23px;}
    .store a {background-image:  url(img/13.jpg); width: 81px;}
    .store  {background-image: url(img/13_2.jpg); }
    .14 {background-image: url(img/14.jpg); width: 23px;}
    .vmp a {background-image:  url(img/15.jpg); width: 66px;}
    .vmp  {background-image: url(img/15_2.jpg); }
    ul.menu li a:hover {background: none;}
    .menu li {float: left;}
    .menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

Unordered List:
    <ul class="menu">
	<li class="home"><a href="/index.shtml"></a></li>
	<li class="2"></li>
	<li class="mobile"><a href="/mobile.html"></a></li>
	<li class="4"></li>
	<li class="facebook"><a href="..."></a></li>
	<li class="6"></li>
	<li class="gallery"><a href="..."></a></li>
	<li class="8"></li>
	<li class="blog"><a href="/blog.shtml"></a></li>
	<li class="10"></li>
	<li class="past"><a href="/pastissues.shtml"></a></li>
	<li class="12"></li>
	<li class="store"><a href="/store"></a></li>
	<li class="14"></li>
	<li class="vmp"><a href="..."></a></li>
    </ul>

table:
     <table id="link" width="1080" height="54" align="center" background="img/tablebg.png" 
     >
			<!--#include file="linkbar.html" -->
     </table>