IE7 table display error

Question

I created a few buttons that have different size and I need to apply shadows on it. I do all this with tables, but IE7 keeps resizing my TDs for shadow.

Here is code:

<table cellpadding="0">
<tr>
<td colspan="3">
<a href="link">
<input type="button" value="All Categories" style="-moz-border-radius: 12px; border-radius: 12px; background: url(gbtnback.png); padding-bottom: 2px; padding-right: 5px; padding-left: 5px; color:#FFFFFF; height: 21px; cursor: pointer;">
</a>
</td>
</tr>
<tr>
<td width="27"><img src="shd1.png" height="13" width="27"></td>
<td><img src="shd2.png" height="13" width="100%"></td>
<td width="24"><img src="shd3.png" height="13" width="24"></td>
</tr>
</table>

It works perfectly in FF, but IE7 keeps resizing those three TDs at lower TR... Can this be fixed? I try with table-layout: fixed; but no luck...

Answer 1

Images, position: relative; float: right(left); and many time ) Work in anything