Results 1 to 3 of 3

Thread: thumbnails on right do not shift when image enlarges in IE6+

  1. #1
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question thumbnails on right do not shift when image enlarges in IE6+

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    a.growleft img {position:relative;}
    a.growleft:hover img {z-index:1;}
    Last edited by jscheuer1; 09-26-2008 at 05:02 PM. Reason: add code example
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John, I'll try this and let you know.
    Thanks,
    Cyndie

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •