Link background image problem in IE8

immediate · 10-12-2010, 10:32 PM

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:

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>

Code:

#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 · 10-13-2010, 07:35 AM

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 · 10-13-2010, 08:13 PM

Originally Posted by 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%
????: NamePros.com http://www.namepros.com/programming/681897-link-background-image-problem-in-ie8.html

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] · 10-15-2010, 02:32 AM

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

Code:

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)
????: NamePros.com http://www.namepros.com/showthread.php?t=681897

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.

10-13-2010, 07:35 AM	#2 (permalink)
skrilla Senior Member Join Date: Mar 2005 Location: canada Posts: 1,045	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. __________________ Add Me to G+

10-15-2010, 02:32 AM	#4 (permalink)
un4given[MAD] NamePros Member Join Date: Aug 2008 Location: Solar System \ Earth \ Ukraine \ Kiev Posts: 43	As I found out, the problem is tied with the font size setting of 62.5% in your predefined.css: Code: 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) ????: NamePros.com http://www.namepros.com/showthread.php?t=681897 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. __________________ Tired playing Freecell, Klondike or Spider? Discover 800 solitaire games at SolitairesUnlimited.com and play'em all!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Incredible Link Building Service That Gets Results	MarketingTide	Advertising & SEO Services	2	11-10-2009 10:12 AM
[REQ-LOGO & BACKGROUND IMG] - for a Pet Guinea Pig eCommerce Site: $100 for both	BeTheDance	Design Contests	20	10-22-2009 05:11 AM
CSS Link Background Color Problem	thopunk	Programming	2	04-03-2006 01:00 AM
ALL REDUCED Up To 50% - 48 Hours Only!!!	URLCollection	Domains For Sale - Make Offer	6	08-02-2003 01:23 PM
July Specials - More Traffic Domains	URLCollection	Domain Names with Traffic Stats	14	07-30-2003 05:45 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)