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. In addition, the last thumbnail on the right is cropped.
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.
You can take a look at it by going to
http://www.benjamincustomrenovations...est/29201.html
Any help would be appreciated.



Reply With Quote

Bookmarks