Thumbnails jumping

[pagallery]

I've used CSS to set up a Picture Gallery where there is a block of thumbnails on the right of the page and if you put your mouse over a particular image you get the full sized image on the left of the page.My thumbnails are in rows of three. It works fine in Opera, Netscape and Firefox. In IE it works fine if you hover the mouse over any of the thumbnails in the first two columns. However, when you hover the mouse over the final column, a space is created in the next row equivalent to two column widths. I've tried adjusting the width of the thumbnails and of the block they sit in but with no impact. I've run out of ideas of how to cure this. (I've got IE in quirks mode)

[Synook]

Umm... could we see your code for your page?

[pagallery]

The CSS is:#gallery {position:relative; width: 795px}/* this sets up the space where the thumbnails float */#thumbs {width: 350px; float: right; }/* this sets the border round the thumbnails */ #thumbs a {display: block; float: left; margin:0 0 3px 3px; width: 100px; height: 75px; border: 1px solid #009900; }/* this sets the size of the thumbnail */ #thumbs a img {width: 100px; height: 75px; border: 0; }/* this sets the border colour which will remain when the thumbnail turns into the main picture */#thumbs a:hover {border-color: #006600;}/* this positions the thumbnail when it becomes the main picture */#thumbs a:hover img {position: absolute; width: auto; height: auto; right: 385px; top: 0; border: 1px solid #009900; }In the HTML the code is:<div id="gallery"> <div id="thumbs"> <h4><i>Put the mouse over a picture for a larger image</i></h4> <a href="#nogo" title="Artwork"><img src="../images/mistydawn/artwork.jpg" alt="Artwork" /></a> <a href="#nogo" title="Front door"><img src="../images/mistydawn/frontdoor.jpg" alt="Front door" /></a> <a href="#nogo" title="front step"><img src="../images/mistydawn/frontstep.jpg" alt="Front step" /></a> <a href="#nogo" title="Salon & Galley"><img src="../images/mistydawn/salongalley.jpg" alt="Salon & Galley" /></a> <a href="#nogo" title="Pullman dinette"><img src="../images/mistydawn/pullman.jpg" alt="Pullman dinette" /></a> <a href="#nogo" title="TV cupboard"><img src="../images/mistydawn/tv.jpg" alt="TV cupboard" /></a> <a href="#nogo" title="Larder cupboard"><img src="../images/mistydawn/larder.jpg" alt="Larder cupboard" /></a> <a href="#nogo" title="Drawer storage"><img src="../images/mistydawn/drawersunder.jpg" alt="Drawer storage" /></a> <a href="#nogo" title="Bathroom"><img src="../images/mistydawn/bathroom.jpg" alt="Bathroom" /></a> <a href="#nogo" title="Bedroom"><img src="../images/mistydawn/bed.jpg" alt="Bedroom" /></a> <a href="#nogo" title="Engine"><img src="../images/mistydawn/engine.jpg" alt="Engine" /></a> </div> </div>All the images are the same size 400 pixels by 300 pixels

[falcifer]

I've used CSS to set up a Picture Gallery where there is a block of thumbnails on the right of the page and if you put your mouse over a particular image you get the full sized image on the left of the page.My thumbnails are in rows of three. It works fine in Opera, Netscape and Firefox. In IE it works fine if you hover the mouse over any of the thumbnails in the first two columns. However, when you hover the mouse over the final column, a space is created in the next row equivalent to two column widths. I've tried adjusting the width of the thumbnails and of the block they sit in but with no impact. I've run out of ideas of how to cure this. (I've got IE in quirks mode)

The problem is that the container for the thumbnails (the A element) has dimensions of 100x75. The IMG element inside has dimensions of 100x75.When you hover over the images, you have given them a border, which gives them dimensions of 102x77, which is larger than the container. And because you have them set to float:right, when IE resizes the container element, it moves it down to fit on the next line.Simply set the height of the A element to 77px and it'll work out fine. And you can set the width to 102px as well, but it's the height that's causing the problem.

[pagallery]

Thanks - I couldn't see for looking!