drop-down menus are behind page content

[jda71]

First of all, great program!
My problem has to do with my dropdown menus falling behind the image content on my page.  (Can be seen at http://windsorhistoricalsociety.org/test_page_final/index.html ).  I'm sure that it is probably something simple, but I'm still learning.  Thanks for any help.

[Teefax]

Hi jda71,

to my opinion you have a problem with the arrangement of z-index - like I had too ...

Please read this post:

http://ideasplayer.com/index.php?topic=127.0

Maybe it's helpful ...

Reagards
Teefax

[V]

I suppose the problem is the "z-index" positioning. However, the test page mentioned above does not exist and I was unable to check is that the case...

[jda71]

I don't know why the link was bad.  Try this:  http://windsorhistoricalsociety.org/test_page_final/index_7-15-09_pm_last.html

The z-index of the navigation menu is 9999.  I'm trying to position it in front of the image slide show just below.  This slide show is DHTML, and I don't know how or where to set this parameter.  Thanks for any help.

Once I resolve this I need to attack viewing issues between IE and Firefox, such as the text in the navigation menu being screwed up in Mozilla, strike through lines thru a link on the left (in mozilla), and the whole page being justified to the left (in Mozilla) not centered like in IE.

I still have a ways to go for a neophite!

[V]

in your style.css file, look for this code:

Code:

.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;
background: #f5f5f5;
font-weight: normal;
border-width: 1px;
margin: 0;
}

and just add z-index value as shown below:

Code:

.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;
background: #f5f5f5;
font-weight: normal;
border-width: 1px;
margin: 0;
z-index:999;
}

This should fix the submenus to go over the image. However, I see there are some issues with the top menu items, it seems they don't fit in one line (at least in my Safari) so you may want to fix this too.

[jda71]

I made the change but still seem to have the same problem.  Any other thoughts.  Could it be related to the fact that it is a slide show and not a fixed image?

And the top menu items look okay in IE, but are all messed up in Firefox.  (And apparently in Safari as well.)

This is a learning experience!

[V]

well, then it is the "fadeshow" thing that goes over. You should find the div where this slideshow works and set this div, span, image... or other element to go under the submenu items (the submenu ul's)... I don't know how that particular javascript works and couldn't say where to fix, but that seems to be the other way (to set the z position for the slideshow, when the bigger positioin for the ul doesn't work)...

BTW -- I did not see the above change (the z-index for "MENU LI UL" selector) in your css file...

[Teefax]

Hi,

I join this thread, because it seems I have the same problem ...

My starting point was this page:

http://fussballjugend.wtal.de/menu_03/menu_v40_3.html

After positioning several z-index I got access to the box I called content.

But I have to show a flash video in this box ...

http://fussballjugend.wtal.de/menu_03/menu_v40_5.html

It's obviously, that the menu is behind the. I made many attempts with positioning of z-index - because I think that's the right way.

Even this:

Code:

.mainmenu li ul {

position: absolute;
left: -999em;
height: auto;
width:15em;
background: #FFFF00;
font-weight: normal;
border-width: 1px;
margin: 0;
/* new item z-index:999; doesn't help ... */

But without any success.

Have you any idea how to run the site correctly?

Another question: I've found the following line in the generated menu code:

.mainmenu li:hover>ul.ul_ch

Is the character ">" correct here? Substitute it with a blank has no visible effect to the menu ...

Thanks in advance

Teefax

[V]

Ref. li:hover>ul.ul_ch -- this says that all ULs that are childs of LI should get the respective settings (http://www.w3.org/TR/CSS2/selector.html)
Ref. flash z-index -- it seems you must add

<param name="wmode" value="transparent">

to the flash object and also set the z-index values (for the flash div, probably for the object itself? Well, I don't know 'cause I never use flash but if you send the page I may try to fix... Quick googling gave this: http://joshuaink2006.johnoxton.co.uk/blog/82/flash-content-and-z-index , but I did not test it so I don't know does it worth...

[jda71]

Thanks for the help.
http://windsorhistoricalsociety.org/test_page_final/index_7-21-09_latest.html