#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    341
    Rep Power
    38

    Odd firefox background-position issue


    I have an issue with my nav bar which uses one sprite and multiple background-positions to display the nav items correctly. if you paste the code below into an html document and view it in firefox, then hover over the last nav item, you can see that all nav items are temporarily shifted 1 pixel to the left before the first hover, then all images correct themselves. the only image that doesn't correct itself is the 2nd nav item. if you hover over it, you'll notice the 1 pixel shift that happens to all other nav items before hovering over them for the first time. when i remove Margin: 0 auto from the #wrapper element, the bug goes away. if i keep margin:0 auto, but remove the images (or change the path so they are broken) or take out any of the elements below, the bug goes away.

    I've included the minimum amount of code needed to get the bug to work. actual page has a lot more content. this has been baffling me all day, and I know it's gotta be something simple i'm overlooking.

    thanks in advance

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    	<title>Groups</title>
    
    <style type="text/css">
    body {
    	color: #000;
    	background: #fff;
    	font: normal 11px Verdana, Tahoma, Arial;
    	line-height: 1.3;
    }
    
    body, p, div, ul, ol, li,
    h1, h2, h3, h4, h5, h6,
    form, input, textarea {
    	margin: 0;
    	padding: 0;
    }
    
    img {
    	border: 0;
    }
    
    #wrapper {
    	margin: 0 auto;
    	width: 900px;
    }
    
    #navbar {
    	position: relative;
    	z-index: 10000;
    }
    
    #globalNavWrapper {
    	position: relative;
    	width: 100%;
    	font-family: Arial, Verdana, sans-serif;
    	font-size: 11px;
    	z-index: 10;
    }
    
    #globalNavWrapper #nav ul {
    	list-style: none;
    	z-index: 20;
    }
    
    #globalNavWrapper #nav li {
    	float: left;
    	display: inline;
    	height: 24px;
    }
    
    #globalNavWrapper #nav li.navpadleft {
    	border-left: 1px solid #999;
    }
    
    #globalNavWrapper #nav li a {
    	display: block;
    	background: #0f0 url(http://www.green-egg.net/images/sprite.png) no-repeat scroll 0%;
    	height: 0;
    	width: 100%;
    	padding-top: 24px;
    	overflow: hidden;
    }
    
    #globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
    #globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
    #globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
    #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }
    
    #globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
    #globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
    #globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
    #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }
    
    #globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
    #globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
    #globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
    #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }
    
    #globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
    #globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
    #globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
    #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }
    
    #globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
    #globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
    #globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
    #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }
    
    #globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
    #globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
    #globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
    #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }
    
    #globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
    #globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
    #globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
    #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }
    
    #globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
    #globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
    #globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
    #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }
    
    #globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
    #globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
    #globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
    #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }
    
    #globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
    #globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
    #globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
    #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }
    
    #globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }
    
    #globalNavWrapper #nav .subnav {
    	position: absolute;
    	margin: -1px;
    	border: 1px solid #999;
    	background: #fff;
    	width: 150px;
    	z-index: -10;
    	display: none;
    	overflow: hidden;
    }
    
    #globalNavWrapper #nav .subnav li {
    	clear: both;
    	float: none;
    	display: block;
    	background: none;
    	line-height: 18px;
    	height: 18px;
    	width: 150px;
    	list-style: none;
    	border: 0;
    }
    
    #globalNavWrapper #nav .subnav li.hr {
    	border-bottom: 1px solid #999;
    }
    
    #globalNavWrapper #nav .subnav li a {
    	background: #fff;
    	padding: 0 0 0 5px;
    	width: 200px !important;
    	height: 18px;
    	color: #000;
    	text-decoration: none;
    }
    
    #globalNavWrapper #nav .subnav li a:hover {
    	background: #e4f5e5;
    	color: #009f00;
    }
    
    #globalNavWrapper #nav li iframe {
    	display: none;
    	z-index: -1000;
    	height: 220px;
    	width: 151px;
    	-moz-opacity: 0;
    	opacity: 0;
    	filter: alpha(opacity=0);
    }
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    	<div id="globalNavWrapper">
    		<ul id="nav">
    			<li id="nav_home" class="navpadleft">
    				<a href="#">Home</a>
    			</li>
    			<li id="nav_myXXXX">
    				<a href="#">My XXXX</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    			<li id="nav_people">
    				<a href="#">People</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			<li id="nav_groups" class="active">
    				<a href="#">People</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    			<li id="nav_tnn">
    				<a href="#">News Network</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    			<li id="nav_green">
    				<a href="#">Green Living</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    			<li id="nav_ecards">
    				<a href="#">E-Cards</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    			<li id="nav_shopping">
    				<a href="#">Shopping</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    			<li id="nav_petit">
    				<a href="#">Petite</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    			<li id="nav_don">
    				<a href="#">Don</a>
    				<ul class="subnav">
    					<li class="hr"><a href="#">Main</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page</a></li>
    					<li><a href="#">Next Page Long Text</a></li>
    					<li><a href="#">Next Page</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    	<div id="main">
    
    <!-- THE LEFT COLUMN -->
    
    		<div id="left_side">
    
    
    
    		</div>
    
    <!-- THE RIGHT COLUMN -->
    
    		<div id="right_side">
    
    			<div class="content_module pad_module_bottom under_group_vitals">
    				<div class="inner">
    					<div class="header">
    						<div class="title">
    							Group Hosts
    						</div>
    					</div>
    					<div class="main_small">
    						<div class="member_boxes">
    							<div class="member_box padright">
    								<img src="http://www.green-egg.net/images/temp_member_joe.png" alt="member photo" /><br/>
    								Joe P.<br/>
    								<img src="http://www.green-egg.net/images/temp_icons.png" alt="icons" /><br/>
    								<a href="javascript: void(0)">contact</a>
    							</div>
    
    							<div class="member_box padright">
    								<img src="http://www.green-egg.net/images/temp_member_jane.png" alt="member photo" /><br/>
    								Jane D.<br/>
    								<img src="http://www.green-egg.net/images/temp_icons.png" alt="icons" /><br/>
    								<a href="javascript: void(0)">contact</a>
    							</div>
    
    							<div class="member_box">
    								<img src="http://www.green-egg.net/images/temp_member_joe.png" alt="member photo" /><br/>
    								Joe P.<br/>
    								<img src="http://www.green-egg.net/images/temp_icons.png" alt="icons" /><br/>
    								<a href="javascript: void(0)">contact</a>
    							</div>
    						</div>
    
    					</div>
    				</div>
    			</div>
    
    			<div class="advertisement pad_module_bottom">
    				<img src="http://www.green-egg.net/images/temp_ad_tonik.png" alt="Advertisement: Tonik" />
    			</div>
    
    			<div class="content_module pad_module_bottom">
    				<div class="inner">
    					<div class="header">
    						<div class="title">
    							Newest Members
    						</div>
    					</div>
    					<div class="main_small">
    						<div class="member_boxes">
    							<div class="member_box padright">
    								<img src="http://www.green-egg.net/images/temp_member_joe.png" alt="member photo" /><br/>
    								Joe P.<br/>
    								<img src="http://www.green-egg.net/images/temp_icons.png" alt="icons" /><br/>
    								<a href="javascript: void(0)">contact</a>
    							</div>
    
    							<div class="member_box padright">
    								<img src="http://www.green-egg.net/images/temp_member_jane.png" alt="member photo" /><br/>
    								Jane D.<br/>
    								<img src="http://www.green-egg.net/images/temp_icons.png" alt="icons" /><br/>
    								<a href="javascript: void(0)">contact</a>
    							</div>
    
    							<div class="member_box padright">
    								<img src="http://www.green-egg.net/images/temp_member_joe.png" alt="member photo" /><br/>
    								Joe P.<br/>
    								<img src="http://www.green-egg.net/images/temp_icons.png" alt="icons" /><br/>
    								<a href="javascript: void(0)">contact</a>
    							</div>
    
    							<div class="member_box">
    								<img src="http://www.green-egg.net/images/temp_member_jane.png" alt="member photo" /><br/>
    								Jane D.<br/>
    								<img src="http://www.green-egg.net/images/temp_icons.png" alt="icons" /><br/>
    								<a href="javascript: void(0)">contact</a>
    							</div>
    						</div>
    
    						<div class="more_container"><a href="javascript: void(0)" class="more">more &raquo;</a></div>
    					</div>
    				</div>
    			</div>
    
    		</div>
    
    <!-- END MAIN AREA -->
    	</div>
    </div>
    
    <script type="text/javascript">
    	startList = function() {
    		var navRoot = document.getElementById("nav");
    		var is_MSIE = false;
    		if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;
    
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
    				node.onmouseover = function() { this.className += " over"; }
    				node.onmouseout = function() {
    					this.className = this.className.replace(" over", "");
    					this.className = this.className.replace("over", "");
    				}
    
    				for(j=0; j<node.childNodes.length; j++) {
    					if(node.childNodes[j].nodeName=="UL"){
    						if(is_MSIE) {
    							var iframe = document.createElement('<iframe frameborder="0">');
    							iframe.style.position = 'absolute';
    							iframe.border = '0';
    							iframe.frameborder = 0;
    							iframe.style.backgroundColor = '#f00';
    							iframe.src = 'about:blank';
    							node.appendChild(iframe);
    						}
    					}
    				}
    			}
    		}
    	}
    	startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.
    
    	document.getElementById('nav').style.zIndex = 2000;
    </script>
    
    </body>
    </html>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4309
    That sprite is rather simple. Why do you need an image? Why can't you just use background-color and borders?

    Why are you using the startList function in all browsers instead of just IE?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    341
    Rep Power
    38
    i didn't post the actual sprite used, just a wireframe of it. the buttons need to be images (or my life would be a whole lot easier). it is possible for me to use css borders and just have the insides be the image, but i will still run in to the same issue, it'll just be slightly less obvious.

    i'm going to try keeping the javascript to only IE and use li:hover along side area where i use li.over and see if that helps any.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    341
    Rep Power
    38
    i still seem to get the issue on my laptop, but my home computer does not get the issue, not even when i was running startList on all browsers.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4309
    Which version(s) of Firefox did you test in? I didn't see this in FF2.0, FF1.5, or FF1.0 on WinXP. However, there was some flickering of the sub-menus in FF1.0, which is probably caused by the JavaScript code.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    341
    Rep Power
    38
    i'm not sure about my home computer where the bug is _not_ occuring, but my laptop is running FF2.0 (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6).

    I just got my laptop 2 days ago and I noticed that it anti-aliases all text in my browsers, which is kind of nice, but what ever is causing it may be causing some odd behaviors. for instance, the Log out link here on DevShed Forums in the upper left hand corner has a giant question mark next to it.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    341
    Rep Power
    38
    i'm noticing as i build more sprites, even ones without hover functionality, that this version of firefox is shifting some background positions by one pixel. very frustrating!

    forgot to mention that i'm on WinXP Pro SP2
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    341
    Rep Power
    38
    also, may i ask how you tested the code in all those browsers? do you have separate machines or a partitioned hard drive, or some kind of nifty trick that i should know about?
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4309
    Nope. I just install different versions of Firefox to different folders. And I have one special Firefox profile that I only use for Firefox 1.0 because it's not compatible with a lot of the extensions I use.
    Last edited by Kravvitz; August 24th, 2007 at 12:54 PM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo