title: Firefox issue with position absolute inside an item with display: table-cell
body: <p>I have 3 li's that I am trying to line up horizontally and then position a span inside each of the li's.</p>
  
  <p>The spans get positioned correctly in Chrome but are well outside the boundary of the li's in Firefox.  </p>
  
  <p><a href="http://jsfiddle.net/brendan_rice/mPnCh/1/" rel="nofollow">http://jsfiddle.net/brendan_rice/mPnCh/1/</a></p>
  
  <p>Can anyone help please?</p>
  
  <pre><code>&lt;div id="blank-slate-steps"&gt;
     &lt;ul&gt;
        &lt;li class="first"&gt;
           &lt;h3&gt;&lt;em&gt;Step 1&lt;/em&gt;Create Something&lt;/h3&gt;
           &lt;p&gt;Once you have created Something Else you can Create Final Thing&lt;/p&gt;
           &lt;span&gt;&lt;/span&gt;
        &lt;/li&gt;
        &lt;li class="second"&gt;
           &lt;h3&gt;&lt;em&gt;Step 2&lt;/em&gt;Create Something Else&lt;/h3&gt;
           &lt;p&gt;Once you have created Something Else you can Create Final Thing&lt;/p&gt;
           &lt;span&gt;&lt;/span&gt;
        &lt;/li&gt;
        &lt;li class="third"&gt;
           &lt;h3&gt;&lt;em&gt;Step 3&lt;/em&gt;Create Final Thing&lt;/h3&gt;
           &lt;p&gt;Once you have created Something Else you can Create Final Thing&lt;/p&gt;
           &lt;span&gt;&lt;/span&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body{
  padding-top: 300px;
  }
  #blank-slate-steps {
      background-color: #E8E8E8;
      bottom: 0;
      font-family: OpenSansCondensedBold,sans-serif;
      text-align: center;
      width: 100%;
  }
  #blank-slate-steps li {
      display: table-cell;
      max-width: 300px;
      padding: 40px;
      position: relative;
      width: 300px;
  }
  #blank-slate-steps h3 {
      font-size: 1.6em;
      margin-bottom: 0.6em;
  }
  #blank-slate-steps h3 em {
      color: #878787;
      float: left;
      font-size: 0.8em;
      font-style: normal;
      margin-bottom: 4px;
      text-transform: uppercase;
      width: 100%;
  }
  #blank-slate-steps li.second span {
      background: red url("../images/sprite/icons-grey-38.png") no-repeat scroll 0 -56px transparent;
      height: 37px;
      width: 36px;
  }
  #blank-slate-steps span {
  background-color: red;
      display: block;
      height: 20px;
      left: -10px;
      position: absolute;
      top: 50px;
      width: 20px;
  }
  </code></pre>
  
  <p>​</p>