Menu Always On Top Problem [Solved]

Poster: rbester
Dated: Sunday June 24 2007 - 15:11:55 BST

Trying to use an AJAX image viewer, however the menu always appears on top of the enlarged image, obstructing its view. Tried to play with the z-index of the image viewer but with no success.

Example here: http://www.aspect-ai.com/technology.php (click the lemon)

The original image viewer is from here: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

Anyone here has an idea for a solution?

Poster: Andy
Dated: Sunday June 24 2007 - 16:52:55 BST

Just tried it with IE7 and the menu appeared behind the image.

We've had this problem in the past with Lightbox running under the Prototype JS Library and the fix is to reduce the default Z-Index of the menu.

You can do this by adding zindex=99 to the main menu definition. You'll need to play around with the value but this should solve the problem.

HTH,
Andy

Poster: Ruth
Dated: Sunday June 24 2007 - 17:22:40 BST

Hi,

I downloaded your page and put the original viewer on it with all those files and with a z-index change in that thumbnail.css file it worked and sat the image over the menu. In the thumbnail.css file the outermost div z-index sets at 1000.

EDIT: Do what Andy posted

Ruth

Poster: rbester
Dated: Sunday June 24 2007 - 21:08:27 BST

Hi,

Ok, looks like it is working now. Here is what I learned - the first tip I found was to add the following magic code to the page:



It made the trick for IE but not for any other browser. Now I came back here and found Andy's "zindex=XX" advice and gave it a try. Voila! Problem solved (with "zindex=55".) Thank you guys!

Poster: Andy
Dated: Monday June 25 2007 - 19:02:07 BST

Great!!!

Good to hear that it worked