Css bottom edge "jitter" slope
I have a navigation bar that I would like to give an orange bottom border when you hover over the navigation buttons. The only problem is that whenever you hover over, the border makes the content / navigation buttons "shake" which they shouldn't. Also I already have a black bottom border on the navbar so it won't work to 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 a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #ffffff;
}
#navBarTop li a:hover {
border-bottom: 2px solid #FF8000;
}
+3
source to share
1 answer
The jitter seems to be caused by the addition of an extra 2px border at the bottom when you hover over. This makes the text appear slightly elevated. To fix this, make sure there is always a 2px border by changing #navBarTop li a
to this:
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #00ffff;
border-bottom: 2px solid transparent; // <--- add this line
}
This should stabilize things for you.
+2
source to share