How to vertically align image and input type="text" filling the table cell?

Question

I have input type="text" and image button and I want input to fill tabe cell. I use the solution from Style input element to fill remaining width of its container, but I have problem with vertical alignment of both elements. I need to have the center of the elements on the same height. HTML:

<table border="1" >    
  <tr><td>
      <div style="width:200px">hhhh
      </div></td><td>sssss</td>
  </tr>      
  <tr>
    <td >
      <div style='width:100%;display:table'>        
        <INPUT type='text' class='txt' ID='A12x1' NAME='A12x1'   />
        <input style='display: table-cell;' type='image' class='btn' src='http://myimages.bravenet.com/109/910/420/9/Arrow.png'/>
      </div></td><td>kpu</td>
  </tr>
</table>  

CSS:

    .txt 
{ BORDER: silver 1px solid;  
  width:100%;
  vertical-align:middle;
  display: table-cell;
    }

.btn{ cursor: pointer;
       width: 18px;
    height: 26px;
    vertical-align: middle;
    }

http://jsfiddle.net/xqaN4/4/

I have tried various combintions of alignment, on the second place <img>, <span> or <div> with background image with no success. The best solution was to include both elements in <div>s (display: table-cell), but this solution broke filling the width in chrome.

The second problem is to achieve the same height of the input and the button.

I need compatibility IE8+, Firefox, saf (Chrome).
Note: the image is an example found in the web.

Answer 1

Check this

Horizontal Align

http://jsfiddle.net/xqaN4/5/

.txt
{ BORDER: silver 1px solid;  
  vertical-align:middle;
  display: table-cell;
    }

Vertical Align

http://jsfiddle.net/xqaN4/7/