title: Sticky footer not working in Firefox when using a table display
body: <p>I am using the sticky footer technique outlined in <a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="nofollow">this</a> post in my website. For 90% of the pages on my site the sticky footer works perfectly. In the other 10% of pages I am running into an interesting issue in Firefox. Essentially in these pages I want to center the content of my page vertically so I am adjusting the CSS code in the post as so:</p>
  
  <pre><code>    html, body {
      height: 100%;
      }
  
      .wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -4em;
      display: table; /* &lt;--- THE NEW LINE OF CODE */
      }
  
      .footer, .push {
      height: 4em;
      }
  </code></pre>
  
  <p>This allows me to vertically center the div inside of <code>.wrapper</code> by simply assigning it to the following class:</p>
  
  <pre><code>.table_row {
      display: table-row;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>In Safari, Chrome, etc., the sticky footer remains placed at the bottom of the page and the content is nicely centered vertically. In Firefox, however, the sticky footer is place immediately following the content causing the content to get squished to the top of the page below the header. Here is a sample of what the HTML might look like in this situation:</p>
  
  <pre><code>     &lt;html&gt;
          &lt;head&gt;
              &lt;link rel="stylesheet" href="layout.css" ... /&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div class="wrapper"&gt;
                  &lt;div class="table_row"&gt;&lt;p&gt;Your website content here.&lt;/p&gt;&lt;/div&gt;
                  &lt;div class="push"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="footer"&gt;
                  &lt;p&gt;Copyright (c) 2008&lt;/p&gt;
              &lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>and <a href="http://jsfiddle.net/TY65A/1/" rel="nofollow">here</a> is its JSFiddle.</p>
  
  <p>I have tried adjusting heights, min-heights, etc. in CSS but have had no luck. At this point I am at a complete loss on a solution so any help or guidance is appreciated.</p>
  
  <p>Thanks.</p>