Pure CSS Menu Showing Behind Form Fields in IE

[kwilliams]

I developed a pure CSS menu with the help of Eric Meyer's tutorial, and it works great. But in IE6 and IE7, the menu shows up *behind* the form fields below. I hope that there's a quick fix for this that I haven't been able to find. If you can help me out, that would be great. Thanks.

[KDLA]

Did you put "clear: both" in whatever follows the menu? If not, it will appear behind the next block element.

KDLA

[ray326]

Most folks hide the effected widgets when the menu drops down.

[kwilliams]

Hallelujah! I've found an answer by looking at one of the sources of my CSS menu...suckerfish. And it works great.

Here's an article on how to do exactly what I needed: http://tanny.ica.com/ICA/TKO/tkoblog.nsf/dx/select-tag-overlap-in-ie-part-ii

...and here's an example page that they created to show how it works: http://tanny.ica.com/ICA/TKO/test.nsf/suckerfish/examplefix.htm

This solution uses the iframe method mentioned previously in this post, while allowing only part of the select menu to be hidden. Hopefully this will help other developers in the future. Thanks for all of your help.

[felgall]

Using iframes will create exactly the same problem in Opera 8 as it fixes in IE6 and so is NOT the best solution. The best solution is to hide select tags and iframes when you have something that needs to appear in front of them so as to fix the bugs in both browsers.

[Kravvitz]

Tanny recommends using a conditional comment, so the script will only be used in IE5-6/Win, so if one follows his advice his script won't cause a problem in Opera 8.

[felgall]

Tanny recommends using a conditional comment, so the script will only be used in IE5-6/Win, so if one follows his advice his script won't cause a problem in Opera 8.


But does the code also fix the equivalent problem in Opera 8 of menus going behind iframes?

[Kravvitz]

No, because that's not the script's purpose.

Why would anyone still be using Opera 8.x anyway?