Enclosing menu in a <Div> with relative position

Poster: navanith
Dated: Saturday November 22 2003 - 0:05:19 GMT

Hi,

If I enclose menu in a <div> tag with position set to relative, when moveover I see gap between menubar and menu list.
I need to enclose menu in <div> tag because of z-index problem.

Paste this code and notice gap between main menu and menu drop down



Any help is appreciated
Thanks in advance
Nav

Poster: Maz
Dated: Saturday November 22 2003 - 12:59:20 GMT

The menu doesn't go in a div, the script should go in the body. Can you post a url to see exactly what you are trying to do.

Regards,
maz

Poster: cmason22
Dated: Monday November 24 2003 - 18:31:00 GMT

i think that the menu just gets confused and pushed the submenu outside of the <div> tag. try nesting a table inside the <div> like this:

<div>
<table>
<tr>
<td>
####MILONIC HERE####
</td>
</tr>
</table>
</div>

it worked for me to solve a similar problem.

happy coding!

Poster: navanith
Dated: Monday November 24 2003 - 19:15:13 GMT

This is the actual problem I am facing. Menu displays under the <Select> box if <select> tag is inside a Div tag with position is set to "relative" and z-index set to something. Try pasting the below code


Thanks in advance
Nav

Poster: kevin3442
Dated: Monday November 24 2003 - 19:58:35 GMT

As far as I know, a menu, as well as any other positioned dhtml element, will display under a select box in some of the older browsers no matter what you do (sometimes, only part of the select shows through, like the drop-down arrow or a scroll bar). Other form elements, such as radio buttons, may exhibit similar behavior. Putting the select box and the menu code inside separate divs, then manipulating the z-indexes will probably not work, at least not in the problematic browsers, because it is not a layering issue. In some browsers, particularly older ones, the select box is a "windowed" element; it is created by the OS rather than the browser. Back when people started putting form elements into html pages, the elements were simply created using the operating system's already-available form objects. In other words, what you see when looking at such a form element was created because of the html code, but not by the html code. Note, for example, that a form element in many browsers takes on the look of those elements as displayed by the OS in other applications, not necessarily as coded by the page designer. Of course, this was all before the advent of styled and positioned elements, so it was never a problem. Now that you can put html elements anywhere you want, it is a problem when your positioned, "windowless" element overlaps with a "windowed" element... hte windowed element always takes precedence and always occupies the top layer. Other windowed elements include various other form elements, embeded objects, plug-ins, active x controls, and iframes. As far as I know, windowled elements will only respond to layering attempts in relation to other windowless elements, if they respond at all. They will not respond in relation to windowless elements, so z-indexes will have no effect. Putting the menu code inside a div will probably lead to other problems, as you describe (I've seen it d so in other situations).

The standard approach to dealing with these sorts of problems is to put the offending element(s) -- i.e., the select box -- inside a div, giv the div an id, and hide the div when the overlapping dtml element (i.e., the menu) appears, then reshow the div when the dhtml element disappears. There are ways to code this behavior. Also, from previous discussions, Milonic plans to add the ability to hide a div when a menu opens. I don't know if that feature is available now or not, but I don't think it is.

Hope that at least explains what's going on and offers some possible directions for solutions. If you are interested in example code to hide divs, let me know.

Kevin