title: Link in sticky footer not clickable in Firefox and Chrome
body: <p>I am using a sticky footer like described in:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page">How do you get the footer to stay at the bottom of a Web page?</a></li>
  <li><a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="nofollow noreferrer">http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</a></li>
  </ul>
  
  <p>I have a paragraph with a link that I want to be at the bottom of the page, so I put it in .footer.</p>
  
  <p>The problem is that the link is not clickable in Firefox 3.5.2 and Chrome, it is behind .push. It does work in IE7 and IE8 but I guess that doesn´t say much.</p>
  
  <p>I have toyed around with z-indexes but that does not work. By the way, I need the position:relative in #page to position some stuff inside that div.</p>
  
  <p><strong>Is there a way to make a link in .footer clickable in all browsers?</strong></p>
  
  <p>The relevant parts of the code:</p>
  
  <p><strong>css</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div id="page"&gt;
    &lt;div id="wrapper"&gt;
      &lt;div id="contents"&gt;bla bla&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="footer"&gt;bla bla&lt;/div&gt;
    &lt;div class="push"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
      &lt;p&gt;&lt;a href="http://www.some-site.com/"&gt;Some Text&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>