problem with on mouse over css. help appreciated

[mp3province]

Hi Guys,

I have used the css code from this page:
http://www.dynamicdrive.com/style/cs...-image-viewer/

for my site:

http://www.chantik.in/theodyssey/gallery.html
css file: http://www.chantik.in/theodyssey/cssgallery.css

Viewing this page with IE is fine, no problems at all.......

However, there is a problem when viewing it with firefox. in my site there are 2 parts where i have incorporated this css script. at the top of the page, the script works fine, but at the bottom of the page (where it says please move your mouse over the image for the full size)the light yellow colored background thing doesn't stretch all the way.

Basically i want users to click on the image on the left side, and for the full-sized image to pop up on the white part (to its right)

And how come they don't pop up in line with each other?

Any help is greatly appreciated. Thanks.

Kind Regards,
Akshay

[KDLA]

They don't "pop up in line with each other" because of this coding:

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

The relative positioning means that the thumbnail positions itself relative to the link it is "attached" to. You can change this by using absolute positioning.
Reference: http://www.w3schools.com/css/css_positioning.asp

(Also, did you know that there are duplicates of your photo/mouseovers occuring at the top right, outside your page's container? - Fx, version 1.5)

I don't see the background issue you referred to.

KDLA

[mp3province]

They don't "pop up in line with each other" because of this coding:

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

The relative positioning means that the thumbnail positions itself relative to the link it is "attached" to. You can change this by using absolute positioning.
Reference: http://www.w3schools.com/css/css_positioning.asp

(Also, did you know that there are duplicates of your photo/mouseovers occuring at the top right, outside your page's container? - Fx, version 1.5)

I don't see the background issue you referred to.

KDLA

KDLA,

Thanks for the reply. I got them to pop up in line with each other.

Yes i know there are duplicates of the photo/mouseovers outside my container. They are there to show people how the actual pop up should look like. If you move you mouse over these images, the pop up includes an enlarged image with a 1px dotted line surrounding the image.

so how come when you move your mouse over the images (in firefox) within the container, the pop up doesn't include this 1px dotted line surrounding the image? it works fine with IE. It is just pissing me off cos I only use Firefox!

Again, any Help appreciated. Thanks man,

Regards,
Akshay

[KDLA]

It works for me. I see the dotted border on all four image rollovers. (see attached screenshot). Viewed in Fx 1.5.

KDLA

[mp3province]

It works for me. I see the dotted border on all four image rollovers. (see attached screenshot). Viewed in Fx 1.5.

KDLA

KDLA,

After updating my version of Firefox, all is well (page in concern: http://www.chantik.in/theodyssey/gallery2.html )

But now, when I view it with IE, the following happens
http://www.chantik.in/theodyssey/ie.JPG

And, the images go off the pages at the bottom (in both browsers):

http://www.chantik.in/theodyssey/offscreen.JPG

Again, any help appreciated. Thanks for all your help.

Regards,
Akshay