“vertical-align: middle” on table cells does not align to the middle with AlphaImageLoader in IE6

Question

I'm trying to align some text on table cells with a PNG Transparent background, I uses the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() to fix this in IE6. But the text does not align to the middle with the style filter:

CSS:

.fh {
font-family:SimSun;
font-size:12px;
overflow:hidden;
padding:0 2px 2px;
text-align:left;
vertical-align:middle;
}

HTML:

<table width="200"  border="1" cellpadding="2" class="x-table">
<tr>
<th scope="col">&nbsp;</th>
</tr>
<tr style="height: 77px;">
<td class="fh" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png')">&nbsp;ABCDEFG</td>
</tr>
</table>

Screenshot:

Answer 1

Try shifting the height to the TD or the TABLE.

Answer 2

I find that this problem can be fixed by insert a div with a table in it to the origin td:

HTML:

<table cellspacing="0" cellpadding="0" class="x-table" style="position: absolute; width: 289px; left: 0px;">
<colgroup>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
</colgroup>
<tbody>
<tr style="height: 77px;">
<td class="brw1 brss bbw1 bbss blw1 blss btw1 btss" style="border-color: rgb(153, 204, 
255); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png', 
sizingMethod=crop);background-repeat: no-repeat;" id="A1-0" colspan="4">
<div class="fx" style="height: 76px;">
<table><tbody><tr>
<td class="fh bw" style="height: 76px; width: 288px;">ABCDEFG</td>
</tr></tbody></table>
</div>
</td></tr></tbody></table>

ScreenShot: