SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast yangyang's Avatar
    Join Date
    Jun 2007
    Location
    kavoir.com
    Posts
    96
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Weird menu button background problem in IE8

    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:
    Code HTML4Strict:
    		<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:
    Code 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.
    I blog about making websites, technically.
    Online image converter - all formats that you can think of.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Looks fine to me in IE8 (on Win7).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast yangyang's Avatar
    Join Date
    Jun 2007
    Location
    kavoir.com
    Posts
    96
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Please see the attached images. My browser:

    Version: 8.0.6001.18702
    OS: Windows XP SP2
    Compatibility View: No
    Attached Images Attached Images
    I blog about making websites, technically.
    Online image converter - all formats that you can think of.

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this one is the culprit:

    #header li a span {
    padding:0 1em 0 0;
    background:url(../images/tab_right.gif) no-repeat 100&#37; 0;
    width:8em;
    text-align:center;
    line-height:2.6;
    }
    try remove it, or change it. you have to have fixed px dimensions, as em is different in px across UAs.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •