CSS: How to stop the effects of freezing from clicking on my text?

Question

I hope you understand the question, here you can see an example:

http://jsfiddle.net/nFbJY/

When you look at any of the links that they move :(

Any tips for resolving this issue?

HTML:

<div class="links"> <ul> <li><a href="home.html">Home</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></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 style is on whether 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; } 

Thus, you put the tag A only instead of LI and A. Therefore, instead of stacks of effects that cause adding / bordering on 2 elements, you call them on only one. Nothing is stopping ...

Answer 3

Check out this 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><a href="home.html">Home</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> 

Answer 4

The easiest way is to add margin to your a elements and add margin: 0 to a:hover . Thus, buttons always have the same width. Or you can do something similar with padding (or border ).

EDIT: in your case, use this CSS (especially 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 5

Switch the CSS definition of 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><a href="home.html">Home</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> 

Answer 6

Try moving 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;} a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;} cases>

 li:hover { background-color:yellow; }