Page Extension Problem

[PsionicSin]

Hey guys!

Here's the page in question: Ruth Olson Test Page

The page dimensions are supposed to be 900*675, yet the page scrollable for for more than the set given height of 675px.

Here's the CSS coding I have:

/*********HOUSES CSS STYLING FOR ALL MASTER PAGES*********/

/***Main Layout CSS***/

#navigationxmedia  {
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 90px;
   z-index: 4;
   width: 180px;
}

#headerxmedia  {
   visibility: visible;
   position: absolute;
   left: 3px;
   top: 0px;
   z-index: 5;
   width: 897px;
}

#footerxmedia  {
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 630px;
   z-index: 2;
   width: 900px;
}

#stagexmedia  {
   visibility: visible;
   position: absolute;
   left: 180px;
   top: 90px;
   z-index: 3;
   width: 720px;
   height: 540px;
}

#home  {
   margin: 0px auto 0px auto;
   width: 900px;
   position: relative;
}

#background  {
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 1;
   width: 900px;
   height: 675px;
   background-color: #282828;
   background-image: none;
}

html, body  {
   padding: 0px;
   margin: 0px;
   background-color: #282828;
}

/***Header CSS***/

#rssbutton a,
#twitterbutton a,
#facebookbutton a  {
   background-repeat: no-repeat;
   display: block;
   height: 62px;
   background-position: 0% 0px;
   font-size: 62px;
   line-height: 62px;
}

#facebookbutton a:hover,
#rssbutton a:hover  {
   background-position: -63px 0%;
}

#facebookbutton,
#rssbutton  {
   visibility: visible;
   position: absolute;
   top: 14px;
   z-index: 2;
   width: 63px;
   height: 62px;
}

#twitterbutton a:hover  {
   background-position: -64px 0%;
}

#logobutton a:hover  {
   background-position: -400px 0%;
}

#facebookbutton a  {
   width: 63px;
   background-image: url(../header/headermedia/facebookbutton.png);
}

#twitterbutton a  {
   width: 64px;
   background-image: url(../header/headermedia/twitterbutton.png);
}

#facebookbutton  {
   left: 658px;
}

#twitterbutton  {
   visibility: visible;
   position: absolute;
   left: 722px;
   top: 14px;
   z-index: 2;
   width: 64px;
   height: 62px;
}

#logobutton a  {
   background: url(../header/headermedia/logobutton.png) no-repeat 0% 0px;
   display: block;
   width: 400px;
   height: 82px;
}

#rssbutton a  {
   width: 63px;
   background-image: url(../header/headermedia/rssbutton.png);
}

#logobutton  {
   visibility: visible;
   position: absolute;
   left: 24px;
   top: 8px;
   z-index: 2;
   width: 400px;
   height: 82px;
}

#rssbutton  {
   left: 787px;
}

#header  {
   margin: 0px auto 0px auto;
   width: 900px;
   position: relative;
}

#shell  {
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 1;
   width: 900px;
   height: 90px;
   background-color: #282828;
   background-image: none;
}

/***Footer CSS***/

#copyrighttext p  {
   font: 13px/16px Arial;
   margin: 0px;
   color: #C0C0C0;
   text-align: left;
}

#copyrighttext  {
   visibility: visible;
   position: absolute;
   left: 24px;
   top: 15px;
   z-index: 2;
   width: 279px;
}

#certification  {
   background: url(../footer/footermedia/certification.png) no-repeat;
   visibility: visible;
   position: absolute;
   left: 689px;
   top: 2px;
   z-index: 2;
   width: 161px;
   height: 41px;
}

#pid0footer  {
   margin: 0px auto 0px auto;
   width: 900px;
   position: relative;
}

/***Stage CSS***/

/***Navigation CSS***/

.arrowlistmenu{
width: 177px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(../navigation/navigationmedia/bar.png) repeat-x center left;
margin: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../navigation/navigationmedia/baractive.png);
}

.arrowlistmenu .overheader{
background-image: url(../navigation/navigationmedia/barhover.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #c0c0c0;
background: url(../navigation/navigationmedia/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 80%;
}

.arrowlistmenu ul li a:visited{
color: #c0c0c0;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FFFFFF;
background-color: #202020;
}

Does anyone know what could be going on that's making the page longer than what it actually is, and thereby scrolling? Just to clarify, it should NOT be scrollable at all.

[azoomer]

You have </body> three times on the page and the <div id="background></div> appears twice.
try yo delete what is highlighted in red and see what happens

<body>
<div  id="home">
<div id="background"></div>
<div id="headerxmedia"><body>
<div  id="header">

<div id="logobutton"><a  href="http://www.anonymized/"  title="logo"></a></div>
<div id="facebookbutton"><a  href="http://www.facebook.com/pages/Westland-MI/anonymized/328300073878?"  title="facebook"></a></div>
<div id="twitterbutton"><a  href="http://twitter.com/anonymized"  title="twitter"></a></div>
<div id="rssbutton"><a  href="http://twitter.com/statuses/user_timeline/67102189.rss"  title="rss"></a></div>
</div>
</body></div>
<div id="navigationxmedia"><div class="arrowlistmenu">

<h3 class="menuheader" style="cursor: default" href="../whatsnew.php">What's New...</h3>

<h3 class="menuheader expandable">About</h3>
<ul class="categoryitems">
<li><a href="../aboutruth.php">About Ruth</a></li>
<li><a href="../aboutstaff.php">About the Staff</a></li>

</ul>

<h3 class="menuheader" style="cursor: default" href="../gallery.php">Gallery</h3>

<h3 class="menuheader expandable">Senior Challenge</h3>
<ul class="categoryitems">
<li><a href="../senchallenge.php">What's the Challenge?</a></li>
<li><a href="../votenow.php">Vote Now</a></li>
</ul>

<h3 class="menuheader expandable">Prices</h3>
<ul class="categoryitems">

<li><a href="../pricesenior.php">Senior</a></li>
<li><a href="../pricechildren.php">Children</a></li>
<li><a href="../pricefampets.php">Family | Pets</a></li>
<li><a href="../pricemnb.php">Maternity | Newborn</a></li>
<li><a href="../pricepromobus.php">Promo | Business</a></li>
<li><a href="../pricespecwed.php">Special Occasion | Wedding</a></li>
<li><a href="../priceproducts.php">Products</a></li>
</ul>

<h3 class="menuheader" style="cursor: default" href="../faq.php">FAQ</h3>

<h3 class="menuheader" style="cursor: default" href="../contact.php">Contact</h3>

<h3 class="menuheader" style="cursor: default" href="../login.php">Log-In</h3>

</div></div>
<div id="stagexmedia"><script type="text/javascript" src="./js/jqFancyTransitions.1.8.js"></script>

<div id='slideshowHolder'>
 <img src='./content/homegalmedia/img01.jpg' alt=''/>
 <img src='./content/homegalmedia/img02.jpg' alt=''/>
 <img src='./content/homegalmedia/img03.jpg' alt=''/>

 <img src='./content/homegalmedia/img04.jpg' alt=''/>
 <img src='./content/homegalmedia/img05.jpg' alt=''/>
 <img src='./content/homegalmedia/img06.jpg' alt=''/>
 <img src='./content/homegalmedia/img07.jpg' alt=''/>
 <img src='./content/homegalmedia/img08.jpg' alt=''/>
 <img src='./content/homegalmedia/img09.jpg' alt=''/>
 <img src='./content/homegalmedia/img10.jpg' alt=''/>
</div>

<script>
$('#slideshowHolder').jqFancyTransitions({ width: 770, height: 540, strips: 15, delay: 3000, position: 'top', direction: 'random', navigation: false, links: false });

</script></div>
<div id="footerxmedia"><body>
<div  id="pid0footer">
<div id="background"></div>
<div id="certification"></div>
<div id="copyrighttext">
 <p>Copyright &copy; 2003-2010 anonymized</p>
</div>
</div>
</body>
</div>
</div>
</body>

</html>

[PsionicSin]

You have </body> three times on the page and the <div id="background></div> appears twice.
try yo delete what is highlighted in red and see what happens

<body>
<div  id="home">
<div id="background"></div>
<div id="headerxmedia"><body>
<div  id="header">

<div id="logobutton"><a  href="http://www.anonymized/"  title="logo"></a></div>
<div id="facebookbutton"><a  href="http://www.facebook.com/pages/Westland-MI/anonymized/328300073878?"  title="facebook"></a></div>
<div id="twitterbutton"><a  href="http://twitter.com/anonymized"  title="twitter"></a></div>
<div id="rssbutton"><a  href="http://twitter.com/statuses/user_timeline/67102189.rss"  title="rss"></a></div>
</div>
</body></div>
<div id="navigationxmedia"><div class="arrowlistmenu">

<h3 class="menuheader" style="cursor: default" href="../whatsnew.php">What's New...</h3>

<h3 class="menuheader expandable">About</h3>
<ul class="categoryitems">
<li><a href="../aboutruth.php">About Ruth</a></li>
<li><a href="../aboutstaff.php">About the Staff</a></li>

</ul>

<h3 class="menuheader" style="cursor: default" href="../gallery.php">Gallery</h3>

<h3 class="menuheader expandable">Senior Challenge</h3>
<ul class="categoryitems">
<li><a href="../senchallenge.php">What's the Challenge?</a></li>
<li><a href="../votenow.php">Vote Now</a></li>
</ul>

<h3 class="menuheader expandable">Prices</h3>
<ul class="categoryitems">

<li><a href="../pricesenior.php">Senior</a></li>
<li><a href="../pricechildren.php">Children</a></li>
<li><a href="../pricefampets.php">Family | Pets</a></li>
<li><a href="../pricemnb.php">Maternity | Newborn</a></li>
<li><a href="../pricepromobus.php">Promo | Business</a></li>
<li><a href="../pricespecwed.php">Special Occasion | Wedding</a></li>
<li><a href="../priceproducts.php">Products</a></li>
</ul>

<h3 class="menuheader" style="cursor: default" href="../faq.php">FAQ</h3>

<h3 class="menuheader" style="cursor: default" href="../contact.php">Contact</h3>

<h3 class="menuheader" style="cursor: default" href="../login.php">Log-In</h3>

</div></div>
<div id="stagexmedia"><script type="text/javascript" src="./js/jqFancyTransitions.1.8.js"></script>

<div id='slideshowHolder'>
 <img src='./content/homegalmedia/img01.jpg' alt=''/>
 <img src='./content/homegalmedia/img02.jpg' alt=''/>
 <img src='./content/homegalmedia/img03.jpg' alt=''/>

 <img src='./content/homegalmedia/img04.jpg' alt=''/>
 <img src='./content/homegalmedia/img05.jpg' alt=''/>
 <img src='./content/homegalmedia/img06.jpg' alt=''/>
 <img src='./content/homegalmedia/img07.jpg' alt=''/>
 <img src='./content/homegalmedia/img08.jpg' alt=''/>
 <img src='./content/homegalmedia/img09.jpg' alt=''/>
 <img src='./content/homegalmedia/img10.jpg' alt=''/>
</div>

<script>
$('#slideshowHolder').jqFancyTransitions({ width: 770, height: 540, strips: 15, delay: 3000, position: 'top', direction: 'random', navigation: false, links: false });

</script></div>
<div id="footerxmedia"><body>
<div  id="pid0footer">
<div id="background"></div>
<div id="certification"></div>
<div id="copyrighttext">
 <p>Copyright &copy; 2003-2010 anonymized</p>
</div>
</div>
</body>
</div>
</div>
</body>

</html>

Just saw that. I forgot to delete the body tag from the imported files, and the <div id="background></div> as well. Thanks.