Select menus above flyout menus? help?

  • Thread starter news.west.cox.net
  • Start date
N

news.west.cox.net

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.
 
R

rf

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.
 
S

SpaceGirl

rf said:
news.west.cox.net wrote



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.




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 #
 
P

(Pete Cresswell)

RE/

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. ?
 
R

rf

SpaceGirl said:
rf wrote:

[menus under form elements]

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.
 
J

Jan Faerber

(Pete Cresswell) said:
RE/

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.
 
S

SpaceGirl

rf said:
SpaceGirl said:
rf wrote:


[menus under form elements]



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


--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
 
R

rf

SpaceGirl said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top