SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Location
    Finland
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Floating / Sticky footer problem

    Hi, guys!

    I'm building this responsive site with skeleton framework. My index page's footer work ok in every browser but
    for some reason my content page's footer don't work on FF, but in opera, safari and crome it will ?? And the css code class is the same for all of them ??

    ****
    .container {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -120px;
    }

    .container:after {
    content: "";
    display: block;
    }

    .site-footer, .container:after {
    /* .push must be the same height as footer */
    height: 120px;
    text-align: center;

    }

    .site-footer {
    background-image: url("../images/footer_bg_trans.png");
    background-position: center top;
    background-repeat: no-repeat;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    }

    ****


    - index page -> http://testi3.aada.fi/aada_web/
    - content page -> http://testi3.aada.fi/aada_web/me.html


    What i have missed?


    // Mika
    // Mika

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi nezperce2000. Welcome to the forums.

    It works for me in Firefox, but this really isn't a viable way to do a sticky footer. On a shorter screen, the footer sit over the top of the content, which is pretty rotten.

    Here is a step by step guide to doing a sticky footer properly: http://www.sitepoint.com/forums/show...66#post1239966

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,610
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, nezperce2000

    The following CSS3 property is causing the fixed footer to misbehave in Firefox.
    Code:
    * {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;
    }
    If the -moz- property is deleted or commented out, the footer seems to work as intended in FF.

    It is my understanding that this property is used in conjunction with rotation. Is it really necessary here? If so, perhaps it could be better targeted. I've seen the universal selector cause problems because it targets too many objects. This might be one of those cases.

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi Mika,
    What i have missed?

    I didn't look to what the differences are, but if I replace the me_layout.css by layout.css, the second page has the footer in the right place.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •