Issue with the CSS border on hover

Question

I am customizing a style and I have a problem with the border. When I flew over the element, it is not static (it moves to the right because of the border).

I have noticed this problem too on IP.Board and I can't find a solution: http://screencast.com/t/49DgJmXuCN0v and with the border removed, all is perfect: http://screencast.com/t/n3JVAYFQRxK

If anyone can help me, thanks.

Answer 1

Simply add box-sizing: border-box; to your element. for more information http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

A border normally increases the dimensions of the area occupied by an element. This causes subsequent content to be pushed forward, though the exact effects depend on many settings. Trying to avoid this lead to problems, since the context area dimensions would shrink if the total dimensions remain the same when a border is added. But there are several other options:

1. Set initially a transparent border and change just its color on hover.
2. Set initially a color of the same color as the element's background. This is just a variant of the above.
3. Don't set border at all but outline. Outlines appear on top (in the z direction) of anything else, possibly covering some content, but not changing layout. This is slightly simpler than the first two options, but with slighly more limited browser support (old versions of IE, you know).

 <style> body { background: white; color: black; } .a:hover { border: solid red medium; } .b { border: solid transparent medium; } .b:hover { border-color: red; } .c { border: solid white medium; } .c:hover { border-color: red; } .d:hover { outline: solid red medium; } </style> <p><span class=a>Illustrating the problem.</span> What happens on mouseover? <p><span class=b>This has transparent border initially.</span> What happens on mouseover? <p><span class=c>This has white border initially.</span> What happens on mouseover? <p><span class=d>No border, but outline.</span> What happens on mouseover? <p>That's all folx!