Content/Navigation Movement problem

nickHiebert · 05-16-2011, 03:36 AM

The link: http://bit.ly/kCDPIS

I'm having issues with the navigation (a dropdown navigation). When you hover over the navigation links the content area moves down.

So if someone has a solution to stop it from moving that would be great.

PS: I'm viewing this in Firefox. (That's all I'm worried about at the moment)

Thanks.

Aurora.Light · 05-16-2011, 03:44 AM

set height instead of padding-bottom on the li

Code:

float: left;
display: block;
text-align: center;
position: relative;
padding: 4px 10px 4px 10px;
margin: 7px 30px 0 0;
border: none

Code:

height: 30px;
padding: 0px 10px 0px 10px;

then set a line-height instead of the padding of 4px on top and bottom

nickHiebert · 05-16-2011, 03:48 AM

Hi thanks. I figured it out somehow lol. I put in a height and got it working.

Aurora.Light · 05-16-2011, 03:50 AM

Quote:

Originally Posted by nickHiebert

Hi thanks. I figured it out somehow lol. I put in a height and got it working.

yeah the height will work, but try using line-height instead of padding

its good practice

Aurora.Light · 05-16-2011, 03:53 AM

Code:

#sub_nav ul li a {
     position: relative; 
     display: block;
     float: left; 
     width: 113px;
     height: 36px;
     line-height: 36px;
     border-right: 1px solid #C1C1C1;
     color: #565656;
     text-align: center;
     font-size: 12px;
     font-weight: bold;
     text-shadow: white 0px 1px 0px;
     border-top: 1px solid #C1C1C1;
     border-bottom: 1px solid #C1C1C1;

take a look at livestream.com tabs