CODEWITHSUNDEEP
htmlcss
CalvT
CalvT

Reputation: 3213

Page Scrolls down when I click on Link

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>
            <a href="#close" class="close" title="close window">x</a>
          </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

Upvotes: 1

Views: 94

Answers (2)

jcaron
jcaron

Reputation: 17710

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.

Upvotes: 1

Paulo
Paulo

Reputation: 170

<a href="#close" class="close" title="close window">x</a>

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

Upvotes: 4

Related Questions