Stacking Levels with DropMenu

I’m really hoping someone can help me with this problem... it’s driving me crazy!

I am using DropMenu for a vertical :hover/flyout menu in the leftmost column. When it flyouts out (to the right, of course) it gets obstructed by some of the other DIVS that appear over it. You can see it at:
http://dev.baycollege.edu

I’ve tried playing with z-index to no avail. How do I make the menu ’flyouts’ appear on top of EVERYTHING else on the page?

Any help would be greatly appreciated! Thanks.

Robert

I read somewhere that z-index only works with positioned elements. is your hover div relaively or absolutely positioned?

Wow... quick response! Thanks, Scotty.
The container DIV that holds the snippet is positioned relatively. Think that’s the problem? I’ll give do some testing....

OK... I’ve tried changing the positioning of the hover div & those around it. I even tried creating another container div into which I placed the hover div. No luck. Any other suggestions?

You might want to install Web Developer Plugin in to FF. Using "Outline Current Element" to view the hierarchy of the flyout class and check the Z index all the way up the tree.

Yeah, I’ve been using the Web Developer plugins heavily and just did what you suggested. I explicitly defined z-index values for every affected div and then made the flyout z-index WAY WAY higher. Still no luck. Am I missing something obvious? One of the options with the plugin is to Display Div Order... what’s that for? I know it’s not the order in which the DIVs are listed in the css... i noticed that the ’div order’ for the hover div is lower than the div order of the elements blocking it.

Thanks.
-Rob

Hi Robert.

I had a quick look at your page and the CSS. Its seems quite complex and I have to wonder if your caught in the trap of making changes to the CSS to try and resolve your issues and now the CSS is getting a bit hard to understand.

You have a number of block level elements with z-index applied which have no positioning. ScottyDelicious is right, z-index on positioned elements only. It seems you have also gone for full height divs, but if that the case I am not sure why you need to on this design, its just more complex code.

I think the problem is the top banner / banner image hiding your fly-out menu. If it was me I would start over with a small XHTML coded page, code the menus first and make sure they work OK, then add your banner and build the page slowly and carefully (you have a lot of hacks and I wonder if you could simplify the overall design)

I also feel trying to place photos with background transparency is causing you a problem in the masthead. Clearly you are avoiding applying a MATT to some images but the edges are now not anti-aliased and that is not doing you any favours on these types of photos. I would save the pictures with the background if the background colors don’t change and just place a snippet/widget to allow the user to choose a image.

From a design point of view you could even leave that masthead with a default image and some nice text for each section (would be clean) and use the pictures of people on the page itself (where this is relevant). For example when I clicked on the president the picture (which changes) was a student i guess)

Anyway, I don’t know if anything above will help you or not, but if your spending hours and going round in circles, take a deep breath, grab a coffee and start a new blank page and build-it up, validating at each stage, it will possibly be the quickest way in the end. Good luck

Thanks for the feedback, Edge. Most of the z-index statements in the CSS were added today, thinking that I *needed* to add them all. Obviously it didn’t work. I *wish* I could alter the design in several ways, but this layout was (unfortunately) selected by a web design committee at the college. Committees suck. They actually found an XHTML/CSS template at an online template house that met all of their requirements (except for the hover/flyout menu) so we bought it. They insisted on some things... like the full-height, rotating images and (eventually) dynamic background colors, hence the transparent images). (Did I mention committees suck?) One of the reasons I selected MODx as CMS is because of its flexibility in separating XHTML & CSS; if this project is going to be possible at all, it’ll be using MODx.

For easier delegation of website maintenance later, I wanted to centralize a lot of the more dynamic style-related CSS elements, such as background colors, logos, text, etc. in a single CSS file that would hold values as constants that could be used repeatedly in other CSS files. I found that Shaun Inman’s CSS Server-Side Constants ( http://www.shauninman.com/plete/cssssc/ ) work great, though it’s a kludgy solution for me. It’ll be MUCH better, though, once we can better treat CSS as MODx documents in the next release. I just can’t get that to work now in 9.2.1

I think I’m going to focus on optimizing the CSS (the XHTML page is already really small and simple) and start going through everything again.

Oh... and I will be refilling the coffee mug frequently.

Thanks again. I’d definitely welcome any feedback offered.

-Rob