Having browser difference issues (Firefox) - overflow and/or height of wrapper

Question

I find that the footer is displayed properly on Chrome but it looks like it doesn't get overflow:hidden; on Firefox. The wrapper div is still going a little more below the footer.

<div class="wrapper6"> // at gallery.html
<div class="wrapper8"> // at galeri2013.html

Here are CSS properties of these two wrapper divs:

.wrapper6 {
   margin:0 !important;
   padding:0 !important;
   left:0;
   top:0;
   position:absolute;
   background:url(../images/texture.png) repeat;
   width:100%;
   height:180% !important;
   font-family: orator std;
   overflow:hidden;
}
.wrapper8 {
   margin:0 !important;
   padding:0 !important;
   left:0;
   top:0;
   position:absolute;
   background:url(../images/texture.png) repeat;
   width:100%;
   height:280% !important;
   font-family: orator std;
   overflow:hidden;
}

And properties for both footers;

galeri2013.html;

.footy4 {
   position:relative;
   display:inline !important;
   float:left;
   z-index:1;
   left:0;
   margin-bottom:-4.3%;
   transform:skewX(8deg);
   -webkit-transform:skewX(8deg);
   transform:skewY(-2.5deg);
   -webkit-transform:skewY(-2.5deg);
   background-color:#e81b1b;
   width:100%;
   height:120px;
   margin-top:96%;
   overflow:hidden;
}

gallery.html;

.footy7 {
   position:relative;
   display:inline !important;
   float:left;
   z-index:1;
   left:0;
   margin-bottom:-4.3%;
   transform:skewX(8deg);
   -webkit-transform:skewX(8deg);
   transform:skewY(-2.5deg);
   -webkit-transform:skewY(-2.5deg);
   background-color:#e81b1b;
   width:100%;
   height:120px;
   margin-top:150%;
   overflow:hidden;
}

I think I'm not using best ways to handle it, if you see anything wrong/not the best way of coding please tell me so that I can learn and also improve myself.

To clarify again, I want to have my footer stuck to bottom on Firefox, as it is on Chrome!

Answer 1

Okay! After some hours I saw what's wrong... I've put the footer div into wrapper div and everything went normal!

So this is what I did to achieve it basically;

<div class="wrapper">
    //some other content
<div class=footer>
    //footer content
</div>
</div>

and I've put backoverflow:hidden; to wrapper which I had removed to test what is wrong. You can see what other css properties I've used up here at the question.

Hope these can be useful to someone and thanks for everyone who helped.