Not sure what is wrong with the CSS

[ScrapingWeb.com]

In IE8, all the buttons are fine except the "Contact Us" button which has an extra background image slug attached to the right. It's all right in other browsers but not IE8.

Appears to me that the right background image isn't properly positioned to the right, leaving out the middle image there. Tried to modify the width and even the text shorter but neither worked.

<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;
}

This is bizarre considering the styles for all the buttons are absolutely identical.

Anybody got any insights?

[Sapphiro]

Providing the code itself isn't enough, any live demo to see the error? ☺

[ScrapingWeb.com]

Providing the code itself isn't enough, any live demo to see the error? ☺

http://www.scrapingweb.com/quote.html

View it under IE8. And it seems the problem only occurs at certain browser window sizes.

[twenty-three]

In the file global.css remove the attribute 'width:9em' for the selector '#header li a' and it should be gone.

23