SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-order, z-index

    I added a drop down menu type navigation bar (using JavaScript div and layer) like http://www.sap.com and http://www.forbes.com/. It works really nicely, BUT I have one problem. When I add a drop down menu control (not div or layer), the control always displays on top of the navigation bar. I tried to change z-index, but it doesn't look like that it's working. Is there any way to get around the problem? Can you change the z-index for the drop down menu control?

    Jun

  2. #2
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume you are talking about a form-based drop down control. Form elements like drop-down menus hide layers. To solve the problem, you should embed the form-based menu into a layer and whenever you trigger the layer-based menu, hide the drop-menu control.

  3. #3
    SitePoint Enthusiast nbaxley's Avatar
    Join Date
    Jan 2003
    Location
    Kansas
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for a little more useless knowledge on this, it happens because the form elements are generated by the OS and not the browser, so it shows through all of the browser based elements (HTML). In Mozilla, you won't have this problem because the form elements are generated by the browser to give them more cross-OS compatability.

    For what it's worth.

  4. #4
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nbaxley
    Just for a little more useless knowledge on this, it happens because the form elements are generated by the OS and not the browser, so it shows through all of the browser based elements (HTML). In Mozilla, you won't have this problem because the form elements are generated by the browser to give them more cross-OS compatability.

    For what it's worth.
    Hmmm. V. interesting. So to confirm my understanding: are you saying that with IE (up to an including version 6) there's not a hope in hades of getting the drop-down (select) part of a form (or any element of a form, for that matter) to appear _behind_ a pop-up or dynamic menu that should appear on top of (ie. obscuring) the drop-down list?

    If so... bugger!
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  5. #5
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just looked more around sitepoint and found another link that confirmed this as an unsolvable (in IE) problem:

    http://www.webreference.com/dhtml/di.../indexNEW.html
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup. Undoable. In fact, the tidbit about Mozilla is half-true. The dropped portion of a SELECT will appear on top, as well as the scrollbar on a select-multiple.

    Thanks for linking up that diner article, spaceman, I keep it in my favorites just for posts like this

    premshree is right -- the only current solution is to hide the control when the menus are up.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think I know what your on about. I used display:none to hide my drop-down menu's when I used z-Index.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #8
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    premshree is right -- the only current solution is to hide the control when the menus are up.
    Do you know of any 'live' examples of where this is being done?
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I s'pose I could make one though.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    When the z-Index gets changed, change the display as well, to display:none. to make it re-appear use display:inline

    should work.

    visibility wont change it.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •