Modified CSS Popup Image Viewer case

[newcssguy]

Hi,

I am a "newbie wannabe HTML jock" with a site and attitude to match (damn). I was reading your CSS Popup Image Viewer here:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

And I set my wannabe test case here:

http://travelworldvideos.googlepages.com/testpage

You can check the main site there too, just remove the testpage tag. Page works pretty good. It is supposed to be a table cell, that people hover over and get a blowup pic. I intend to add other rows to the table once I get it working.

1. After bunch of heartache, got it working in IE6 and FF3. Problem is that I need to have the blow up picture anchored off the upper/left corner of the table cell (I left the table with a border, so you can see the positioning better). Anybody know how to anchor the blow up hover off the table corner, rather than the small pic. Right now IE and FF blow it up off different corners of the small pic.

2. Once I get going with the pic, I am looking to monkey around with same idea for another cell with a sentence. There I will blow up half a line sentence into a 5 line paragraph with more info. Anybody ever messed around with that?

Tkx

TWV.


Here is the code I am using. The "vertical-align: middle;" does not work because of the host environment I am on, GPC, but it does work perfectly if one runs the code on a test window, say here:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables3

I have some extra "a.link/visited/hover/active stuff", which is also there just because of the host the test page is on.


<style type="text/css">


.center1
{
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
border: 0 none;
}


a:link {
color: #339999;
background: none;
border-bottom-color: #07b7b8;
}
a:visited {
color: #339999;
background: none;
border-bottom-color: #6ba7a7;
}
a:hover, a:active {
color: #00b2b3;
background: none;
border-bottom-color: #07b7b8;
}





/*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
{
position: absolute;
background-color: white;
padding: 0px;
top: 0px;
left: 0px;
border: 0px none;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img
{
border-width: 0;
padding: 0px;
}

.thumbnail:hover span
{
visibility: visible;
top: 0 px;
left: 0 px; /*position where enlarged image should offset horizontally */
}


</style>



<p><br></p>
<a name="PaulBocuse"></a>
<p><br></p>



<table class="center1" border="1">
<col width="642">
<tbody>
<tr >

<td height="258">


<a class="thumbnail" href="#thumb"><img src="http://worldvids2.googlepages.com/RestauPrevFranceCollongePaulBocuseRe.jpg" width="420" height="169"><span><img src="http://worldvids2.googlepages.com/RestauPrevFranceCollongePaulBocuseRe.jpg"></span></a>


</td>
</tr>


</tbody></table>



<p><br></p>
<p><br></p>