Link background image problem in IE8

[immediate]

So I was trying to add background images to the top menu links and it all seemed fine until I viewed them in IE8.

The "Contact Us" button is having an issue of aligning the right round corner image properly:

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

Really unexpected problem as the styles for all the links are identical.

Listed are the HTML and CSS 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;
}

Just IE8 has the problem and other browsers such as ff, safari and chrome are fine with all the top menu links. Any tip?

 

[skrilla]

Seems to be a table width problem or something. When the window is small it appears fine.. it only breaks when you view in 100%

Try playing with your table widths in your container or something.

 

[immediate]

Seems to be a table width problem or something. When the window is small it appears fine.. it only breaks when you view in 100%

Try playing with your table widths in your container or something.

That seems to be it. Thanks, skrilla! But I still have no idea what to do. Maybe just leave it there because it's a bug of IE8, probably.

 

[un4given[MAD]]

As I found out, the problem is tied with the font size setting of 62.5% in your predefined.css:

html {font:normal 62.5%/1.6 Arial, Geneva, Verdana, Tahoma, sans-serif}

(By the way, as far as I know, there should be "1.6em" instead of "1.6" but I'm not sure about this)

If you set font size to 63% or 61% the problem will gone away. However, this is not the fix, I think, because value of 62.5% is specific.

Here is the explanation of this 'magical number'.

Hope this helps.