Advanced Search

Results 1 to 5 of 5

Thread: Navigation is jumping...

  1. #1
    Join Date
    Jan 2007
    Posts
    181
    Thanks
    5
    Thanked 3 Times in 3 Posts

    Default Navigation is jumping...

    Site: www.intriguegraphics.com/about-us.html

    If you click on photography, it makes the nav jump...all the other ones work fine. I'm assuming its a length issue within the CSS but I cant quite figure it out..

    Code:
    #nav {
    
    	margin: 0px;
    	padding-left:5px;
    
    	list-style: none;
    
    	}
    
    	
    
    #nav ul {
    
    	margin: 0px;
    
    	padding-left:5px;
    
    	list-style: none;
    
    	}
    
    
    
    #nav a {
    	background: #FFFFFF;
    	color: #000000;
    	text-decoration:none;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	padding: 0px 5px 0px 5px;
    	}
    
    	
    
    #nav a:hover {
    
    	background: #42a4cb;
    	color: #FFFFFF;
    	display: block;
    	text-decoration: none;
    	border-bottom:none;
    	font-size:12px;
    	padding: 0px 5px 0px 5px;
    	}
    
    
    
    #nav li {
    	float: left;
    	margin: 0px;
    	padding-left: 5px;
    	}
    
    	
    
    #nav li li {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	width: 160px;
    	}
    
    	
    
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    
    	background: #333333;
    
    	width: 160px;
    
    	float: none;
    
    	margin: 0px;
    
    	padding: 6px 10px 5px 10px;
    	padding-left:10px;
    
    
    	}
    
    	
    
    #nav li li a:hover, #nav li li a:active {
    
    	background: #555555;
    
    	}
    
    
    
    #nav li ul {
    
    	position: absolute;
    
    	width: 10em;
    
    	left: -999em;
    
    	}
    
    
    
    #nav li:hover ul {
    
    	left: auto;
    
    	display: block;
    
    	}
    
    	
    
    #nav li:hover ul, #nav li.sfhover ul {
    
    	left: auto;
    
    	}
    Thanks!
    Jon

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You really shouldn't be using tables for layout, it causes several problems. The layout you want can be easily achieved with semantic code and simple css which would also be cross-browser compatible.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Jan 2007
    Posts
    181
    Thanks
    5
    Thanked 3 Times in 3 Posts

    Default

    I plan on redoing it in css... I'm actually working on it now... its just rough for me because I'm not that great with css

  4. #4
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Than I suggest doing it in CSS - and see if the navigation still jump.
    Jeremy | jfein.net

  5. #5
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    Code:
    #nav a:hover {
    
    	background: #42a4cb;
    	color: #FFFFFF;
    	display: block;
    	text-decoration: none;
    	border-bottom:none;
    	font-size:12px;
    	padding: 0px 5px 0px 5px;
    	}
    your code has several problems.. but for this only remove the display:block from the above selected code.

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
  •