I can't seem to get the drop-down menus on a website I'm working on to layer properly on anything but IE7+. It looks fine in IE, but when I open it up in Chrome or Firefox, the menu objects fall behind the text div blocks.

The website in question - with placeholders used in place of links and images - is here:

http://malik.sts.jhu.edu/~shan25/Sample/sample.html

The corresponding css sheet can be found here (there's a bit of excess baggage there -- those are for other parts of the website):

http://malik.sts.jhu.edu/~shan25/Sample/sts.css

Can anyone help to make it function/look nice in these other browsers? (Firefox preferred). I'm probably making a mistake somewhere here, but I can't seem to be seeing it...

And before you folks say it,

• I'm aware about the CSS 3.0 errors. I am ignoring those, since no opacity variance in non-supporting browsers is fine with me.
• I'm aware that 4.0 Transitional is getting out of date. I'm doubting this is the reason the layering is not working.
• I'm aware I'm missing body tags -- realized right after I made this post. Fixing that on a local copy, however, did not fix anything.

Thanks!

FYI the menu doesn't work at all in IE6, i.e. nothing happens.



It's good you use HTML 4.01 then. You are right, HTML or XHTML matters not.


It wouldn't. Both BODY tags are actually optional in HTML. But agree, by all means use them.

Yeah, I'm aware of that too. Like I said, IE7+. I know this is likely pretty unwise, but for the sake of my own convenience (and the fact that I'm somewhat swamped in the schedule department), I'm not planning to find a way to make it IE6- supported.

If anything, I'll get a finished product that works for several newer browsers up now, and /then/ find a way to get it to work in others...

Yeah, now when I've looked I relaize it's CSS only. You should have something for browsers that don't handle the CSS though.

Hmmm, I assumed the problem had to do with the generous use of z-index, but nuking them doesn't change anything.

Pandy, I'm just throwing this out there. I have a css/js flyout menu on my site and was having the exact same issue. The div's on this site have a z index of 50, but the menu doesn't have a z index at all. So I would assume that adding a z index to the menu div higher than all the other divs would place it on top of everything. The suggestion I was given was to set it at 200 and it works for me, it's on top of all my other div's so long as I keep them low.

Just a suggestion, may not apply to this case.