html - Why is my 100% height waaay oversized? -


i'm trying track down why background containers "background-overlay" , "background-gradient" pushing height of document beyond content displayed? i'm not sure what's going on here. simple.

here template in work http://jordan.rave5.com/tmp/

i'm not sure code problem think 2 aforementioned classes.

possible culprits:

            #background-overlay {                 z-index: 100;                 width: 100%;                 height: 100%;                 margin: 0;                 padding: 0;                 background-color: #273722;                 background-image: url(images/main-bg.png);                 background-repeat: repeat;                 background-attachment: fixed;                 opacity: 0.0;                 top: 0;                 bottom: 0;             }              #background-gradient {                 position: fixed;                 z-index: 200;                 width: 100%;                 height: 100%;                 margin: 0;                 padding: 0;                 background-image: url(images/main-grad.png);                 background-repeat: repeat-x;                 background-position: top;                 top: 0;                 bottom: 0;                 overflow: auto;             } 

html

    <div id="background-overlay">         <div id="background-gradient">              <div id="header-image-grad">                      <div id="header">                         <div id="header-container">                             <div id="navigation-container">                                 <div id="navigation">                                     <span id="nav">navigation area...</span>                                 </div>                             </div>                         </div>                     </div>                  <div id="header-image-border">                     <img class="header-img" src="slides/fields.jpg" alt="panoramic fields" />                     <div class="image-grad"></div>                 </div>              </div>              <div id="body">                 <div id="body-content"></div>                 <div class="loading"><img src="images/loading.gif" alt="loading content" /></div>             </div>              <div id="footer">                 <br />                 <div id="footer-content">                     footer area...                 </div>             </div>          </div>     </div> 

remove margin-top:100% in #footer-content id


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -