URGENT: Product image z-index conflicts with menu z-index

Need a URL to diagnose. Can you pass along?

Sure, as I said screenshot was made on JoomlArt website. Click on this link, double click on camera’s image and move it around. You will see it goes beyond menu.

Gotcha!
Now I see it…it escaped me in the screenshots.

Definately a z-index issue. Sending it up for a fix.
If you are in a "fix" and need it to quit doing that…you can cause the larger image to remain static by updating the following:

in theme.css -- line 2436

Code:

.product-img-box .product-image-zoom img {
cursor:move;
left:0;
position:static;
top:0;
}

That will keep it out of the menu…but it can’t be moved around. A cleaner look that dropping behind the menu.

Hope that works temporarily.
John.

Problem is I reported this issue two weeks ago directly through support center by ticket but never got any answer. I thought maybe this can be solved faster if I post here.

I tried your fix and have bad and good news:
BAD: It doesn’t change anything. I can still move large image around (incl. under the menu).
GOOD: I started digging in Safari’s debug menu and found that ".product-img-box .product-image-zoom img" has inline attribute position:relative that of course overrides our position:static. Moreover I found that as soon as you move enlarged image additional attribute is added to inline style… z-index:0 !!! I’m 90% sure this is the root of this issue.

Do you have any idea where in code this inline style is composed?

Hi novikdesign

Open skin/frontend/default/jm_seleni/css/theme.css file, at about line 451, find following code section:

Code:

#ja-container {
position:relative;
z-index:1;
}

and change to:

Code:

#ja-container {
z-index:1;
}

Thank you very much. That fixed the issue!