CSS: How do I stop hover effects from pushing my text? - html

Question

I hope you understood the question, you can see an example here:
http://jsfiddle.net/nFbJY/
When you scroll over any of the links they move :(
Any advice on how to solve this issue?
HTML:
<div class="links">
<ul>
<li>Home</li>
<li>Pricing</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS:
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}

Answer 1

Most of your styling resides on the li, try moving them to the <a> tag instead
li
{
float: left;
margin: 0 .15em;
}
a, a:active, a:visited {
border: 1px solid #CCC;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 3px 10px 3px 10px;
}
a:hover
{
border: 1px solid blue;
background-color:yellow;
}

Answer 2

Change your CSS to this:
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left;}
a {margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a:hover {border: 1px solid blue; background-color:yellow; }
This way you're styling the A tag only instead of both LI and A. So instead of the effects stacking causing padding/border on 2 elements you're only causing it on one. Nothing gets pushed around....

Answer 3

Check this one http://jsfiddle.net/huhu/Tn2HV/
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li { float:left; }
li a { margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px; }
li a:hover { background-color:yellow;}
<div class="links">
<ul>
<li>Home</li>
<li>Pricing</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

Answer 4

Try to hover the li element instead of a
a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}
li:hover { background-color:yellow; }

Answer 5

The easiest way would be to add a margin to your a elements and add margin: 0 to a:hover. That way, the buttons are always the same width. Or, you can do someting similar with padding (or border).
EDIT: In your case, use this CSS (esp. the last 2 lines):
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a { margin: 0 11px; }
a:hover { border: 1px solid blue; margin: 0; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}

Answer 6

Switch the CSS definition a:hover to li:hover.
http://jsfiddle.net/nFbJY/3/
div.links
{
float: left;
padding-top:15px;
}
ul
{
list-style:none;
}
li
{
float: left;
margin: 0 .15em;
padding: 3px 10px 3px 10px;
border: 1px solid #CCC;
border-radius: 5px;
-moz-border-radius: 5px;
}
li:hover
{
border: 1px solid blue;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 3px 10px 3px 10px;
background-color:yellow;
}
<div class="links">
<ul>
<li>Home</li>
<li>Pricing</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>