Link background image problem in IE8

<ul>
            <li><a href="/" title="Scraping Web home"><span>Home</span></a></li>
            <li><a href="/databases.html" title="All databases on sale"><span>Buy Databases</span></a></li>
            <li class="current"><a href="/quote.html" title="Contact us regarding your data needs"><span>Contact Us</span></a></li>
            <li><a href="/scripts.html" title="Custom build a website or web application from a content database"><span>Custom Build</span></a></li>
            <li><a href="/specials.html" title="Special discounts on our database products by using coupons!"><span>Coupons</span></a></li>
            <!-- <li><a href="/press/" class="specials" title="Blog publishing latest data products and coupons"><span>Data Blog</span></a></li> -->
            <li><a href="/press/" title="Blog publishing latest data products and coupons"><span>Data Blog</span></a></li>
</ul>

#header li {
    float:left;
    margin:0 0 0 6px;
}
#header li a:hover {
    color:#000;
}
#header li a {
    font:bold 1.3em Trebuchet MS;
    color:#888;
}
#header li, #header li a, #header li a span {
    display:block;
    height:34px;
    cursor:pointer;
}
#header li {
    background:url(../images/tab_mid.gif) repeat-x 0 0;
}
#header li a {
    padding:0 0 0 1em;
    background:url(../images/tab_left.gif) no-repeat 0 0;
    width:9em;
}
#header li a.specials {
    color:#000;
}
#header li a span {
    padding:0 1em 0 0;
    background:url(../images/tab_right.gif) no-repeat 100% 0;
    width:8em;
    text-align:center;
    line-height:2.6;
}
#header li.current {
    background:url(../images/selected_tab_mid.gif) repeat-x 0 0;
}
#header li.current a {
    color:#fff;
    background:url(../images/selected_tab_left.gif) no-repeat 0 0;
}
#header li.current a:hover {
    color:#fff;
}
#header li.current a span {
    background:url(../images/selected_tab_right.gif) no-repeat 100% 0;
}