Dynamic Drive Image Gallery Issue

[Insane_Edna]

I am trying to have a CSS image rollover that shows a larger image when the thumbnail. I am trying to implement the Dynamic Drive Image Gallery shown at http://www.dynamicdrive.com/style/cs...e-viewer/P140/
I have a main content area that has an internal border area that stores all content. I have positioned an image and to the left of that my text. In Firefox and Opera everything performs as expected in regards to styling and all elements being contained within the wrapper.
In IE 6 & 7 I have problems caused by the relative positioning in the thumbnail class. What happens is the images float all over the screen and when you rollover the thumbnail it causes the large image to appear outside of the wrapper area.
If I remove the relative positioning in the thumbnail class all browsers then show the images and text as expected but when I rollover the image the larger image now appears outside the wrapper area.
Can someone help me out with this issue as it is driving me insane. Here is the code that I am using:

The CSS I am using:

#main {
  width: 760px;
  height: 413px;
  margin: 5px auto;
  border: 2px solid #406480;
  background-color: #cfdce6;
  }
  #wrapper {
  text-align:left;
  margin:0 auto;
  width:700px;
  height:330px;
  border:1px solid #507ea1;
  overflow: auto;
  }

/* Image Enlarge */

.thumbnail{
position:relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 2px;
left: -1000px;
background-color: #426581;
border: 2px solid #000000;
visibility: hidden;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
positon: relative;
margin-top: 2px;
left: 2px; /*position where enlarged image should offset horizontally */
}
/*End of image enlargement styling */

/* Image Thumb And Text Positioning */

.thumb-position {
  margin-left: 10px;
  margint-top: 10px;
  }
  .text-position {
  width: 450px;
  margin-left: 175px;
  margin-top: -125px;
  }

The HTML I am using:

<div id="main">
     <!--#include file="navigation.html" --><br/>
          <div id="wrapper"><h1>Past Projects</h1>
               <a class="thumbnail" href="#"><img class="thumb-position" src="images/projects/image-small.jpg" alt="Alt" /><span><img src="images/projects/image-large.jpg" alt="Alt" /></span></a> <div class="text-position"><a href="#">Some Link</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. Suspendisse tincidunt. Nam ac augue sed mauris iaculis dignissim. Maecenas fermentum nulla et sapien. Pellentesque malesuada scelerisque metus. In leo. Aliquam luctus justo a magna. Suspendisse commodo. <br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. </div><br/>

<a class="thumbnail" href="#"><img class="thumb-position" src="images/projects/image-small.jpg" alt="Alt" /><span><img src="images/projects/image-large.jpg" alt="Alt" /></span></a> <div class="text-position"><a href="#">Some Link</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. Suspendisse tincidunt. Nam ac augue sed mauris iaculis dignissim. Maecenas fermentum nulla et sapien. Pellentesque malesuada scelerisque metus. In leo. Aliquam luctus justo a magna. Suspendisse commodo. <br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vitae nulla. Pellentesque sagittis. Duis nec ipsum. Suspendisse placerat. Sed iaculis felis nec quam. Suspendisse pretium, sem sollicitudin vehicula ornare, massa lorem condimentum dolor, vitae feugiat arcu massa ut libero. </div><br/>
</div>
          </div>

[Insane_Edna]

Here is a link to the site showing the problem I am having. In Firefox and Opera everything is contained within the Wrapper. But in IE6 and IE7 the images don't position properly within the wrapper and the expanded image falls outside the wrapper area as well.

http://www.chadegeland.com/gallery/index.shtml

Thanks in advance for any help anyone can provide me on this issue.

[auntnini]

Hi, I posted a related inquiry for "css-image-gallery IE problem" a few days ago without a fixative response. One thing I did in my many tweeks was add a column with OVERFLOW: VISIBLE to contain the rollover hover/span larger image in IE so it wouldn't be off-screen to the far right.

http://chanit.com/gallery/index.htm

#columnLeft {
background: transparent; width: 45%; height: auto; margin: 2px; text-align: center; padding: 0; border: 1px solid #fff;
position: relative; float:left; overflow: visible; }
#columnRight {
background: transparent; width: 45%; height: auto; margin: 2px; text-align: center; padding: 0; border: 1px solid #ff0000;
position: relative; float:right; overflow: visible; }


Still having IE roillover problem.