So I have a table with only two columns and one row. The second td holds an image, and the first holds text. I would like the td containing the image to be at the minimum size possible with that image inside, and the first td to fill the remaining space. The following works in every browser except IE7 (we are not doing IE6):
<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>
What happens is this: The page renders correctly, then when you mouse over the table, the first td expands to fill the entire table, pushing the image off the edge.
I could fix this with some jQuery to measure the width of the image and calculate remainder for the first td; but that solution is full of LAME!
Please help. I do not understand why IE7 feels the need to redraw the way it does.
Try the following code instead. Instead of explicitly declaring too much width, try explicitly declaring too little (because the image will push the width beyond 1% anyway.)
I am writing this off the top of my head without actually having looked in IE7, but I have IE7 in a Virtual Machine at home and so I'll comment back later if I find a different solution.
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TEXT</td>
<td width="1%" style="width: 1%;"><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" alt="Google Logo" /></td>
</tr>
</table>