Page is a not externally linkable
Paul_o_b - 7:48 pm on Sep 19, 2012 (gmt 0)
Hi,
If you want to add borders without a jump in the page then at the same times as you add borders reduce the padding by the same amount and the element will stay the same size.
If you really want the border outside you can use a negative margin to drag the border wide without affecting other elements (or use the outline property as already mentioned above).
e.g.Both examples below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
margin:0 0 1em;
padding:0;
list-style:none;
border:5px solid #ccc;
float:left;
clear:left;
}
li { float:left; }
a {
float:left;
height:30px;
line-height:30px;
padding:2px 30px;
color:#000;
background:red;
}
li:nth-of-type(odd) a { background:blue }
a:hover {border:2px solid yellow}
.test1 a:hover{padding:0 28px}
.test2 a:hover{margin:-2px;position:relative}
</style>
</head>
<body>
<ul class="test1">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="test2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>
As the article refers, there is also 6.1. ‘box-sizing’ property [w3.org] which was initially thought to be the solution for this, but is now at risk element and may not go forward.
I don't quote understand the reasoning for box-sizing being at risk when it has about 93% browser support (caniuse.com) and people (http://paulirish.com/2012/box-sizing-border-box-ftw/) are actively promoting it!