Log in

View Full Version : thumbnails on right do not shift when image enlarges in IE6+



Cyndie722
09-26-2008, 04:44 PM
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.com/test/29201.html

Any help would be appreciated.

jscheuer1
09-26-2008, 04:54 PM
hspace and vspace are non-standard, I'd try getting rid of them. However, in IE 6 and 7 here they are shifting, just not as much as perhaps you would like. If you made all the images position:relative; and gave the hovered ones a z-index of 1, it might work out so that at least the hovered ones would cover the part of thumbnails that they overlap, which might actually be a nicer effect than having the thumbs shift so much:


a.growleft img {position:relative;}
a.growleft:hover img {z-index:1;}

Cyndie722
09-26-2008, 08:03 PM
John, I'll try this and let you know.
Thanks,
Cyndie