Pagination items move on hover and adding border - css

Question

This menu items are moving when hover.How can I make the items static and not moving when hovering.
Same thing happens when putting a specific width and height.
Here's the NEW JSFiddle link.
http://jsfiddle.net/tagaawang/zTCCf/3/
/CSS/
<style type="text/css">
.div{margin:0 auto;position:relative;margin-top:40px;}
.pagination{height: 42px;
clear: right;
top: -21px;
left: 0;
position: absolute;}
.pagination ul{width: 100%;max-height: 42px;}
.pagination li{font-family: 'Open Sans', sans-serif;
list-style: none;
cursor: pointer;
font-weight: 600;
line-height: 23px;
text-indent: 8px;
color: white;
background-color: #0083DE;
height: 26px;
font-size: 14px;display: inline-block;
width: 26px;margin-left:10px; }
.pagination li.selected{background-color: white;
border: 4px solid #F0F0F0;
padding: 5px;
position: relative;
font-weight: 600;
color: #0F7ABE;
font-family: 'Open Sans', sans-serif;}
.pagination li:hover{background-color: #0083DE;
border: 4px solid #F0F0F0;
padding: 5px;
position: relative;
font-weight: 600;
color: #ffffff;
font-family: 'Open Sans', sans-serif;}​
</style>
html
<div class="div">
<div class="pagination">
<ul>
<li>1</li>
<li class="selected">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
​

Answer 1

based on your code, the hover and/or selected state goes along with a border of 4px:
border: 4px solid #F0F0F0;
This causes a shift of 4 pixel offcourse, solution:
Add a border with same color as the background of your site as placeholder, then when hovering, change border-color.
.pagination li{
border: 4px solid #fff;
}
.pagination li.selected, .pagination li:hover {
border-color: #F0F0F0;
}