Why is the scroll bar appearing on every page?

I get a scrollbar for the body on every page and it scrolls maybe 2em in height. This is happening on every browser IE, Chrome, Opera, and FF even in full screen (1680x1050).

I can't simply do overflow:hidden for the body because of the third test page uses SlimBox2 might needs to scroll down.

Three test pages:

http://dev.mykeepsakephotography.com

http://dev.mykeepsakephotography.com/gallery_couples.php

http://dev.mykeepsakephotography.com/invitations_weddings.php

body
{
   font-family: Georgia, "Times New Roman", Times, serif;
   background-color: #000;
   color: #fff;
   padding: 0;
   margin: 0开发者_StackOverflow中文版;
}

#wrapper
{
   height: 725px;
   width: 950px;
   background: #000;
   margin: 0 auto;
   padding:0;
   overflow: hidden;
   border: 1px solid red; /* added for border definition */
}  

Thank you,

LF4

The li.dir's within your nav are causing the scrolling. Removing them eliminates the issue. Within them, the ul.dropdown ul has an attribute

 top:100%

which is causing the issue. The nested menus here are causing elements to appear below the bottom of the page. Fix this and your problems are history :)

Throw a position:relative; on your ul.dropdown > li > a, ul.dropdown li.dir { selector and everything will work splendidly.

Position:absolute will position it absolutely to the nearest parent with position:relative, or failing that-- the document itself.

The slimbox.css has the following settings:

#lbOverlay {
background-color:#000000;
cursor:pointer;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:9999;
}

I winder if height should be 725px, the same as #wrapper.