Javascript/CSS/IE

August 18, 2004 8:12 AM

I'm having a javascript/CSS/IE problem. I'm working on a website that has a line of buttons at the top for navigation, and when you mouseover the button, a menu drops down giving you sub-options. This is controlled pretty simply with javascript changing the "visibility" attribute in the stylesheet for the menu. A problem arises in IE, however, when there are form elements on the page. If the dynamic drop-down menu overlaps a form element, that form element disappears. (Specifically, this is happening with a menu) You have to reload the page to get it back. Anyone know why this might be happening, or how to fix it? Works fine in NS7, Firefox, Mozilla, etc.....

I'd post a link so you could seen an example, but it's an internal site here at work.

posted by emptybowl to Science & Nature (5 answers total)

Response by poster: Okay, I seem to have been able to fix it by using "z-index", but now I have a new problem. If the page is loaded with the focus being the form element (i.e. you choose something from the menu, and it loads that selection), the dynamic drop-down menu will appear BEHIND the form element, even thought the z-index says it should appear ahead of it.
posted by emptybowl at 8:31 AM on August 18, 2004

The drop-down is an intrinsic control, like a radio button or an embedded flash app - it will always be on top of general page content, and is unaffected by z-index. There are a number of workarounds for this, none are great. The most common one I've seen is a 'hide-the-intrinsic-controls' method when mousing over the dynamic bits that may appear to be obscured. Msnbc.com does this when you mouse over their menu, all of the flash ads and iframes on the page get hidden - to prevent obscuring the menu.
posted by kokogiak at 8:35 AM on August 18, 2004

kokogiak beat me to it. Browsers are getting better about what you can drop DHTML stuff over (including Flash in IE6, Moz, etc.), but selects aren't really on the page: effectively you're looking through a hole in the page at a control that's on your Windows desktop. It works in flavors of Moz because they're not IE only, so they don't use the native controls.

Also, I predict form elements will begin to appear in MetaFilter within hours, e.g., build your own poll.
posted by yerfatma at 8:45 AM on August 18, 2004

Why not use a more standards-compliant off-the-shelf method, like Brothercake's menus (op. cit.)?
posted by joeclark at 10:47 AM on August 18, 2004

Why would those menus make a difference? You cna't drop anything over a SELECT box in IE.
posted by yerfatma at 4:39 AM on August 19, 2004