Problem: Link button bg image not properly aligned in IE8

[yangyang]

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

Problem browser: IE8 (ff3, chrome and safari have no problems at all)

Problem description: Notice that there's an extra blue line (the middle background image, I think) at the right of the link button while all the other menu buttons have no such problem. It's the same when the link isn't in the current status. There's still an extra 1 or 2 pixels there.

Problem code:

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

Really hard to understand as the CSS for all the link buttons are identical. Why is the particular "Contact Us" button problematic?

[Luxmo]

Originally Posted by yangyang

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

Well, to fix your problem without figuring out the problem you can use a css conditional comment to single out styles which will be enabled only under IE8 and greater:

<!--[if gte IE 8]>
        <link rel="stylesheet" type="text/css" href="http://www.yoursite.com/ie8-hacks.css" />
    <![endif]-->

That stylesheet will only be loaded if the browser is IE8 or above. In that css file will be your IE8 specific styles.