Navigation is jumping...

[Jon101]

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..

#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

[Snookerman]

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.

[Jon101]

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

[Nile]

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

[monicasaha]

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