css vertical alignment, weird result - css

Question

I've created a jsfiddle http://jsfiddle.net/zkLav/ showing the code in action. what's happening is the images and text alignment are step stacking and not aligning vertically. Can anyone explain why this is happening?
CSS markup:
.outList {
display:table;
}
.outList span {
display:table-cell;
vertical-align:middle;
width:10%;
}
.outList h4 {
display:table-cell;
vertical-align:middle;
width:50%;
padding-left: 10px;
}
.outList p {
float:right;
display:table-cell;
vertical-align:middle;
/*width:30%;*/
text-align:right;
}
.outList img {
width:100%;
}
HTML markup:
<ul>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Warmup</h4>
<p>5 Minutes</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Machine Press</h4>
<p>3 sets of</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Lateral Pulldowns</h4>
<p>3 sets of</p>
</div>
</a>
</li>
</ul>​
​
A proper image of the problem:

Answer 1

Ok, take a look at this update
Just remove the width in the next .css class:
.outList img {
width: 100%;
}
UPDATE
For the text at the right to be fully align, remove the float:right; from the p class:
.outList p {
float:right;
display:table-cell;
vertical-align:middle;
/*width:30%;*/
text-align:right;
}
Check this new update

Answer 2

Get rid of the divs, you don't need them given that you have the li's.
Also, why span the img? Get rid of that too.
When you did that, put the ul as the table, the li's as the rows and then the stuff in the a as the columns.