Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Post Content/Navigation Movement problem

    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.

  • #2
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    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
    Last edited by Aurora.Light; 05-16-2011 at 04:46 AM.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi thanks. I figured it out somehow lol. I put in a height and got it working.

  • #4
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by nickHiebert View Post
    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

  • #5
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •