I have created a table that holds 3 thumbnail images across the web page.
I then added the following CSS code so that when you move the mouse on the thumbnail it enlarges the image so you can see more detail.
It works great in Firefox and shifts the remaining thumbnails to the right of the enlarged picture. The problem is in Internet Explorer. It does not shift the thumbnails enough to the right so the small thumbnail lays on top of the enlarged image.
Here is the CSS I am using:

.growleft:hover {float: left;}
a.growleft:hover img {height: 190px;}
.grow:hover {}
a.grow:hover img {height: 190px;}

Here is the table structure I am using:

<TABLE><TR>
<TD><a href="./11752/29222.html" class="growleft"><IMG height=80 hspace=15 src="media/roomadd8.jpg" align=left vspace=1 border="1" alt="Room Addition"></a></TD>
<TD><a href="./11752/29222.html" class="growleft"><img height=80 hspace=15 src="media/roomadd9.jpg" align=left vspace=1 border="1" alt="Florida Room with Deck"></a></TD>
<TD><a href="./11752/29222.html" class="growleft"><img height="80" hspace=15 src="media/roomadd2.jpg" align=left vspace=1 border="1" alt="Florida Room"></a></TD></TR>
</TABLE>

Is there a hack for this or is it in my code somewhere? I have tried various things such as align=center etc but nothing works so far.

Any help would be appreciated.

Vienie