Menus and Z-index

Discussion in 'ASP .Net' started by Microsoft Newsserver, Jul 7, 2008.

  1. Here's a puzzle!!!!!!
    When menu item 2 is hovered over, the list of sub items passes between
    "divIndicators" and "divTimeBandContainer". It "seems" that the sub item
    list calculates its z-index based on the next object down, but objects which
    are inside that one which of course incrementally increase so the menu
    passes below them.

    How can I force the menu system to use the highest possible z-index.


    ( Kinda Pseudo code below for structure )
    <div id="divMenuContainer" >
    [ MENU ITEM ] [ MENU ITEM 2 ] ->[subitem1][subitem2]
    </div>
    <div id="divIndicators">
    <div id="divTimebandContainer">
    <table> .................................</table>
    </div>
    </div>
     
    Microsoft Newsserver, Jul 7, 2008
    #1
    1. Advertising

  2. There are a couple of ways to handle this.

    Cheap, down and dirty: Set CSS on the menu item (this is not very fine
    grained in the standard menu implementation) and set z-order as one item in
    the CSS. This many be what you have already tried?

    Less down and dirty: Use the CSS Friendly Adapters and output the menu as
    <ul><li></li></ul>. This gives you more control, as you can set z-order on
    more levels.

    Hard way (not really, but harder): Use the CSS Friendly Adapters and edit
    hte default code (there are plenty of good reasons to do this, IMO). You can
    then set up a wide variety of rules to get the levels of your menu to act
    how you desire.

    --
    Gregory A. Beamer
    MVP, MCP: +I, SE, SD, DBA

    Subscribe to my blog
    http://gregorybeamer.spaces.live.com/lists/feed.rss

    or just read it:
    http://gregorybeamer.spaces.live.com/

    ********************************************
    | Think outside the box! |
    ********************************************
    "Microsoft Newsserver" <> wrote in message
    news:...
    > Here's a puzzle!!!!!!
    > When menu item 2 is hovered over, the list of sub items passes between
    > "divIndicators" and "divTimeBandContainer". It "seems" that the sub item
    > list calculates its z-index based on the next object down, but objects
    > which are inside that one which of course incrementally increase so the
    > menu passes below them.
    >
    > How can I force the menu system to use the highest possible z-index.
    >
    >
    > ( Kinda Pseudo code below for structure )
    > <div id="divMenuContainer" >
    > [ MENU ITEM ] [ MENU ITEM 2 ] ->[subitem1][subitem2]
    > </div>
    > <div id="divIndicators">
    > <div id="divTimebandContainer">
    > <table> .................................</table>
    > </div>
    > </div>
    >
    >
    >
     
    Cowboy \(Gregory A. Beamer\), Jul 7, 2008
    #2
    1. Advertising

  3. Microsoft Newsserver

    bruce barker Guest

    unless you are setting the z-order of the of the div's, you should be ok.
    maybe you are seeing the behavior of <select>'s (dropdowns) in IE. in IE
    (until version 7), selects are in window infront of all the html, so there is
    no way to get any html content to be on top, no matter the z-order. as
    iframes have their own window, you can use an iframe to get content to float
    on top of a select.

    a common fix for IE is to hide any select the menu would float over.


    -- bruce (sqlwork.com)


    "Microsoft Newsserver" wrote:

    > Here's a puzzle!!!!!!
    > When menu item 2 is hovered over, the list of sub items passes between
    > "divIndicators" and "divTimeBandContainer". It "seems" that the sub item
    > list calculates its z-index based on the next object down, but objects which
    > are inside that one which of course incrementally increase so the menu
    > passes below them.
    >
    > How can I force the menu system to use the highest possible z-index.
    >
    >
    > ( Kinda Pseudo code below for structure )
    > <div id="divMenuContainer" >
    > [ MENU ITEM ] [ MENU ITEM 2 ] ->[subitem1][subitem2]
    > </div>
    > <div id="divIndicators">
    > <div id="divTimebandContainer">
    > <table> .................................</table>
    > </div>
    > </div>
    >
    >
    >
    >
     
    bruce barker, Jul 7, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. karthikeyavenkat
    Replies:
    2
    Views:
    649
    Bryce
    Mar 17, 2005
  2. news.west.cox.net

    Select menus above flyout menus? help?

    news.west.cox.net, Dec 8, 2004, in forum: HTML
    Replies:
    8
    Views:
    811
  3. EnigmaticSource
    Replies:
    4
    Views:
    847
    EnigmaticSource
    Oct 5, 2007
  4. Shawn W_
    Replies:
    5
    Views:
    312
    Aldric Giacomoni
    Sep 16, 2009
  5. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    337
    Tomasz Chmielewski
    Mar 4, 2008
Loading...

Share This Page