Fog Creek Software
Discussion Board

Welcome! and rules

Joel on Software

user control with javascript menu  (

Ok, i have a user control with a javascript drop down menu that i am calling on every page.  My problem is that anything i put on the webform below the user control seems to overlap the drop down menu that is loaded from the ascx file that is the user control.  I would so basically half my drop down menu disappears because of content ont the main webpage.  Any help?

Tuesday, October 12, 2004

I've seen a bug in IE before where hidden/displayed div tags could not obscure drop down controls so if that's what you're seeing I think you may be out of luck as I never found a fix.

You might want to try doing some things with z-order (if possible) as well to send all the items in your webform further "back" then the drop down menu.  Haven't ever done this so don't know if it's even possible but may be something to look into.

Good luck.

Tuesday, October 12, 2004

Yeah, set the Z-Index style to a high number for the menu items you want to appear to float on top, e.g.

<DIV id="myMenu" style="Z-INDEX: 1000;">Menu content</DIV>

This will allow the menu to "float" above (almost) anything on the page.

I can't float above comboboxes (regardless of Z-INDEX), due to a feature in IE/Windows. I do not know of a good way around this, but you could try not using those controls near where your menu needs to be, or hiding them when the menu pops up, but that just looks like crap.

You could also try using the combobox controls built into IE, rather than the vanilla HTML ones, as they behave properly.

I susect it is something to do with how Windows manages the screen artifacts (hWnd), rather than an IE bug.

Wednesday, October 13, 2004

I think there is a javascript library at that will sort this out.... I've certainly got some code somewhere that will temporarily remove a select box etc from the page if it overlaps with a given DIV.  I'll have a dig around and see if I can find the code.

Walter Zorn has some pretty cool javascript all round really, well worth checking out!

Neil Dunlop
Wednesday, October 13, 2004

Yup... Walter Zorn has the (or at least 'a') answer.  Specifically you want to take a look at the tooltip library.

Neil Dunlop
Wednesday, October 13, 2004

Hi every body i got some great code that will fix this problem, using a iframe + div combination.

<div id="contextMenu" style="z-index:200; LEFT: 505px; WIDTH: 161px; POSITION: absolute; TOP: 206px; HEIGHT: 117px; visibility: hidden;"  onMouseOut="menu = this; this.tid = setTimeout(' = \'hidden\'', 300);" onMouseOver="clearTimeout(this.tid);">
<iframe id="ContextMenu" frameborder="0"  name="ContextMenu" marginwidth="0" marginheight="0" src="contextmenu.aspx" width="100%" scrolling="no" height="162" style="background-color:transparent;overflow-x:hidden;overflow-y:hidden; "></iframe></div>

Simply, an iframe with style background as color:transparent;overflow-x:hidden;overflow-y:hidden; works to go on top of the infinite combo-box problem.  Sorry I can give credit where I found it

Michael Arnwine
Friday, December 3, 2004

*  Recent Topics

*  Fog Creek Home