Nav menu buttons judder when clicking on one - why ?

[benisjamin]

Hi all,

Its really starting to bug me now as to why my nav menu button graphics judder when clicking on one .
By judder I mean any button to the right of the one clicked moves ever so slightly.

Ive checked all my margins/padding etc and cannot see anything that is causing the problem, so any help on this will greatly help . The site is not currently live which is abit of a bummer so hope the code below is of use.

<div id="nav">
	<ul>
		<li><a href="index.html" class="home" accesskey="1" title="Home page">Home</a></li>
		<li><a href="epc_faq.html" class="faq" title="EPC FAQ">EPC FAQ</a></li>
		<li><a href="epc_prices.html" class="prices" title="EPC prices">EPC Prices</a></li>
		<li><a href="order_epc.html" class="order" title="Order an EPC">Order an EPC</a></li>
		<li><a href="epc_links.html" class="links" title="Links">Links</a></li>
		<li><a href="contact.html" class="contact" title="Contact">Contact</a></li>
	</ul>
</div><!--nav ends-->

and my CSS being:

#nav ul{
	list-style:none;
}

#nav ul li{
	display:inline;
}

#nav ul li a{
	float:left;
	text-decoration:none;
	display:block;
	margin:1.65em 0.2em 0;
	text-indent:-999em;
	overflow:hidden;
}

#nav ul li a.home{
	background:url(images/menu.png) no-repeat -5px 0;
	height:40px;
	width:108px;
	}

#nav ul li a.faq{
	background:url(images/menu.png) no-repeat -114px 0;
	height:40px;
	width:118px;
}
		
#nav ul li a.prices{
	background:url(images/menu.png) no-repeat -235px 0;
	height:40px;
	width:118px;
}

#nav ul li a.order{
	background:url(images/menu.png) no-repeat -354px 0;
	height:40px;
	width:132px;
}

#nav ul li a.links{
	background:url(images/menu.png) no-repeat -487px 0;
	height:40px;
	width:132px;
}

#nav ul li a.contact{
	background:url(images/menu.png) no-repeat -822px 0;
	height:40px;
	width:132px;
	float:right;
}	

/*=====Stlyes the hover states on the navigation=====*/

#nav ul li a.home:hover,body#home #nav ul li a.home{
	background:url(images/menu.png) no-repeat -5px -67px;
}

#nav ul li a.faq:hover,body#faq #nav ul li a.faq{
	background:url(images/menu.png) no-repeat -114px -66px;
}

#nav ul li a.prices:hover,body#prices #nav ul li a.prices{
	background:url(images/menu.png) no-repeat -235px -66px;
}

#nav ul li a.order:hover,body#order #nav ul li a.order{
	background:url(images/menu.png) no-repeat -354px -66px;
}

#nav ul li a.links:hover,body#links #nav ul li a.links{
	background:url(images/menu.png) no-repeat -487px -66px;
}

#nav ul li a.contact:hover,body#contact #nav ul li a.contact{
	background:url(images/menu.png) no-repeat -822px -66px;
	float:right;
	margin-right:0.25em;
}

[Black Max]

Urgh, much better if you provide a link.

[benisjamin]

Hi Black Max,

Unfortunately the site is not live, so how would you propose the best route for me to show the code without having to upload all images/ files etc ? Or is this the only route I have ?

:-)

[Black Max]

This seems to be a fairly complex site, judging from the code snippets you posted. While I'd look first at those background images, it's possible that the problem is in some other portions of code (perhaps the active link states?). Better to see the whole thing in action.

[benisjamin]

Ive found what cures the problem, but Im definatley not in favour of it because it shouldnt be used, that being if you just place a 1px border around the main "a" so:

#nav ul li a{
	float:left;
	text-decoration:none;
	display:block;
	margin:1.65em 0.2em 0;
	text-indent:-999em;
	border:1px solid #333;
}

This stops the judder of the buttons altogther,but take the 1px border away and it judders away!

Hopefully the site will be going live in the next 7-14 days, so Ill have to bump this post again, and you can look at the site in action.