aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes DHTML Drop Down Menu's, IE, and Form Elements Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "DHTML Drop Down Menu Watch "DHTML Drop Down Menu New topic
Author

DHTML Drop Down Menu's, IE, and Form Elements

Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15286
    
    6

One of the web developers where I work has run accross an interesting problem. When creating those cool drop down menus using DHTML and CSS, Form elements show through the menus. Googling turns up that it's a problem with IE. So we tested it on another browser and sure enough, it worked great. But IE, it sucks. What's new, right?
Anyway, I was wondering if anyone else has heard of this and if there is a fix/workaround for this issue.
We tried setting the Z-Index of the form elements to -100 and the menu to +100 but it still doesn't work right.
Thanks.


GenRocket - A Test Data Generation Platform
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

The only solution I've seen that works 100% in IE (insert obligatory cussing here) is to hide all the form elements when the menu is displayed, and un-hide them when the menu is dismissed. What good family fun!


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15286
    
    6

Originally posted by Bear Bibeault:
The only solution I've seen that works 100% in IE (insert obligatory cussing here) is to hide all the form elements when the menu is displayed, and un-hide them when the menu is dismissed. What good family fun!

Yeah, we did that too. The problem is that on different resolutions, the form elements aren't always behind the menu 100%. So the user would just see form elements disappearing.
Jeffrey Hunter
Ranch Hand

Joined: Apr 16, 2004
Posts: 305
Have you tried setting the background color on the dropdown? I think it's transparent by default.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Changing the background color does nothing to solve this problem.
Depending on how fancy you want to get, you can detedt where an element is on the page and wheter or not it will be covered up by the menu.
If it does then you would hide it.
Eric
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15286
    
    6

Originally posted by Jeffrey Hunter:
Have you tried setting the background color on the dropdown? I think it's transparent by default.

I'm not talking about a SELECT drop down menu. I'm talking about a drop down menu that I create using DHTML with DIV tags. Unless I am misunderstanding what you are talking about, we are talking about 2 different things.
Jeffrey Hunter
Ranch Hand

Joined: Apr 16, 2004
Posts: 305
I used the DIV technique as well, and the CSS is as follows:

Supporting javascript code determines when to show/hide the DIV. I'm using a background image, so naturally the form behind this DIV will be covered up when it is made visible. If no background is set, the underlying form contents will show through. This is not fully tested, but it works rather well so far in IE and Netscape.
NOTE: All positioning is absolute and fixed, so this will not work if using percentages.
[ May 06, 2004: Message edited by: Jeffrey Hunter ]
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15286
    
    6

Thanks Jeff. He is going to try it out and see how well it works with what he has. I'll keep you posted...
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

If this is the same problem I think it is, no amount of background-ing will help. The problem is that floating DIVs are drawn on the parent window, and then the heavy-weight controls (themselves windows) representing the form elements are drawn. So they will always occlude the floating DIVs. (more obligatory cussing).
Jeffrey Hunter
Ranch Hand

Joined: Apr 16, 2004
Posts: 305
Aha. I've gone back at looked at my code, and I think I haven't run into the problem you described because I'm using a side-bar menu (along left side), and an IFRAME, which is to the immediate right of the side-bar.
When a user hovers over a side-bar menu option, the DIV sub-menu appears to the right and covers a portion of the IFRAME which contains FORM elements. I'm assuming my code works (haha, wonderful words coming out of a programmer's mouth, right), because the hidden DIV sub-menu is part of the parent frame, and appears above the contents of the IFRAME FORM. I'm still relatively new to CSS and DHTML, so I don't really know exactly why it works the way it does.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: DHTML Drop Down Menu's, IE, and Form Elements
 
Similar Threads
question about drop down menus and servlets...
Drop down menu problem
content of dropdown B will depend on what is selected on dropdown A
drop down list display issue
dropDownMenu z-index IE bug with RichFaces