z-index problem

Poster: mbremer
Dated: Thursday July 26 2007 - 11:34:10 BST

I've got a problem with the DHTML menu that I can't seem to fix. We use the menu in a third-party product (Livelink from OpenText) and we are quite happy with it. But a while ago we wanted to upgrade the DHTML menu to a newer version and suddenly it had an unwanted side effect. The menu always appeared on top of the Livelink pulldown menus. So the Livelink menu items are not selectable anumore, because the Milonic Menu is on top of it.

This is (I guess) a problem with the z-index stacking order, so a quick look in the documentation and this forum showed several things you can do to solve it, but I've no luck with it. Because I can't give access to people here for Livelink (we don't create accounts for external users), I have created a page on our server with simulates the problem. I've tested it with Firefox and Internet Explorer, the results are the same.

Livelink creates pulldown menus by writing a table with an item in every cell. This table is put in a DIV which is invisible, but becomes visible after clicking on the menu header. This is what I've simulated in the following page:

http://www.rssd.esa.int/COMP/LIVELINK/ll.html

As a menu I've used one of the Milonic examples. If you click on the link show/hide menu, you'll see that the table in the DIV is written under the Milonic menu.

I've tried various options like adding zIndex=1000 to the .js file that defines the menu, but so far I had no luck. I hope somebody can come up with a clever idea.

Cheers,
Martin

Poster: John
Dated: Friday July 27 2007 - 15:49:17 BST

You are way down-level in the code you're running (5.735 vs. the current 5.777). For support on the Forum you must be running the most current code (not to mention the fact it will probably fix your problem ).

Let us know.

Poster: mbremer
Dated: Wednesday August 1 2007 - 12:44:34 BST


On our test server we already had the same problem using version 5.762.

But I've just installed the lastest one (5.777) and the result is still the same:

http://www.rssd.esa.int/COMP/LIVELINK/ll.html

Poster: mbremer
Dated: Thursday August 9 2007 - 9:12:35 BST

Hmmm, nobody who has a clue? A bit like me...

Poster: Andy
Dated: Thursday August 9 2007 - 11:17:07 BST

Have you tried setting the menus zindex to 1 or even 0?

Can you also not increase the zindex of the other menu to higher than the Milonic Menu? - Should be able to use CSS for that.

Cheers,
Andy

Poster: mbremer
Dated: Thursday August 9 2007 - 12:42:12 BST

I have used various values for the zindex, like 0 or 1, but also negative values and large positive values.

In my example I've also changed the index of the other div, but without any luck. In the real application, this would be a bit difficult, since that part is generated by a commercial product where I can't add style features that easy.

I've also played with the fixMozillaZIndex parameter, also without luck.

I just wonder if I am doing something fundamentally wrong, since nothing seems to have an effect on the zindex.

Poster: Ruth
Dated: Thursday August 9 2007 - 18:44:17 BST

Hi,

I don't know if this will help. I can't do functions, but I remembered a post from way back with a similar problem. There is a differnce, the person was showing and hiding the menu and a different text links type menu, so the menu would be made invisible and the text links show, using a toggle. I realize it's not the same but Kevin explained in detail the problem and solutions so I figured it might give you some insight to whats happening and maybe an idea for a solution.

http://www.milonic.com/forum/viewtopic. ... 5256#25256

Ruth

Poster: mbremer
Dated: Friday August 10 2007 - 15:39:39 BST

Hi Ruth,

Thanks for pointing me in the correct direction. Although the posting didn't give me the exact solution, it got me in a postion to play around with the zindex values using JavaScript alert boxes, so I could verify the values from the Milonic menu and my divs.

After a bit of experimenting, I noticed that the zindex value of 0 only worked fine in combination with a postion style attribute. I tested the zindex=0 value before, but without the position attribute and that didn't work. A bit of Googling tells me the same thing.

Anyway, I've tried it out on our production environment with the commercial application and finally my menus work.

I am a happy bunny now, thanks a lot for the support. Have a nice weekend!