Pop up Image - container moves on hover

[dorichcss]

I've used the "CSS Popup Image Viewer" to create a gallery like effect. This has a vertical list of text. Mousing over any one of the items in the list produces a pop up image.
This works perfectly in Safari but there is a problem with FF3. I have not yet tried the code on IE.

Symptoms:
In FF when I mouse over each item from the top down the first four items pop up as expected but when I mouse over the final item in the list the whole div container that holds pop up code moves to the right about 10px (I'm guessing, not measured it).
The CSS is used virtually as is in the original from DD with the exception of changing the location of the images and playing with the positioning of the image.

The html was altered to suit the new needs.

Update: Thursday; August 7, 2008 More details on the symptom: It appears that when hovering over the lowest pop-up - the scroll bar in FF disappears - This is what is causing the movement of the container. I assume this has something to do with the dimensions of the window. The behavior seems counter intuitive, why would the pop-up make the browser window think it was shorter when it fact it was longer?
As noted the behavior does not occur in Safari.

Can anyone point to a possible cause in FF.

I've included the code below. Apologies its so long but since the whole container is moving I thought it should be included.

Thanks

html is

<div class="bulletedbox"><!--Insert container to hold the bulleted introduction-->
<div class="bulletitem2"><img src="images/but.gif" alt="button" /><span class="indent">The value building process is well know and well documented</span></div><br />
<img src="images/line.gif" alt="line" /><br />
<div class="bulletitem2"><img src="images/but.gif" alt="button" /><span class="indent">The basic five process steps should form the basis of any marketing strategy</span></div><br /><br />
<img src="images/line.gif" alt="line" /><br />
<div class="bulletitem2"><img src="images/but.gif" alt="button" /><span class="indent">Value building is a focus point for emerging companies</span></div><br /><br />
<img src="images/line.gif" alt="line" /><br />
</div><!-- End of bulleted box-->
<br class="clearfloat" /><!--keep a clean break with the material that follows-->

<!--start the pop up display for explaining the process-->
<div class="popupboxcontainer"><!--This is the main container for holding the pop up display-->
<div class="popuplistcontainer"><!--this holds the vertical list of items in the value building process-->
Process Steps for Building Value
<div class="popuplistitem">
<a class="thumbnail" href="#thumb">1. Build Value<span><img src="images/valueimages/valuestep1.jpg" alt="Value of Google"/><br />1. Build Value</span></a>
</div><!--end of popuplistitem-->
<div class="popuplistitem">
<a class="thumbnail" href="#thumb">2. Free Cash Flow<span><img src="images/valueimages/valuestep1.jpg" alt="Value of Google"/><br />2. Free Cash Flow</span></a>
</div><!--end of popuplistitem-->
<div class="popuplistitem">
<a class="thumbnail" href="#thumb">3. Value To Customers<span><img src="images/valueimages/valuestep1.jpg" alt="Value of Google"/><br />3. Value To Customers</span></a>
</div><!--end of popuplistitem-->
<div class="popuplistitem">
<a class="thumbnail" href="#thumb">4. Create Differential Advantage<span><img src="images/valueimages/valuestep1.jpg" alt="Value of Google"/><br />4. Create Differential Advantage</span></a>
</div><!--end of popuplistitem-->
<div class="popuplistitem">
<a class="thumbnail" href="#thumb">5. Know Your Customers<span><img src="images/valueimages/valuestep1.jpg" alt="Value of Google"/><br />5. Know Your Customers</span></a>
</div><!--end of popuplistitem-->
<br /><br />
</div><!--end the vertical list of items in the value building process-->
</div><!--End the pop up display for explaining the process-->

The CSS

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/                           
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
top: -200px;                                    
visibility: visible;
left: 300px; /*position where enlarged image should offset horizontally */

}

[dorichcss]

It turns out this problem is caused by the position of the hidden images. Creating a vertical column as I did the means that the lowest hidden image defines the bottom of the page. When mouse over occurs the page is in effected shortened because the revealed image is higher on the page than the hidden image.
Hence the scroll bar disappears, hence the container jumps by the width of the scroll bar.

FYI.