Firefox issue with position absolute inside an item with display: table-cell - html

Question

I have 3 li's that I am trying to line up horizontally and then position a span inside each of the li's.
The spans get positioned correctly in Chrome but are well outside the boundary of the li's in Firefox.
http://jsfiddle.net/brendan_rice/mPnCh/1/
Can anyone help please?
<div id="blank-slate-steps">
<ul>
<li class="first">
<h3><em>Step 1</em>Create Something</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
<li class="second">
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
<li class="third">
<h3><em>Step 3</em>Create Final Thing</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
</ul>
</div>​
CSS
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;
}
​

Answer 1

use position relative for blank-slate-steps div.
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
position: relative;
}

Answer 2

Ok, I've made it work, you can do it like this : fiddle
Explanation: What I did was, I used position: relative; for #blank-slate-steps and than used position: relative; again for div and wrapped the <li> content inside it
HTML
<div id="blank-slate-steps">
<ul>
<li class="first">
<div style="position: relative;">
<h3><em>Step 1</em>Create Something</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
<li class="second">
<div style="position: relative;">
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
<li class="third">
<div style="position: relative;">
<h3><em>Step 3</em>Create Final Thing</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
</ul>
</div>
CSS
body{
padding-top: 300px;
}
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
position: relative;
}
#blank-slate-steps li {
display: table-cell;
max-width: 300px;
padding: 40px;
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;
}

Answer 3

Try to put your span in first like that:
<li class="second">
<span></span>
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
</li>
and put the span in position:relative and float:left