PDA

View Full Version : footer not staying a footer



turpentyne
Feb 27th, 2012, 08:38 PM
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:
<!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>

turpentyne
Feb 27th, 2012, 08:57 PM
never mind! found it. a div tag was inside the table, when it should've been outside!
phew!