Select menus above flyout menus? help?

Discussion in 'HTML' started by news.west.cox.net, Dec 8, 2004.

  1. I have been asked to troubleshoot this problem. Not being a user of html
    normally, I have not been able to find a solution.

    http://southernpine.com/joinlocator.shtml

    On the page above, there is a set of flyour menus using javascript. Each of
    the menus appears in a div tag. When activated the contents of the div
    slide out.

    If you roll over "International Buyers", "Education", "Sustainability",
    "Media Center" or the "FAQs" link, the flyout appears below the select menus
    on the form.

    How can I correct this? I have tried putting - style="z-index:10;" - on
    the flyour divs and tried - style="z-index:1;" on the form itself as well
    as the individual select menus.

    Any ideas are appreciated.
    news.west.cox.net, Dec 8, 2004
    #1
    1. Advertising

  2. news.west.cox.net

    rf Guest

    news.west.cox.net wrote
    >
    > http://southernpine.com/joinlocator.shtml
    >
    > If you roll over "International Buyers", "Education", "Sustainability",
    > "Media Center" or the "FAQs" link, the flyout appears below the select

    menus
    > on the form.


    This is a well known problem.

    Some browsers use Windows Common Controls for their form controls. IE in
    particular uses a dropdown combo box for a select box.

    This is a seperate Windows window, a child of the browsers client window.
    This child window lives in front (in the Windows sense) of anything that is
    drawn on its parent window. So, your slide out menu slides under the select
    box. There is nothing you can do to change this behaviour.

    > How can I correct this? I have tried putting - style="z-index:10;" - on
    > the flyour divs and tried - style="z-index:1;" on the form itself as well
    > as the individual select menus.


    z-index won't help. Nothing you can specify in HTML/CSS will help. There are
    two workarounds:

    1) Ensure that the area that the slideout menu uses does not have any select
    boxes in it, and other form controls for that matter, you don't know which
    browsers use which common controls for form controls. I have seen browsers
    that use an edit box for an <input type="text"> field.

    2) Hide the select boxes while the slideout menu is in place.

    --
    Cheers
    Richard.
    rf, Dec 9, 2004
    #2
    1. Advertising

  3. news.west.cox.net

    SpaceGirl Guest

    rf wrote:
    > news.west.cox.net wrote
    >
    >>http://southernpine.com/joinlocator.shtml
    >>
    >>If you roll over "International Buyers", "Education", "Sustainability",
    >>"Media Center" or the "FAQs" link, the flyout appears below the select

    >
    > menus
    >
    >>on the form.

    >
    >
    > This is a well known problem.
    >
    > Some browsers use Windows Common Controls for their form controls. IE in
    > particular uses a dropdown combo box for a select box.
    >
    > This is a seperate Windows window, a child of the browsers client window.
    > This child window lives in front (in the Windows sense) of anything that is
    > drawn on its parent window. So, your slide out menu slides under the select
    > box. There is nothing you can do to change this behaviour.
    >
    >
    >>How can I correct this? I have tried putting - style="z-index:10;" - on
    >>the flyour divs and tried - style="z-index:1;" on the form itself as well
    >>as the individual select menus.

    >
    >
    > z-index won't help. Nothing you can specify in HTML/CSS will help. There are
    > two workarounds:
    >
    > 1) Ensure that the area that the slideout menu uses does not have any select
    > boxes in it, and other form controls for that matter, you don't know which
    > browsers use which common controls for form controls. I have seen browsers
    > that use an edit box for an <input type="text"> field.
    >
    > 2) Hide the select boxes while the slideout menu is in place.
    >


    there's a trick for this; write and empty iframe in your stack of DIVs
    used for the menus. Form elements on the container page CANNOT show
    through an iframe, however further DIVs can be stacked on top of
    iframes. The solution is to have an iframe the same size as your menu
    that appears WITH your menu, but at a lower z-index. Works in IE.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Dec 9, 2004
    #3
  4. RE/
    >
    >http://southernpine.com/joinlocator.shtml


    I kind of like it.

    What is the consensus on this scheme? My agenda is to settle on a method of
    presenting heirarchical menu choices....preferably as concisely as possible.
    --
    PeteCresswell
    (Pete Cresswell), Dec 9, 2004
    #4
  5. RE/
    >http://southernpine.com/joinlocator.shtml


    I should add that, as a user, I *don't* care for the clickability of the parent
    topics....In fact I find this confusing in many web pages: more than one way to
    get to the same place.

    In this case, clicking a parent topic just opens up a new page that lists the
    flyout choices all over again - or is this a fallback position in case the
    user's PC does not support whatever it is (Java, I guess...) that makes the
    flyout menus work? If so, I'd think one should check to see if (Java?) is
    enabled on the user's machine and suppress those flyout-equivalent/duplicate
    screens. ?
    --
    PeteCresswell
    (Pete Cresswell), Dec 9, 2004
    #5
  6. news.west.cox.net

    rf Guest

    SpaceGirl wrote:
    > rf wrote:


    [menus under form elements]

    > > This is a well known problem.


    <snip>

    > there's a trick for this; write and empty iframe in your stack of DIVs
    > used for the menus. Form elements on the container page CANNOT show
    > through an iframe, however further DIVs can be stacked on top of
    > iframes. The solution is to have an iframe the same size as your menu
    > that appears WITH your menu, but at a lower z-index. Works in IE.


    What a lot of hoops to jump through to fix a problem that should not be
    there in the first place :)

    Do you have an example where this actually *works*? An iframe is another
    Windows window as well, just like the offending select element, with the
    same sort of problems.

    --
    Cheers
    Richard.
    rf, Dec 9, 2004
    #6
  7. news.west.cox.net

    Jan Faerber Guest

    (Pete Cresswell) wrote:

    > RE/
    >>http://southernpine.com/joinlocator.shtml

    >
    > I should add that, as a user, I *don't* care for the clickability of the
    > parent topics....In fact I find this confusing in many web pages: more
    > than one way to get to the same place.


    I don't have any problem with that. Quite the contrary:
    It is more the structure that is missing when you have clicked on a child
    topic which has grandchildren aswell.

    e.g.:
    [parent] - [child] - [grandchild]
    [International Buyers] - [Metric] - [Sizes ...]

    .... and you click on 'Metric' you come to
    http://southernpine.com/metric.shtml

    Where can you see now what parent topic you chose?

    > In this case, clicking a parent topic just opens up a new page that lists
    > the flyout choices all over again - or is this a fallback position in case
    > the user's PC does not support whatever it is (Java, I guess...) that
    > makes the
    > flyout menus work? If so, I'd think one should check to see if (Java?)
    > is enabled on the user's machine and suppress those
    > flyout-equivalent/duplicate
    > screens. ?


    A clickable submenu [International Buyers] - [Metric] below the pics would
    be fine here.




    --
    Jan

    http://linux.janfaerber.com
    Jan Faerber, Dec 9, 2004
    #7
  8. news.west.cox.net

    SpaceGirl Guest

    rf wrote:
    > SpaceGirl wrote:
    >
    >>rf wrote:

    >
    >
    > [menus under form elements]
    >
    >
    >>>This is a well known problem.

    >
    >
    > <snip>
    >
    >>there's a trick for this; write and empty iframe in your stack of DIVs
    >>used for the menus. Form elements on the container page CANNOT show
    >>through an iframe, however further DIVs can be stacked on top of
    >>iframes. The solution is to have an iframe the same size as your menu
    >>that appears WITH your menu, but at a lower z-index. Works in IE.

    >
    >
    > What a lot of hoops to jump through to fix a problem that should not be
    > there in the first place :)


    It's quite simple tho....


    > Do you have an example where this actually *works*? An iframe is another
    > Windows window as well, just like the offending select element, with the
    > same sort of problems.


    I think there are examples on www.alistapart.com, but basically;

    <div "base" style="z-index:1;width:200;height:200">
    <iframe width="200" height="200" ></iframe>
    </div>
    <div "content" style="z-index:2;width:200;height:200">
    content here
    </div>


    >



    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Dec 9, 2004
    #8
  9. news.west.cox.net

    rf Guest

    SpaceGirl wrote:
    > rf wrote:
    > > SpaceGirl wrote:


    > > What a lot of hoops to jump through to fix a problem that should not be
    > > there in the first place :)

    >
    > It's quite simple tho....


    So if it is quite simple then please post a URL to a simple page that
    exhibits this solution to the OP's problem.

    > I think there are examples on www.alistapart.com, but basically;


    <snip example>

    What does this do? It puts one dive at the top of the page (with an iframe
    in it) and then puts another div under that one. So?

    Anyway I have visited alistapart before. I consider it *not* a place to
    learn modern web techniques. The site sucks.

    I want your example of where an iframe solves the OP's problem.

    --
    Cheers
    Richard.
    rf, Dec 9, 2004
    #9
    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. adjusted

    flyout menu help needed

    adjusted, May 19, 2009, in forum: HTML
    Replies:
    2
    Views:
    451
    Jonathan N. Little
    May 19, 2009
  2. MrPhilHill

    Flyout navigation script help

    MrPhilHill, Aug 19, 2003, in forum: Javascript
    Replies:
    0
    Views:
    90
    MrPhilHill
    Aug 19, 2003
  3. Philip Townsend

    problems with flyout menus and positioning

    Philip Townsend, Sep 30, 2003, in forum: Javascript
    Replies:
    1
    Views:
    114
  4. Todd Cary

    Flyout menus

    Todd Cary, Feb 2, 2005, in forum: Javascript
    Replies:
    1
    Views:
    92
  5. aerotops

    Help with flyout menus

    aerotops, Sep 14, 2006, in forum: Javascript
    Replies:
    0
    Views:
    98
    aerotops
    Sep 14, 2006
Loading...

Share This Page