vertical-align middle on li elements (multiline text) with image floated left

UPDATE 1

Seems like the following version runs fine in IE & Chrome

http://jsfiddle.net/gabel/RYjn6/7/

It's still lightweight and does not use css table-cell styles or bunch of wrapping divs.

The idea is to float an image left in a list and align "some text" vertical in the middle right to the image. But nothing works fine for me now, vertical-a开发者_StackOverflow中文版lign fails and position relative did not work at all. Any idea?

Background-Image CSS is no option, because an image resize is not possible for all browsers.

Example: http://jsfiddle.net/gabel/RYjn6/1/

HTML

<ul class="speciallist">    
  <li>
     <a href="#">
     <img src="http://farm6.static.flickr.com/5098/5444290347_d398028d26_t.jpg" />
         Some Text and some more text  and some more text <span style="color: black;"> and some more text</span>
     </a>
  </li>
  <li>
     <a href="#">
     <img src="http://farm5.static.flickr.com/4104/5444891066_45b883b819_t.jpg" />
       Some Text and some more text
     </a>
  </li>
</ul>

CSS

ul.speciallist li a {
  display: block; 
  width: 95%; 
  overflow: hidden; 
  display: inline-block; 
  text-decoration: none;
  background-color: #efefef;
  padding: 5px;
  margin-bottom: 3px;
}

ul.speciallist img {
  float: left;
  width: 100px;  
  margin-right: 5px;
  border: 1px solid #888;
}