• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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

 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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!
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
Ranch Hand
Posts: 305
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Have you tried setting the background color on the dropdown? I think it's transparent by default.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 305
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 305
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
reply
    Bookmark Topic Watch Topic
  • New Topic