Images with width percentages messing up on IE when image res is high

[Donn]

[FONT="Palatino Linotype"]Hello, ppl.

The following code is of issue:

<table border="0" cellpadding="0" cellspacing="12" width="100%">
<tr>
<td width="14%"> <img img border="0" src="http://www.internet.org/image1.gif" width="98%" </td>
<td width="14%"> <img img border="0" src="http://www.internet.org/image2.gif" width="98%" </td>
<td width="14%"> <img img border="0" src="http://www.internet.org/image3.gif" width="98%" </td>
<td width="14%"> <img img border="0" src="http://www.internet.org/image4.gif" width="98%" </td>
<td width="14%"> <img img border="0" src="http://www.internet.org/image5.gif" width="98%" </td>
<td width="14%"> <img img border="0" src="http://www.internet.org/image6.gif" width="98%" </td>
<td width="14%"> <img img border="0" src="http://www.internet.org/image7.gif" width="98%" </td>


</tr>
</table>

On Firefox, no matter HOW wide the images are, the page appears perfectly. The images are sized to fit the page at 100%. There is no horizontal scrolling of the page.

BUT--the same images --on new and old IE versions -- appear VERY differently: The images appear WAY larger than they should.

Now, the issue is this: If I shrink down the images (my quick fix) then when the above code displays in IE, it fits. (I resized the images to fit in even a smaller screen size, so they are a tiny bit smaller...that was the idea of using percentages, after all!)

BUT---with my quick fix, when the images are rendered on a larger screen, they are being increased slightly beyond their original pixel width, and it looks lousy.

For now, this is what I've done.

But I am wondering if there's a way to accomplish this using DIVs, or something else. In other words, how do I keep the table from stretching to accommodate the images at full size, as IE seems to be doing? [/FONT]