Results 1 to 3 of 3

Thread: Page Extension Problem

  1. #1
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Page Extension Problem

    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:

    Code:
    /*********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.

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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
    Code:
    <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>

  3. #3
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by azoomer View Post
    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
    Code:
    <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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •