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 (http://www.hotdesign.com/seybold/everything.html). 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.