Geek Answers Handbook

Link in sticky footer not available in Firefox and Chrome

I use a sticky footer as described in:

I have a paragraph with a link that I want to be at the bottom of the page, so I put it in .footer.

The problem is that the link is not available in Firefox 3.5.2 and Chrome, it is behind .push. It works in IE7 and IE8, but I think it is not so much.

I played with z-indexes, but this does not work. By the way, I need a position: relative in #page to place some things inside this div.

Is there a way to make the link in .footer available in all browsers?

Relevant parts of the code:

CSS

html, body {
    height: 100%;
}
#page {
    width: 962px;
    text-align: left;
    min-height: 100%;
    /* sticky footer part */
    height: auto !important;
    height: 100%;
    margin: 0 auto -90px;
    /* end sticky footer */
    position: relative;
}
/* sticky footer part */
.push, .footer {
    height: 90px;
}
.push {
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
}

HTML

<div id="page">
  <div id="wrapper">
    <div id="contents">bla bla</div>
  </div>
  <div id="footer">bla bla</div>
  <div class="push"></div>
</div>
<div class="footer">
    <p><a href="http://www.some-site.com/">Some Text</a></p>
</div>
+5
3

, postion: relative z-index :

.push, .footer {
    height: 90px;
    position: relative;
}
.push {
    z-index: 9000;
    position: relative;
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
    z-index: 9999;
    position: relative;
}
+9

webkit. z- , , -webkit-transform: translate (0,0); .

+1

, , , z-, , .

.footer, .push {
    height: 4em;
    position: relative;
    width: 90%;
    margin: 0 auto;
    z-index: -9000;
}
0

More articles:


All Articles