I never tested the code in IE8 until yesterday and when I viewed the top menu buttons in IE8, the “Contact Us” button has an extra background slice to the right side. It seems the right background image tab_right.gif isn’t correctly aligned to the rightmost pixel.
When you view the current status, it’s the same and even more obvious.
Tested in FF3, Chrome and Safari 3 for Windows and it’s fine. Here’s the code.
HTML:
<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>
CSS:
#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 weired problem cause’ it’s just that button that’s being out of align. I also tried to modify the text ‘Contact Us’ to ‘Contact’ and it didn’t work neither.