SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav menu buttons judder when clicking on one - why ?

    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.


    HTML Code:
    <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:

    Code:
    #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;
    }

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Urgh, much better if you provide a link.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

    :-)

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    #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.


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
  •