will work local but not on host server

[Mike G]

I worked with the CSS pop-up image viewer at:

http://www.dynamicdrive.com/style/cs...-image-viewer/

I tweaked it to my liking, but it does not work once it is on the server. ANy suggestions?

IE: not reading (shows an 'x') thumbnail, and then shows proper picture on hover.
FireFox:no thumbnails, no pictures.

CSS:
[CODE]
<style type="text/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: #405BFB;padding: 5px;left: -100px;border: 1px white;visibility: hidden;color: white;text-decoration: none;}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;padding: 2px;}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 400px; /* position where enlarged image should offset from the top of the page */
left: 525px; /*position where enlarged image should offset horizontally */}
</style>

HTML:
<center>
<a class="thumbnail" href="#thumb"><img src="images/panel_1g-tn.JPG" width="69px" height="92px" border="0" /><span><img src="images/panel_1g.JPG" /><br /><h4>Local Electricians testing the installation.</h4></span></a>

<a class="thumbnail" href="#thumb"><img src="images/panel_2d-tn.JPG" width="92px" height="69px" border="0" /><span><img src="images/panel_2d.JPG" /><br /><h4>Great installation guys! One of six panel suites in this phase.</h4></span></a>

<a class="thumbnail" href="#thumb"><img src="images/panel_1f-tn.JPG" width="69px" height="92px" border="0" /><span><img src="images/panel_1f.JPG" /><br /><h4>Note the compact size of hardware <br>(left top).</h4></span></a></center>
[CODE]

[Schmoopy]

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

I imagine it's something to do with your image not being where you want it to be, or the link is wrong.

[Mike G]

I figured it out now. The page was loading other images, so I knew the path was right. I did not realize it was important, but found out that the extensions on the files were inconsistently written upper and lower case:
-thumbnails were lower case extension .jpg
-full pictures were upper case extension .JPG
-html code asked for all upper case extensions .JPG

Result in browsers:
IE: did not mind upper case but could not find the thumbnails because the files were lower case extension.
FF: did not like upper case at all. could not even find the files that were matching with upper case extensions.

[traq]

this issue may come up between different servers, as well. It's best to write *everything* lowercase unless there's a specific reason not to. (Unfortunately, some programs automatically create UPPERCASE file extensions.)