Tabbed Pagination Help - html

Question

I have built a simple pagination list and styled it using CSS. However, I've run into a problem. Because I want the list elements to be centred on the page, I've used a container div with relative positioning.
Here's an illustration that shows what I have at the moment, and what I would like to achieve:
Notice the seeming lack of a border on the current page number.
Here's the HTML markup for the list:
<div class="pagination-cont">
<ul class="pagination">
<li class="disabled"><span>< Previous</span></li>
<li class="current"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="separator">…</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>Next ></li>
</ul>
</div>
and here's the CSS:
div#content div.pagination-cont {
float: left;
width: 100%;
overflow: hidden;
position: relative;
margin: 15px 0;
border-top: 1px solid #d1d1d3;
padding-bottom: 2px;
background-color: #e4e4e6;
}
div#content div.pagination-cont ul.pagination {
clear: left;
float: left;
list-style: none;
padding: 0;
margin: 0;
position: relative;
left: 50%;
text-align: center;
}
div#content ul.pagination li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
font-size: 110%;
text-transform: uppercase;
font-weight: bold;
}
div#content ul.pagination li.disabled span,
div#content ul.pagination li.separator {
color: #bbb;
text-shadow: 1px 1px 0 #f2f2f2;
padding: 10px 20px;
display: block;
}
div#content ul.pagination li.separator {
border-left: 1px solid #d1d1d3
}
div#content ul.pagination li a {
display: block;
padding: 10px 20px;
color: #004276;
text-decoration: none;
border-left: 1px solid #d1d1d3;
margin-bottom: 1px
}
div#content ul.pagination li.current span {
display: block;
padding: 10px 20px;
border-left: 1px solid #d1d1d3;
background-color: #fff;
color: #999;
border-bottom: 1px solid #d1d1d3
}
Any help would be gratefully received!

Answer 1

You almost have it, just remove "overflow:hidden" from "div.pagination-cont" (that is keeping the selected item from shifting to the top) and add "top:-1px; position:relative;" to: "ul.pagination li.current span", that should do the trick.
You can see it as http://jsfiddle.net/LGwDV/

Answer 2

remove the
border-top: 1px solid #D1D1D3;
from
div#content div.pagination-cont
and write here
div#content ul.pagination li {
border-top: 1px solid #d1d1d3;
}
and also write one line in
div#content ul.pagination li.current {
border-top: medium none;
}
DEMO