View Full Version : Chrome Menu "Z-Index" not always on top

06-22-2006, 02:47 AM
Admittedly, I've modified the chrome menu's appearance but hopefully I'm not responsible for the anomaly. The drop down menu doesn't cover drop down list boxes. I've experimented with position: absolute and z-index: but I can't resolve the problem.

css: http://gowebsite.com/chrometheme/chromestyle3.css
menu html: http://gowebsite.com/menu.html

Expand "Quick Domain Search" on the right hand side. The right side drop down menus don't cover the drop down box below.

06-22-2006, 06:53 AM
Dropdowns are likely just placed on top of everything. Don't you want to be able to see them when they drop down?

Maybe some complex css will be able to override this, but, really, why?

I'm sure someone else will know the technical reasons/settings for this, but I do think it's just a browser default. It would be somewhat like having something over the file menu... just seems like it should always be on top.

07-02-2006, 07:15 PM
I made it difficult to see the specific situation I was talking about so here's another try:

The dropdown list box in the content that lives below the drop down menu pops through the menu.

Version 2 of chrome menu appears to be doing the same thing:


10-26-2006, 06:46 PM
This happens because IE cheats and uses the operating system to render those drop down menus after the page is loaded instead of using the browser. I think it saves memory or loads the page faster or something like that. I bet you don't get that problem with firefox. Might be fixed in IE7, I wouldn't know I just use Linux :)

10-26-2006, 10:08 PM
I'll get to updating the Chrome Menu script soon with the ability to actually hide a form object when the menu drops down, similar to in Drop Down Tab menu (http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm).

10-26-2006, 11:35 PM
I'll get to updating the Chrome Menu script soon with the ability to actually hide a form object when the menu drops down, similar to in Drop Down Tab menu (http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm).
That is really the bad option here.The problem is caused by a design decision in IE 6 or less(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/select.asp).Select elements are windowed controls. This means they only obey z-index compared to other windowed controls. Windowless controls obey the z-index of other windowless controls. Luckily, an iframe is both a windowed and windowless control. So you insert an iframe in between the flyout menu and the select menu. Then use IE's opacity filter to hide the iframe. Then use conditional comments(if lse IE 6) to run this extra code. This is normally called the "iframe shim". A google search will probably provide more info.

10-27-2006, 01:19 AM
Interesting, this is the first time I've heard of the iframe shim technique. I'll read up on it, though I think any solution is only interim anyway as IE7 addresses the issue.

10-27-2006, 01:37 AM
John actually posted about this on another thread (http://www.dynamicdrive.com/forums/showthread.php?t=8342&highlight=Chrome+iframe). HIs post is a little easier to understand. I find this page (http://cssbeauty.com/skillshare/discussion/662/css-dropdowns-behind-select-boxes/) to be very helpful. It is about the 4th or 5th post down.