Select Object inside dHtml div

Hey all I have a problem thats driving me crazy. I have a search area that contains html select items. The catch is that the search container div needs to be hidden and shown using JS and the select menu is taller than the containing div. Confusing I know but take a look a the screen shot.

div showing select objects


div showing select open


The div hides and shows just fine (all browsers) and if you open a select menu and keep your mouse inside the list the div stays open as long as your are over the menu list in FF, Opera and Safari. In those three browsers the div goes away if you mouse out of the div or the menu as they should.

However, In IE 6/7 as soon as you roll over an item in the select object it hides the container div. I've tried every work around I can think of including setting an open action on the select getFocus and mouseOver. I've even tried to extend the size of the background div when the select receives focus. Nothing seems to work.

Here's the minimal jQuery to open/close the div.



Any ideas or examples would be much appreciated since I can't seem to ask Google the right questions to get any results about this.

IE uses "windowed" controls for <select> elements, it wouldn't surprise me if the popup itself was a new window too which may steal focus from the page window entirely.

I would attach this to a click-handler instead of a mouseover handler.

By the time someone has the presense of mind to move their mouse over the menu for the first time they're probably going to have clicking it on the mind anyway.

I don't know, it seems like a design that's functionally challenged with the mouseover monitoring to me. The only solution I can think of to keep things close to how they are is setting a size for the <select> elements so that they're multiple rows tall and never spawn the popup.

Hey Joe, Thanks. I hadn't thought about the windowed content in IE but that would make sense. I agree with the thoughts on the rollover. I didn't do the design but I'd like to keep as close to the original design as possible. My initial answer after encountering the problem was to say a rollover to show and a "close" click to remove the window. In that scenario the select works fine (some how the mouse out is being captured from the select menu).

Also I just discovered another nail in the coffin in that the browser's auto complete drop down causes the same close behavior.

With the newest complication, its really looking like we're going to have to come up with something other than the hover solution but I thought maybe just maybe someone had encountered this before and had some crazy solution like the "iFrame over form fields for dhtml menus hack"