Beginner Beginner - 3 months ago 15
CSS Question

how to get page to stop vertical scroll?

I have a really annoying issue. Im trying to create a page with a full background image which resizes and fills the browser screen. Currently its half working but for some reason have to scroll like 20-30px down. Which the user should not be able to do.

This is the page source:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/Scripts/backstretch.js" type="text/javascript"></script>

<script type="text/javascript">

/** var images = [

"/content/images/bghome.jpg",

"/content/images/background.jpg"

];

var index = 0;
$.backstretch(images[index], { speed: 500 });

setInterval(function () {

index = (index >= images.length - 1) ? 0 : index + 1;

$.backstretch(images[index]);

}, 5000);
**/
$.backstretch("/content/images/background.jpg");
</script>
</head>
<div class="menu-link">

<ul>

<li>
<a href="/Home/Index">home</a>
</li>
<li>
<a href="/content/1/10/background.html">profile</a>
</li>
<li>
<a href="/content/1/3/portfolio.html">portfolio</a>
</li>
<li>
<a href="/news/">news</a>
</li>
<li>
<a href="/project/">current projects</a>
</li>
<li class="on">
<a href="/content/1/6/awards.html">awards</a>
</li>
<li>
<a href="/ContactUs/">contact</a>

</li>

</ul> </div>

<div id="left-sidebar">

<div id ="logo">

<image src="/content/images/logo.png"/>
</div>
<div id = "leftcontent">
<p>
</p>
</div>
<div id ="foot">
<ul>
<li>
<a href="/content/2/20/privacy.html">Privacy</a>
</li>
<li>
<a href="/content/2/21/sitemap.html">Sitemap</a>
</li>
<li class="last">
<a href="/content/2/19/terms---conditions.html">Terms & Conditions</a>
</li>
</ul>
© 2012 SH Structures. All rights reserved. &nbsp;&nbsp;&nbsp;<image src="/content/images/footimg.png"/>
</div>
</div>
<div id="right-sidebar">
</div>
<div id="content">
<div id = "freestylecontent">
<h1>awards</h1>
<br><br><br>
<div id = "freecontent">
<p>
</p>
<br><br>
</div>
</div>
</div>
</html>


Css:

html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}

body {

}

/* IE7 Fix */
* html #container {
display: table;
height: 100%
}

/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}

/* IE6 Fix */
* html div#body {
overflow: visible;
}

div#container {
height: 100%;
height: auto !important;

background: url("left-sidebar-back.gif") repeat-y top left;
}

div#main {
overflow: auto;
padding-bottom: 100px;
}

div#header {
height: 100px;
background: #ba6f19;
border-bottom: 1px solid #000;
padding: 20px;
}

div#body {
overflow: hidden;
height: 100%;
}

div#content {
margin: 0px 0px 0px 415px;
width: 375px;
padding: 20px;
background:url(../images/greenfade.png);
opacity:0.8;
height:100%;
color:White;
}

div#left-sidebar {
width: 375px;
float: left;
height:100%;
padding: 20px;
background:black;
opacity:0.8;
color:White;
}

div#right-sidebar {
width: 260px;
float: right;
padding: 20px;
}

div#footer {
background: #ba6f19;
border-top: 1px solid #000;

position: relative;
height: 100px;
margin-top: -101px;
clear: both;
}

div#footer p {
padding: 20px;
margin: 0px;
}
.menu-link{
font-size:1em;
height:40px;
padding-left:10px;
width:100%;
margin-left:auto;
margin-right:auto;
background:black;

}

.menu-link a{
padding: 10px 0px 10px 0px;
height:40px;
color:#fff;
text-decoration:none;
float:left;
}

.menu-link ul {
padding:0px 0px 0px 20px;
}

.menu-link ul li
{
text-decoration:none;
float:left;
/**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
}

.menu-link ul li a {
color:#fff;
padding: 0px 10px 0px 10px;
line-height:40px;
display: block;
text-align:center;
}

.menu-link a:hover{
background:url(../images/menu-nav-hov.png) repeat-x;
cursor:pointer;
}

.menu-link ul li.on {
background:url(../images/menu-nav-hov.png) repeat-x;
/** background-position:center bottom;
background-repeat:no-repeat;
**/
}

/** Side Menu **/

.sideMenu ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}

.sideMenu ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}

.sideMenu ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}

.sideMenu li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}

.sideMenu li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}

.sideMenu h4{
display:none;
}

/** Footer **/

#foot
{
padding-left: 20px;
padding-right: 20px;
position:absolute;
bottom:0;
height:60px;
height:1.5em;
font-size:.8em;
}

#foot li a
{
padding: 10px 0px 10px 0px;
color:#fff;
text-decoration:none;
}


Am i missing something obvious? thanks

Answer

It's hard to tell exactly what you're asking, but if all you want to do is disable scrolling the page, you first need to add a <body> tag and give it the following style properties:

<body style="overflow:hidden;">
    <!-- Page contents -->
</body>
Comments