A simple example is here: http://jsfiddle.net/ycHgg/1 Try this in IE 7, 8 or 9. Click on the select box inside the div drop-down list and then try to select the number “3” - the entire div drop-down list will disappear. How do you end this and you see that the drop-down list remains open? Detailed post below.
Firstly, it seems like a non-question, I can’t believe that this is even a problem. But I tried to try it. I did not find anything that is directly related, but this is such a simple concept, I can’t believe that there is no answer.
So here is the situation. I have a div and this is my drop down menu. I have onmouseover and onmouseout to cause this div to show and hide. I tried display, visibility, and now I use “left” to place it -9999px and then go back to -5px to hide and show it. This all works great, so it doesn't seem to matter which I prefer to use. However, I also have an input text box inside this div. I found that if I used display: none to hide the div hovering above the input text box, it made the entire div suddenly disappear in Chrome. Using left or visibility no longer leads to this problem, so I'm stuck with using left
Now the problem is this: I have a choice in this div. When I click on the selection box, this is normal. Excellent. When I move the mouse over a layer that shows my selection items, the entire div disappears along with the selection, text box, etc. Poof, just suddenly interrupted, it all disappears. I should mention that this problem occurs in IE. All versions are from 7 to 9. When I tried searching on this topic ("IE IE selection box disappeared"), I just get results about a completely different problem, described here:
http://www.javascriptjunkie.com/?p=5
It's not my problem. According to this page, there is a common IE6 error that displays individual windows through any divs that appear above them, no matter what. According to other sources, this is because the selection field is treated as a window element and will be displayed on top of everything no matter what (but this is fixed in IE 7). And this page tells you how to get around this. This is fine, but my problem is that the select box is inside the div itself, and when you click on the select box to use it and then move the mouse down to select an item, it disappears - div, select, textbox and that’s it. And this happens from IE 7 to 9. Again, the only javascript used is onmouseout and onmouseover to position the div so that it is on the left: -9999px and then left: -5px, respectively, to hide and show it. Nothing special here, but it is still happening.
The structure is pretty simple:
<a href="#" onmouseover="display('menu');" onmouseout="hide('menu');">Nav Item</a> <div id="menu" onmouseover="display('menu');" onmouseout="hide('menu');"> <form> <fieldset> <label>Hello</label> <select> ... </select> </fieldset> </form> .... </div>
Ellipses inside the selection are just the elements of the selection, ellipses outside the form are the other elements inside the drop-down menu, consisting of various divs and ul and tables. I think everything swam to the left. I don’t think it affected this problem with window selection. The anchor hides / shows the div, and the div itself also has the hide / show property (if the user moves the mouse, starting from the inner div, outside the div, he must hide)
Is it possible that the selection box is still a window element, and why is it useless? I read that this was fixed in IE 7, but maybe only for the case presented in this blog post (div is displayed on top of the selection), and not if the selection is inside the div itself? But the problem is that using the select box makes the whole div go away, so that sounds different. However, the selection, which is the "windowed" element, makes me think that, clinging to it, the div thinks the mouse is outside, so it moves to the left: -9999px instead of staying open and staying to the left: -5px. I tried looking for other sites that use highlighting inside the div dropdown menu and found only one example that really surprised me. If you go to http://www.walmart.com and hover over the "Store Finder", you will see that the div drop-down menu is displayed and the State field is the choice. It works great, but cannot figure out how they do it.
Has anyone on Earth experienced this problem? Can anyone recreate it themselves and see that I'm not crazy? I seriously seriously appreciate the help, I hit my head on the wall for a couple of days right now.