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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts

    footer not staying a footer

    I've got the page below, using a tutorial for headers and footers that i found online. It worked fine, but then I tried to set up three columns of data and the footer won't stay at the bottom - I get this gap beneath the footer. Maybe somebody else can see why it's not pushing down to the bottom?

    For reference, you can find the actual page here: http://www.patrickmediagroup.com/tester6.html

    here's the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <style>
    html, body {
    height: 100%;
    padding:0px;
    margin : 0px;
    overflow-x: hidden;
    overflow-y: auto;
    }
    
    img {border:none;
    }
    
    
    #header {
    background-image:url(test_images/top_bg1.gif);
    background-repeat:repeat-x;
    z-index:3;
    height:10px;
    overflow:visible;
    }
    
    
    #nav ul
    {
    list-style: none;
    padding: 0;
    margin: 0;
    } 
    
    
    #container {
    min-height: 100%;
    margin-bottom: -135px;
    position: relative;
    background-color:#f0f0f0;
    background-image:url(test_images/bg.jpg);
    background-repeat:repeat-y;
    z-index:1;
    }
    
    #footer {
    height: 135px;
    position: relative;
    background-color:#000;
    background-image:url(test_images/bottom_bg.jpg);
    background-repeat:repeat-y;
    z-index:2;
    }
    
    .clearfooter {
    height: 135px;
    clear: both;
    }
    
    
    
    </style>
    
    <script>
    
    window.onresize = function(){
        var img = document.getElementById('fluidimage');
        img.style.height = "50%";
    };
    </script>
    
    <div id="container">
        <div id="header"><img src="test_images/page_top.gif" />
        
        <div style="height:1px;overflow:visible;position:relative;left:21px;top:139px;">
        <img class="fluidimage" src="test_images/arrow.gif" style="position:relative;left:1px;top:1px; height:47000%; width:20px;"/>
        </div>
           
          
        
        </div>
        <div id="main">
        <table height=100%><tr><td width=400 valign=top>
        
        
        <div style="">
        	<div style="overflow:visible;position:relative;left:1px;top:1px;">
          	<img src="test_images/logo1.png" style="position:relative;top:10px" />
            </div>
          	
            <br><br>
        	
            <a href="frontdoors.html"><img src="test_images/fn1.png" style="position:relative;left:43px;top:1px;height:50px; width:200px;"/></a>
            <br>
        	<br />
        	<a href="foodandflourish.html"><img src="test_images/ff_1.png" style="position:relative;left:43px;top:1px;height:50px; width:200px;"/></a>
            <br>
         	<br />
         	<a href="squarefootnews.html"><img src="test_images/sfn_1.png" style="position:relative;left:43px;top:2px;height:50px; width:200px;"/></a>
         </div>
        
        </td>
        <!--end column left -->
        
        
        <!-- column middle -->
        <td valign=top>
        <div style="">  
        <p style="position:relative; top:20px;z-index:10000;">    
        
    center content here.<br /><br />
    
    FIND OUT MORE &raquo;
    
    
     </p>
       
        </div>
        </td>
        <!-- end column middle -->
        
        
        <!-- column right -->
        <td valign=top>
        <div style="float:right;width:200px;">
        
         <div id="nav" style="height:0px;overflow:visible;float:right;position:absolute;right:40px;top:50px;z-indez:999;">
          <ul>
            <li><a href="#"><img src="test_images/b_hm1.gif" /></a></li>
            <li><a href="#"><img src="test_images/b_cmp1.gif" /></a></li>
            <li><a href="#"><img src="test_images/b_serv1.gif" /></a></li>
            <li><a href="#"><img src="test_images/b_pub1.gif" /></a></li>
            <li><a href="#"><img src="test_images/b_cnt1.gif" /></a></li>
          </ul>
         </div>
        
         <div style="float:right;margin-right:40px;position:relative;top:280px;width:170px;height:0px; z-index:900px; overflow:visible; border-bottom-color:#000; border-bottom-width:80px;border-bottom-height:1px; border:thin dotted;"><br /> Contact us today to find out
    more about what we can do
    for you! - like our flipbooks
    samples below.<br />
    <div style="height:0px;overflow:visible;"><img src="test_images/thmb1.gif"/>&nbsp; <img src="test_images/thmb2.gif"/>&nbsp; <img src="test_images/thmb3.gif"/></div><div style="float:right;margin-right:30px;position:relative;top:-140px;width:180px;height:0px; overflow:visible;"> </div>
    </div> 
        
        
        </div>
        </td>
       	</tr>
     	</table>
      <!-- end column right -->
      
         
        <p style="position:relative;top:1px;margin-left:4px;margin-right:4px;">
        
        <div class="clearfooter"></div>
     <!-- put something here and it'll extend the bottom -->
    </div><!—End Container—>
    
    <div id="footer"><table border=0 width=100% cellpadding=0 cellspacing=0><tr><td width=389 valign=top><img src="test_images/phone.jpg" /></td><td valign=top><img src="test_images/wn.gif" /><img src="test_images/p2.png" style="width:100%; position:absolute;left:-30px; bottom:135px; "/>
    <div style="height:5px; width:100%; background-image:url(test_images/dots.gif);background-repeat:repeat-x;"></div>
    <p style="color:white;margin-top:5px;margin-bottom:7px;line-height:1.59em; font-family:Georgia, 'Times New Roman', Times, serif; font-size:.85em; ">Patrick Media Group launches a new project:<br />
    Squarefood News! Check out the site at <br />
    www.squarefootnews.com</p>
    
    <div style="height:5px; width:100%; background-image:url(test_images/dots.gif);background-repeat:repeat-x;"></div>
    
    </td></tr></table></div>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts
    never mind! found it. a div tag was inside the table, when it should've been outside!
    phew!


  •  

    Posting Permissions

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