[thelist] Drop Down menu not working in IE

[Dan H]

Hello all and hope this season finds everyone in good spirits,

Here is my issue.  I hope I explain it clearly enough.  My knowledge level  
is probably along the lines of advanced beginner.

Here we go:
On the horizontal menu, the sub menus show up ok in Opera and FF - after I  
added a z-index in the css for the menu.  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 main content  
section work at all when adding the z-index:-1;.  Only links in the  
header, footer, and sub-columns work.

The menu is generated by the CMS (CMS Made Simple is the CMS). These are  
CSS menus with a bit of javascript added for it to work in IE.

the site:
www.reasonandsanity.com

yes, I have the IEscript included.

The drop down is only on "Myth" menu item. As you can see, it is hidden  
behind the main content in IE but works in Opera and FF.


The layour is based upon the following:

http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm

CSS is available by viewing source.

I think I have narrowed this down a little: I need to set the z-index like  
this on the menu css to have the  drop down menu and all the links work in  
Opera and FF. Removing the z-index here, and it does not work at all in  
any of the browers.

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



If I set the z-index on this class (colmask), as shown, then the drop down  
works in IE but no links in the column container(.colmask) work in any of  
the browsers  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;


--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

-- 
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/