Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts

    Page Expansion 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
    New Coder
    Join Date
    Sep 2010
    Posts
    18
    Thanks
    2
    Thanked 1 Time in 1 Post
    wihch browser are you having this problem in?

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by funkymonk View Post
    wihch browser are you having this problem in?
    Firefox and Chrome

    EDIT: And IE and Safari
    Last edited by Psionicsin; 09-16-2010 at 10:23 PM.

  • #4
    New Coder
    Join Date
    Sep 2010
    Posts
    18
    Thanks
    2
    Thanked 1 Time in 1 Post
    so youre saying the full depensions of the page are too long in height or in width?

  • #5
    New Coder
    Join Date
    Sep 2010
    Location
    Dutchland
    Posts
    33
    Thanks
    0
    Thanked 7 Times in 6 Posts
    Looking at the source code, it seems you're closing the body tag twice. I'm no expert at html but I'm pretty sure that's not the way it works. Also, according to my Webdeveloper toolbar, the footer part of the page (with the 'copyright' message and certification links) is 675px high, as is the part above that, essentially the body. Have you got code for us to look at?

  • #6
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Yep.

    Indextest.php:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta name="author" content="Brandon Moner" />
    <meta name="keywords" content="photography, pictures, photos, portraits, camera, senior, family, children, baby, newborn, special, wedding, modeling, fashion, spring, holiday" />
    <meta name="description" content="Ruth Olson Photography is a photography studio located in Westland, MI that specializes in all forms of portraiture." />
    <meta name="language" content="English" />
    <meta name="copyright" content="Ruth Olson Photography" />
    <title>Ruth Olson Photography</title>
    
    <link rel="stylesheet" type="text/css" media="screen, print, projection"  href="./css/index.css"></link>
    <?php require("./js/jsref.htm"); ?>
    </head>
    
    <body>
    <div  id="home">
    <div id="background"></div>
    <div id="headerxmedia"><?php require("header/header.php"); ?>
    </div>
    <div id="navigationxmedia"><?php require("navigation/navigation.php"); ?>
    </div>
    <div id="stagexmedia"><?php require("content/homegal.php"); ?></div>
    <div id="footerxmedia"><?php require("footer/footer.php"); ?>
    </div>
    </div>
    </body>
    </html>
    Header.php:
    Code:
    <div  id="header">
    <div id="logobutton"><a  href="http://www.rutholsonphoto.com/"  title="logo"></a></div>
    <div id="facebookbutton"><a  href="http://www.facebook.com/pages/Westland-MI/Ruth-Olson-Photography/328300073878?"  title="facebook"></a></div>
    <div id="twitterbutton"><a  href="http://twitter.com/rutholsonphoto"  title="twitter"></a></div>
    <div id="rssbutton"><a  href="http://twitter.com/statuses/user_timeline/67102189.rss"  title="rss"></a></div>
    </div>
    Footer.php:
    Code:
    <div  id="pid0footer">
    <div id="background"></div>
    <div id="certification"></div>
    <div id="copyrighttext">
     <p>Copyright &copy; 2003-2010 Rutholsonphoto.com</p>
    </div>
    </div>
    Homegal.php:
    Code:
    <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>
    Last edited by Psionicsin; 09-16-2010 at 10:57 PM.

  • #7
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by funkymonk View Post
    so youre saying the full dimensions of the page are too long in height or in width?
    Too long in height. I specifically set it to 675px tall as the site design doesn't call for needless scrolling.

    I didn't notice it until just yesterday that this problem is present, and I have no idea why.Width wise, from what I can visually tell, the site is just fine.

  • #8
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pepineros View Post
    Looking at the source code, it seems you're closing the body tag twice. I'm no expert at html but I'm pretty sure that's not the way it works. Also, according to my Webdeveloper toolbar, the footer part of the page (with the 'copyright' message and certification links) is 675px high, as is the part above that, essentially the body. Have you got code for us to look at?
    I'm not seeing this double body tag closing when I open up source and developer tools.

  • #9
    New Coder
    Join Date
    Sep 2010
    Location
    Dutchland
    Posts
    33
    Thanks
    0
    Thanked 7 Times in 6 Posts
    You're right, my mistake. I think I found it though: you seem to open the <div id="background"> twice, once just after the body tag (which is correct, I guess) and once just before the copyright notice, at the bottom of the page (inside the footerxmedia and pid0footer divs). I gleaned this information by rightclick -> view source, and seeing as you're using .php files I'm not sure where in your code you'll find this, but I think that's what's causing the problem. Maybe you call two php files which both have the background div in them?

    .:EDIT:. I think both the indextest.php and footer.php files have the background div in them. If you call the footer.php file inside the indextest.php file, the background div is included twice. Could that be it?
    Last edited by Pepineros; 09-16-2010 at 11:09 PM. Reason: Additional info

  • #10
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pepineros View Post
    You're right, my mistake. I think I found it though: you seem to open the <div id="background"> twice, once just after the body tag (which is correct, I guess) and once just before the copyright notice, at the bottom of the page (inside the footerxmedia and pid0footer divs). I gleaned this information by rightclick -> view source, and seeing as you're using .php files I'm not sure where in your code you'll find this, but I think that's what's causing the problem. Maybe you call two php files which both have the background div in them?

    .:EDIT:. I think both the indextest.php and footer.php files have the background div in them. If you call the footer.php file inside the indextest.php file, the background div is included twice. Could that be it?
    Haha that was it! Thank you! Pays to have a second set of eyes for sure!


  •  

    Posting Permissions

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