1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Web page height not responding

Discussion in 'Web Design & Development' started by DrDing, Jan 27, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. DrDing

    DrDing Thread Starter

    Joined:
    Dec 19, 2010
    Messages:
    62
    Hello all,

    I'm having a bit of a problem cutting down on the height of a website I'm working on. No matter what I change the height to in the css, the page doesn't shrink. I think it might be a conflicting position element somewhere but I've tried for example setting the height to 900 then setting any "top:" attributes to well below 900px and nothing, it won't shrink down. As far as I know too there's nothing invisible/hidden and stuck down at the bottom to keep the page from resizing.

    Don't know if this is helpful but originally all this css was created and positioned when the site was at a width of 1024 and a height I believe of 1300. Which in the end was way too long, and that's where I ran into the problem when I tried to cut the height attribute down.

    Here's my css code (the html btw is completely controlled with this external css):

    Code:
    body{
        background-color:#3f1c50;
        font-family:calibri;
        font-size:14;
        margin-left:5%;
        margin-right:5%;
        width: 1024px;
        height: 500px;
    }
    
    a{
        color:#532f91;
        text-decoration: none;
    }
    
    #mainbanner{
        position:relative;
        top:0px;
        z-index: 1;
        margin-left: 5%; 
        margin-right: 5%;
    }
    
    #photobanner{
        position: relative;
        margin-left: 30%;
        top: 50px;
        width: 676px;
        height:159px;
    }
    
    #sidenavback{
        position: relative;
        margin-left: 5%;
        top: -106px;
        z-index: 1;
    
    }
    
    #sidenav{
        font-family: corbel;
        font-size: 16px;
        text-align: center;
        position: relative;
        z-index: 2;
        top: -470px;
        left: 62px;
        
    }
    
    #divider{
        color:#4d77a9;
        
    }
    
    #sublink{
        padding: 13px;
        text-decoration: none;
            
    }
    
    #sublink a:hover{
        color:#000000;
        
    }
    
    #ohcab{
        position:relative;
        border-width:0;
        margin-left: 10%;
        top: -730px;
        left: 235px;
        width:330px;
        height:92px;
    }
    
    #cvcab{
        position: relative;
        z-index: 2;
        border-width:0;
        top: -600px;
        left: 315px;
    
    }
    
    #contentbox{
        position: relative;
        z-index: 1;
        top: -680px;
        left: 300px;
    
    }
    
    #para1{
        width: 350px;
        position: relative;
        top: -1145px;
        left: 330px;
        z-index: 2;
    }
    
    #cardframe{
        position:relative;
        left: 50px;
        top: -1100px;
        z-index: 2;
        width:525px:
        height:315px;
    }
    
    #cardtext{
        padding: 0;
        width: 600px;
        position: relative;
        z-index: 3;
        top: -1500px;
        left: 50px;
    
    }
    
    #sidephoto{
        position: relative;
        z-index:2;
        top: -1800px;
        left: 800px;
    
    }
    
    #footerback{
        position:relative;
        z-index:1;
        width: 1024px;
        height: 111px;
       left: 51px;
        top: -1700px;
        
    }
    
    #addresstext{
        font-family:corbel;
       font-weight:bold;
        position:absolute;
        z-index:2;
        margin-left: 745px;
        margin-top: -1805px;
        
    }
    
    #copyright{
        color:#ffffff;
        font-style:italic;
        font-size:small;
        position:absolute;
        z-index:2;
        margin-top: -1740px;
        margin-left: 60px;
        
    }
    
    #icons{
        border-width:0;
        position:absolute;
        z-index:2;
        margin-top: -1750px;
        margin-left: 575px;
    }
    
    /*menu css*/
    
    /* Main menu settings */
    
    #mainmenu {
        background-color:#ffffff;
       clear:both;
       float:left;
       margin:0;
       padding:0;
       width:1024px;
       height:42px;
       font-family:cambria; /* Menu font */
       font-size:14px; /* Menu text size */
       z-index:1000; /* This makes the dropdown menus appear above the page content below */
       position:absolute;
       margin-left: 51px; 
    }
    
    /* Top menu items */
    
    #mainmenu ul {
       margin:0;
       padding:0;
       list-style:none;
       float:right;
       position:relative;
       right:50%;
       top:5px;
    }
    
    #mainmenu ul li {
       margin:0 0 0 1px;
       padding:0;
       float:left;
       position:relative;
       left:50%;
       top:1px;
    }
    
    #mainmenu ul li a {
       display:block;
       margin:0;
       padding:.6em .5em .4em;
       font-size:14px;
       line-height:1em;
       background:#ffffff;
       text-decoration:none;
       color:#532f91;
       font-weight:bold;
    
    }
    
    #mainmenu ul li.active a {
       color:#fff;
       background:#000;
    }
    
    #mainmenu ul li a:hover {
       background-color:#d5cbce6; /* Top menu items background colour */
       color:#ffffff;
    
    }
    
    #mainmenu ul li:hover a,
    #mainmenu ul li.hover a { /* This line is required for IE 6 and below */
       background:#d5cbe6; /* Top menu items background colour */
       color:#000000;
     
    }
    
    /* Submenu items */
    
    #mainmenu ul ul {
       display:none; /* Sub menus are hiden by default */
       position:absolute;
       top: 2em;
       left:0;
       right:auto; /*resets the right:50% on the parent ul */
       width:10em; /* width of the drop-down menus */
       
    }
    #mainmenu ul ul li {
       left:auto;  /*resets the left:50% on the parent li */
       margin:0; /* Reset the 1px margin from the top menu */
       clear:left;
       width:100%;
    }
    
    #mainmenu ul ul li a,
    #mainmenu ul li.active li a,
    #mainmenu ul li:hover ul li a,
    #mainmenu ul li.hover ul li a{ /* This line is required for IE 6 and below */
       font-size:14px;
       font-weight:normal;   /* resets the bold set for the top level menu items */
        color:#ffffff;
        background:#6d49ab;
         line-height:1.4em;   /* overwrite line-height value from top menu */
    }
    
    #mainmenu ul ul li a:hover,
    #mainmenu ul li.active ul li a:hover,
    #mainmenu ul li:hover ul li a:hover,
    #mainmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
        background:#d5cbe6;
       color:#000000;
    }
    
    /* Flip the last submenu so it stays within the page */
    #mainmenu ul ul.last {
       left:auto; /* reset left:0; value */
       right:0; /* Set right value instead */
    }
    
    /* Make the sub menus appear on hover */
    #mainmenu ul li:hover ul,
    #mainmenu ul li.hover ul { /* This line is required for IE 6 and below */
       display:block; /* Show the sub menus */
    }
    
    
    
    Any help would be greatly appreciated!
     
  2. DrP

    DrP

    Joined:
    Jul 23, 2005
    Messages:
    739
    Link?
     
  3. DrDing

    DrDing Thread Starter

    Joined:
    Dec 19, 2010
    Messages:
    62
    Sadly it's not live but I can post my html code for you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>The Wilson School - Laying the Foundation for a Successful Future</title>
    <meta name="Generator" content="Alleycode HTML Editor" />
    <meta name="description" content="Independent School Specializing in Differentiated Learning Styles, Gifted and Talented, 21st Century Skills, Fine and Performing Arts"/>
    <meta name="keywords" content="private school New Jersey, gifted and talented, wilson school, preparatory school, top elementary school, independent school morris county, pre k school ,kindergarten school, independent school, fine performing arts k-8, technology k-8"/>
    <link rel="stylesheet" type="text/css" href="css/subpage.css" />
    </head>
    
    <body>
    
    <!--HEADER AND NAVIGATION-->
    
            <!--Main Navigation-->
    <div id="mainmenu">
        <ul>
        
            <li><a href="#">About Wilson&nbsp;&nbsp;</a>
                <ul>
                    <li><a href="#">The Wilson Tradition</a>
                    <a href="#">The Wilson Faculty</a>
                    <a href="#">Directions</a>
                    <a href="#">Contact Us</a>
                    </li>
                </ul>
            </li>
            
            <li><a href="#">The Wilson Difference&nbsp;&nbsp;</a>
                <ul>
                    <li><a href="#">The Wilson Difference</a></li>
                    <li><a href="#">The Wilson Curriculum</a></li>
                    <li><a href="#">The Wilson Education Plan</a></li>
                    <li><a href="#">The Wilson Toolkit</a></li>
                    <li><a href="#">Success after Wilson</a></li>
                </ul>
            </li>
            
            <li><a href="#"> Prospective Students&nbsp;&nbsp;</a>
                <ul>
                    <li><a href="#">Applying to Wilson</a></li>
                    <li><a href="#">Admissions FAQ</a></li>
                    <li><a href="#">Request Information</a></li>
                    <li><a href="#">Applying for Financial Aid</a></li>
                </ul>
            </li>
            
            <li><a href="#">Current Students&nbsp;&nbsp;</a>
                <ul>
                    <li><a href="#">News &amp; Events</a></li>
                    <li><a href="#">Useful Forms</a></li>
                    <li><a href="#">Grade Pages</a></li>
                    <li><a href="#">School Calendar</a></li>
                    <li><a href="#">After-School Offerings</a></li>
                </ul>
            </li>
            
            <li><a href="#">Alumni and Development&nbsp;&nbsp;</a>
                <ul>
                    <li><a href="#">Giving to the Wilson School</a></li>
                    <li><a href="#">Make a Gift</a></li>
                    <li><a href="#">Alumni Events</a></li>
                    <li><a href="#">Alumni &amp; Development FAQ</a></li>
                    <li><a href="#">Update Alumni Profile</a></li>
                </ul>
            </li>
            
            <li><a href="#">Student Showcase&nbsp;</a></li>
            
            <li><a href="#">Contact Us</a></li>
            
        </ul>
            
    </div>
    <!--[if lt IE 7]><script type="text/javascript" src="script/iehoverfix.js"></script><![endif]-->
            
            <!--End Main Navigation-->
            
            <!--Banner-->
            <img src="images/mainbanner.png" id="mainbanner"/>
    
            <!--end Banner-->
    
    
    <!--END HEADER-->
    
    
    <!--CONTENT SECTION
    the content that's between this comment tag and it's end is subject to change
    page to page
    -->
    
    <!--Photo banner-->
    
    <img src="images/banner1.png" id="photobanner" width="676" height="159" />
    
    
    <!--end Photo banner-->
    
    <!--submenu-->
    
        <img src="images/navback.png" id="sidenavback" />
        <table id="sidenav" border="0">
        <tr><td id="sublink"><a href="#"><b style="background-color:#532f91; color:#ffffff;">The Wilson Difference</b></a></td></tr>
        <tr><td id="divider">------------------------------</td></tr>
        <tr><td id="sublink"><a href="#">The Wilson Curriculum</a></td></tr>
        <tr><td id="divider">------------------------------</td></tr>
        <tr><td id="sublink"><a href="#">The Wilson<br /> Education Plan</a></td></tr>
        <tr><td id="divider">------------------------------</td></tr>
        <tr><td id="sublink"><a href="#">The Wilson Toolkit</a></td></tr>
        <tr><td id="divider">------------------------------</td></tr>
        <tr><td id="sublink"><a href="#">Success After Wilson</a></td></tr>
        </table>
    
    <!--end submenu-->
    
    
    <!--ohcab-->
    
        <img src="images/ohcab.png" id="ohcab"/>
    
    <!--end ohcab-->
    
    <!--cv cab-->
    
        <img src="images/cv_cab.png" id="cvcab"/>
    
    <!--end cv cab-->
    
    <!--text content-->
    
    <img src="images/contentbox.png" id="contentbox"/>
    <div id="para1">You want your children to have the best possible future. You want them to be happy, successful, and secure.  The Wilson School does too.  We believe that the foundation your children receives in primary school is the best 
    predictor for their future success.</div>
    
    <img src="images/cardback.png" id="cardframe"/>
    
    <div id="cardtext">
    <table border="0">
    <tr><td colspan="2"><b>&nbsp;&nbsp;&nbsp;&nbsp;For the last century, the Wilson School has been providing families like yours with
    <br />&nbsp;&nbsp;&nbsp;&nbsp;an alternative:</b></td></tr>
    <tr><td>
        <ul>
        <li><b>Individualized Curriculum:</b> Wilson works with you and your child to design a personalized curriculum that is custom-tailored to address your child's strengths and needs.</li>
    <br />
        <li><b>Accelerated Curriculum:</b> Wilson's curriculum builds on a "baseline" that is generally 1- to 3 years ahead of state standards.  Despite this acceleration, the program is designed to facilitate your child's integration into more traditional educational environments.</li>
    
        </ul>
    </td>
    <td>
        <ul>
        <li><b>Individual Evaluation:</b>  Students are evaluated to identify academic, emotional, social and artistic strengths and areas for improvement.  This written evaluation is used to personalize the curriculum to suit the needs, gifts and talents of your child.</li>
    <br />
        <li><b>Systematic Method:</b> The Wilson process is a systematic educational method that uses the best practices in individualized pedagogy to address your child's talents and gifts.</li>
        </ul>
    </td></tr>
    </table>
    </div>
    
    <img src="images/photo1.png" id="sidephoto"/>
    
    <!--end text content-->
    
    <!--END CONTENT SECTION-->
    
    
    <!--FOOTER-->
    
            <img src="images/footerback.png" id="footerback" width="1024" height="111"/>
    
            <!--RSS icons-->
            <div id="icons">
            <a href="http://twitter.com/#!/thewilsonschool"><img src="images/twittericon.png"/></a>
            <a href="http://www.facebook.com/pages/The-Wilson-School/285708787824?ref=ts"><img src="images/facebookicon.png"/></a>
            <a href="http://www.flickr.com/photos/thewilsonschool/sets/"><img src="images/flickericon.png"/></a>
            </div>
    
            <!--end RSS icons-->
    
            <!--Address box-->
            <div id="addresstext">
            The Wilson School
            <br/>
            271 Boulevard
            <br/>
            Mountain Lakes, NJ 07046
            <br/>
           <div style="position:relative;margin-left:190px;margin-top:15px;">
           (973) 334-0181
           </div>
            </div>
    
            <!--end address box-->
    
            <div id="copyright">
            &copy; 2011 The Wilson School - All rights reserved
            </div>
    
    <!-- END FOOTER-->
    
    
    </body>
    </html>
    
    
    
    
     
  4. DrP

    DrP

    Joined:
    Jul 23, 2005
    Messages:
    739
    Sorry, but I find it much easier to help when given a link, especially when there is so much markup to look at and the TSG site's code boxes aren't wide enough and I'm usually feeding a baby with one hand while helping on here...

    Could you perhaps put it in an obscure folder on a domain somewhere?
     
  5. DrDing

    DrDing Thread Starter

    Joined:
    Dec 19, 2010
    Messages:
    62
    No worries :D. I ended up fixing the problem. I just started the css file again from scratch and implemented the code piece by piece to narrow down what was wrong. I'm thinking it was my repeated use of "position:relative" because after I changed all those to absolutes and repositioned them, I could add and delete elements without the page growing and remaining "stretched out", if that makes any sense.

    Was a super weird situation, but it's ok now. Thanks for offering to help me though, I appreciate it!
     
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/977338

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice