1

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!

halfer
  • 19,824
  • 17
  • 99
  • 186
Ekin
  • 1,957
  • 2
  • 31
  • 45
  • in gallery pages can you explain problem in detail what exactly you want also page takes a lot of time to load Please optimize images it seems that even thumbnail images are of high resolution instead you may use cropped version of it – Pravin W Mar 26 '14 at 10:46
  • Yes I know I'm waiting to get new images to change them. About the problem, If you open those pages both in chrome and firefox, you can see that in firefox there is still some space below the footer. In chrome it's all okay. Looks like somehow firefox is not getting the "overflow:hidden". – Ekin Mar 26 '14 at 10:51
  • You might be looking for this http://stackoverflow.com/questions/9126777/keep-footer-with-variable-height-on-bottom i.e. http://jsfiddle.net/dandv/t9mKA/ also it seems that you need to put footer inside your wrapper with above solution hope it helps – Pravin W Mar 26 '14 at 11:01
  • 1
    Not related but I'd suggest losing the 3mb background texture and replacing it with something a bit more user friendly. – Billy Moat Mar 26 '14 at 11:20
  • first of all as @BillyMoat suggested try using a seamless background with repeat-x and repeat-y instead of a full background with 3mb size. second I'm using FF28 and Chrome33 and I don't see any differences between them. – dippas Mar 26 '14 at 11:50
  • I changed it to jpg now it 200 something kb. I also tried clearing floats before floating the footer to left but still the same. I'm using FF28 and Chrome33 also. This is really weird. – Ekin Mar 26 '14 at 12:09
  • If for future questions you can refrain from pointing to your live site to illustrate the issue at hand, it is much appreciated. This question illustrates the main problem with external links - they become unavailable, and so people wanting to understand a question are prevented from doing so. I have removed them in this case. – halfer Jan 31 '16 at 17:11
  • 1
    @halfer You're totally right, this was on 2014, but thanks. – Ekin Feb 01 '16 at 01:28

1 Answers1

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Ekin
  • 1,957
  • 2
  • 31
  • 45
  • Hey @Ekin please look at my answer, because with your height at 180% or 220% in wrapper div if screen is not too higher the footer won't display, try open Developer tools (F12) on Firefox and Chrome and you'll notice that. – dippas Mar 26 '14 at 17:01