Question

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 (1680×1050).

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;
}

#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

Answer 1

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.