Page Scrolls down when I click on Link - html

Question

I'm trying to build a page that has a lightbox - but I don't want any javascript on it.
I found a tutorial on how to do this, but when I started to add it, I noticed that everytime I click on the link, it scrolls down ever so slightly, hiding the top border of the page.
How can I stop this? Because it ruins the look of the site
HTML
<div id="container">
<div id="header-row">
<div class="logo span4">
<h1>Title <span>.</span></h1>
</div>
</div>
<div id="content">
<p></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-form">
<div class="box">
<h3>About</h3>
<p>
</p>
x
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
CSS
html, body {
background: #f8f8f8 url(../img/pattern.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #e75967;}
strong { font-weight: 700; }
a:hover { text-decoration: none; }
::-moz-selection { background: #e75967; color: #fff; text-shadow: none; }
::selection { background: #e75967; color: #fff; text-shadow: none; }
.logo h1 {
margin-top: 7px;
padding-left: 50px;
font-family: 'Lobster', cursive;
font-size: 38px;
font-weight: 400;
color: #555;
}
.logo h1 span { color: #e75967; }
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Here is a JSFiddle
Sorry for all the code - but it wont let me post it without it

Answer 1

x
using #close in a link like this makes your browser jump to that ID

Answer 2

Haven't pinpointed exactly on which elements it makes a difference, but you can simply add this your your CSS:
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
And it won't jump any more.