If anyone is familiar with the footerStick Alt method found at:
<!-- m --><a class="postlink" href="http://www.themaninblue.com/writing/perspective/2005/08/29/">http://www.themaninblue.com/writing/per ... 005/08/29/</a><!-- m -->
Can you please help me troubleshoot this code. I cannot seem to get it to work in FireFox:
<HTML>
<HEAD>
<title>Example FooterStick Alt</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:"Trebuchet MS", Georgia, Arial, Verdana, Sans-Serif;}
html{
height:100%;}
body{
height:100%;
background-color: #eee;
text-align: center;/* IE */}
#webForm{
height:100%;
position:relative;}
#container{
position:relative;
width: 750px;
min-height: 100%;
margin: 0 auto;
text-align:left;
padding: 0 1px 84px 1px;
border: solid #bbb;
border-width: 0 1px 0 1px;
background: white;}
* html #container{
height: 100%;}
#footer
{
width: 750px;
height: 84px;
position: relative;
margin: -84px auto 0 auto;
background: blue url(images/pieces/grad_blu-wh_bkbot.jpg);
text-align: left;
}
p{padding:1em;}
</style>
</HEAD>
<body>
<div id="container">
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one lastus paragraphtus</p>
</div> <!--End of #container-->
<div id="footer">This is the footer</div>
</body>
</HTML>Set padding-bottom:0; in #containerSetting padding:bottom; on #container makes it work for short-content pages, but long-content pages will have the bottom 84 pixels covered up by the 84px high #footer.
Any other thoughts?
<!-- m --><a class="postlink" href="http://www.themaninblue.com/writing/perspective/2005/08/29/">http://www.themaninblue.com/writing/per ... 005/08/29/</a><!-- m -->
Can you please help me troubleshoot this code. I cannot seem to get it to work in FireFox:
<HTML>
<HEAD>
<title>Example FooterStick Alt</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:"Trebuchet MS", Georgia, Arial, Verdana, Sans-Serif;}
html{
height:100%;}
body{
height:100%;
background-color: #eee;
text-align: center;/* IE */}
#webForm{
height:100%;
position:relative;}
#container{
position:relative;
width: 750px;
min-height: 100%;
margin: 0 auto;
text-align:left;
padding: 0 1px 84px 1px;
border: solid #bbb;
border-width: 0 1px 0 1px;
background: white;}
* html #container{
height: 100%;}
#footer
{
width: 750px;
height: 84px;
position: relative;
margin: -84px auto 0 auto;
background: blue url(images/pieces/grad_blu-wh_bkbot.jpg);
text-align: left;
}
p{padding:1em;}
</style>
</HEAD>
<body>
<div id="container">
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one</p>
<p>Hello, pluribus unim textus maximus floridius juniper ropata torento mifuero guptalis mitelus lineus morpheus maximus optimus prime omega alpha centauri twenty-one lastus paragraphtus</p>
</div> <!--End of #container-->
<div id="footer">This is the footer</div>
</body>
</HTML>Set padding-bottom:0; in #containerSetting padding:bottom; on #container makes it work for short-content pages, but long-content pages will have the bottom 84 pixels covered up by the 84px high #footer.
Any other thoughts?