[Solved] Strange gap under footer. Only in firefox.

Ok, so I found a 2col+header+footer+100% height template here last night (which I currently can no longer find). Anyway, that version had a specifc pixel size and I wanted it to fill the page so I played around with it and finally got it working fine.

So today I start adding content to it and I noticed that if I add enough content so that it pushes the page off the bottom of the screen a small, 18px, gap apears under the footer and I just cant seem to fix it. This is only a problem in firefox though

Here's the css

/*** Style for LSB 2 Column Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } html,body{height:100%} body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#F2F6F9; /*** Background colour of page ***/ min-width:775px; /*** Content Width ***/ text-align:center; } input,select{ margin:0px; padding:0px; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0p

x}
.floatcontainer{display: inline-table;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:100%; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-20px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background:#FFCCCC; /*** Background colour of left column. Also has the left hand side shady

border image ***/
}
#wrapper{
display:table-cell;
position:relative;

}
* html #wrapper{ /*** for IE to reveal the content over to reveal the shady border (same width as

that). ***/
border:none;
}
#outer{
position:relative;
margin-left:200px; /*** Left Column Width ***/
/*** Center Column Width (takes into account left shady border width) ***/
background:#ADD8E6; /*** Background colour of center column. ***/
height:100%;
}
#float-wrap{
/*** Center Column Width (takes into account left and right shady border widths) ***/
float:left;
display:inline;
}
#center{
position:relative; /* fix for IE */
/*** Center Column Width (takes into account left and right shady border widths) ***/
float:right;
height:100%;
display:table;
width:100%;
}
#left{
float:left;
display:inline;
width:200px; /*** Left Column Width ***/
margin-left:-200px; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#clearheadercenter{
height:156px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:156px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:20px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:20px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:100%; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subfooter1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:20px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
width:100%; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subheader1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:156px;
overflow:hidden;
}
#container-left{}
#container-center{
text-align: left;
}

And here's the html

Your Page Title Here

Can anyone see what I'm doing wrong?

It seems that when ever I finally fix it it infact breaks it when there isn't enough content to push it down the page.