Results 1 to 2 of 2

Thread: My navigation buttons do a little jump when being hovered over.

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Jan 2014
    Posts
    95

    My navigation buttons do a little jump when being hovered over.

    My navigation buttons on my site do a little flicker to the right and also a little flicker below when being hovered over. How do I stop this.
    This is the CSS i have used to create my navigation bar.

    #nav {
    background-image:url(../Images/red-gradient.jpg);
    border-top:2px black solid;
    border-bottom:2px black solid;
    border-left:2px black solid;
    border-right:2px black solid;
    padding-left:6%;
    margin-right:1px;
    margin-top:-2px;
    width:838px;


    }
    #nav ul {
    list-style: none;
    margin: 0 ;
    padding: 0 ;
    line-height: 1;
    display: block;
    zoom:1;
    }
    #nav ul:after {
    content: ' ';
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden

    }
    #nav ul li {
    float: left;
    display: block;
    padding: 0px;
    margin: 0 6% 0 0;


    }
    #nav ul li a {
    color: white;
    text-decoration:none;
    display: block;
    padding: 15px 26px;
    font-family: 'open sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 15px;
    position: relative;

    }
    #nav ul li a:hover {
    background-color:#FF2D2D;
    padding-bottom:16px;
    border-bottom:2px;
    text-shadow:1;
    border-bottom-color:white;
    border-bottom-style:solid;
    font-family:comic sans ms, Geneva, sans-serif;
    font-size:15px;
    color:White;
    margin:-1px}



    #nav ul li a:after {
    content: '';
    display: block;
    position: absolute;
    right: -9px;
    top: 19px;
    height: 6px;
    width: 6px;
    background:white;
    opacity: .7;

    }
    Last edited by junied32167; Mar 24th, 2014 at 09:47 AM.

  2. #2
    PowerPoster SJWhiteley's Avatar
    Join Date
    Feb 2009
    Location
    South of the Mason-Dixon Line
    Posts
    2,256

    Re: My navigation buttons do a little jump when being hovered over.

    It looks like, at a quick glance, you are going from a 2 pixel border to a 3 pixel border.
    "Ok, my response to that is pending a Google search" - Bucky Katt.
    "There are two types of people in the world: Those who can extrapolate from incomplete data sets." - Unk.
    "Before you can 'think outside the box' you need to understand where the box is."

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
  •  



Click Here to Expand Forum to Full Width