[SOLVED ]Horizontal menu-z-index issue - other links on page quit working

[dhathy]

On the horizontal menu, the sub menus show up ok in Opera and FF - after I added a z-index in the css.  This did not do the trick, however, for IE. But adding a z-index:-1; on my main container worked for all three browsers.

This created a new problem.  None of the other links in the body work at all.  Only links in the header work.

Anyone run into this?

the site:
www.reasonandsanity.com

yes, I have the IEscript included.  Could there possibly be something to add to the script?

The drop down is only on "Myth" menu item.

[Dr.CSS]

Did you have a problem when you first made the menu so you added z-index to it?...

I've done many many menus and have almost never ran into any problem that required z-index, only when I had something below it that had position: set or transparency of an image below it...

[dhathy]

Yes, I did have to set the z-index to get it to work - on any browser.
Here is the link to the template from which I started:

http://matthewjamestaylor.com/blog/ulti ... pixels.htm

CSS is available by viewing source. This is valid CSS but a little different approach to an equal height 3 column layout with no hacks.  I am pretty sure this is where the issue lies but have not come up with a solution. 

Of course, I am open to alternatives.

Thank you,

Dan

[dhathy]

I think I have narrowed this down a little: I need to set the z-index like this on the menu css

#primary-nav li li {
   margin-left: 0px;
   margin-top: -1px;
   float: none;
   position: relative;
z-index:100;
}

to have the  dd menu and all the links work in Opera and FF

If I set the z-index on this class, as shown, then the drop down works in IE but no links in the column container(.colmask) work.  They, the links, work in the head and footer and the section below the main content.  And this holds for all 3 browsers.

It is taking a z-index of -1 to get this to work in IE.  just a lower z-index than what I set in the menu css, has not worked.

/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
border-bottom:1px dashed black;
z-index:-1;


As you can see, there is an element with position.  There are NO images here that should be affecting this.

[dhathy]

You, Jeremy, are my new best friend!
I can mark this as solved

THANK YOU, he shouts from the roof tops