html - CSS bottom border hover "jitter" -


i have navigation bar give orange bottom border when hover on navigation buttons. problem whenever hover, border makes content/navigation buttons "jitter" aren't supposed to. have black bottom border on navigation bar @ times wont work change that.

html:

<div id="navbartop">         <ul>                 <li><a href="index.html">home</a></li>                 <li><a href="contact.html">contact</a></li>         </ul> </div> 

css:

#navbartop {     padding: 0;     background-image: url('navbarbackground1.png');     border-bottom: 1px solid #4c4c4c;     position: absolute;     bottom: 0;     text-align: center;     left: 0;     right: 0; }  #navbartop ul {     list-style: none;     width: 800px;     margin: 0 auto;     padding: 0;      display: inline-block; }  #navbartop li {     display: inline-block; }  #navbartop li {     display: block;     padding: 10px 25px;     text-decoration: none;     font-family: "arial";     color: #ffffff; }  #navbartop li a:hover {     border-bottom: 2px solid #ff8000; } 

the jittering seems caused adding 2px border @ bottom when hover. causes text rise bit. fix this, make sure there's 2px border changing #navbartop li a this:

#navbartop li {     display: block;     padding: 10px 25px;     text-decoration: none;     font-family: "arial";     color: #00ffff;     border-bottom: 2px solid transparent;  // <--- add line } 

that should stabilize things you.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -