CSS popup image viewer w/tables not working in Opera 9

[bstevenson]

1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...p-image-viewer

3) Describe problem: I have a site that I am required to format XHTML Transitional using only tables...no choice. I have a table with multiple cells. In each cell is a person's name that I want to rollover and have their picture appear. The script works perfect in IE7 & Firefox 2.0.0.9 but I can not get it to work correctly in Opera 9.24 Only part of the image opens within the confines of the cell. I have tested my Opera on the samples provided and it works perfect so I know it is not my Opera installation being corrupt. W3C shows that my code validates. I am using Dreamweaver CS3. What am I missing? Thanks in advance.

[jscheuer1]

That css gallery was unstable in earlier versions of Opera and then smoothed out in v 9.01 I think it was. In 9.24 it is again unstable. Even on the demo page, if I move my mouse over the left hand area (this is with a wide enough screen that there is a lot of blank space over there), the pop ups pop up, even though I'm not over them. And the 'sushi' pop up is partly cut off.

That said, I think it might just be a poorly thought out layout on the demo page that is causing those problems, and the same may be true of your set up. Tables, in and of themselves, shouldn't be causing this.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[boogyman]

in the css file replace the default styles with

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

.thumbnail span{ /*CSS for enlarged image (and caption) */
      display:none;
}

.thumbnail span img{ /*CSS for enlarged image*/
     border: none;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
     display: block;
     position: relative;
     top: 10px;   /* offset vertically */
     left: 60px;   /* offset horizontally */
     padding: 2px;
     z-index: 100; /* brings image to foreground */
}

Edit:
it is important to note that since you are being restricted to use tables only, and the transitional doctype it is very likely the client is going to be viewing this with Internet Explorer, and I am not sure if IE7 has given support to the psuedo-selector :hover. if not this will only work on anchor a tags.
I know that IE6 does not have support, and I personally along with a good number of people have not upgraded to IE7 even if it is supported. So if you intend to use this on an element that is not an anchor tag you will need to use the hover mod