Pop-Up Image CSS Question

[grimmylina]

Hello,

I was wondering is omeone could help me out with a script question. I found this script on Dynamic Drive:

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

and I tried to use it on my page:

http://catalinahotel.com/pimpmyfridge/

It works fine in Firefox and IE and almost in Netscape. In Netscape the frame around the pop-up image is being cut off.

I am working in Dreamweaver and I see a potential problem...some of the css styles aren't lighting up in pink:

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


and the <a class="thumbnail" href="#thumb"> isn't lighting up in green the way it usually does.

I copied and pasted their own example and theirs works so I know it is something in my own script giving me the problem.

Can anyone please help?

Thank you!!!!

Allie

[WebJoel]

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

I copied and pasted their own example and theirs works so I know it is something in my own script giving me the problem.

I am seeing a problem with 'their script' ('simply beautiful', and 'so real-unreal') not showing at all in Firefox...

I was under the impression from conversations sat the college that Gecko rending (Moz, Fx, NS, Seamonkey, Konquerer, etc) only recognizes indexes that are positive integers, not negatives. Not sure if "zero" actually counts as a 'positive'. We always tried to avoid "0" so that all browsers would understand. In IE-view, I see your page and I see the two examples from DD ('simply beautiful', and 'so real-unreal'? images). In Firefox, these are totally missing (due to z-index:0;??), and the page-text over-runs the container (container fails to expand).

[grimmylina]

Ooops, yes sorry about the container. I didn't bother expanding it since I was going to take their example out after "testing" it out.

I would only be needing the picture to come up so I guess I can ignore their text ('simply beautiful', and 'so real-unreal').....

Do you know what could be wrong?

[sticks464]

What I would do is play around with the css of the hover to get it to display correctly within the body container so all parts will be visible.

.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;
}

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

}