Enclosing menu in a <Div> with relative position

[navanith]

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

Code: Select all

<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>	
<SCRIPT language=JavaScript src="mmenudom.js" type=text/javascript></SCRIPT>	
<div style="position:relative">
	<SCRIPT language=JavaScript src="menu_data.js" type=text/javascript></SCRIPT>	
</div>

Any help is appreciated
Thanks in advance
Nav

[Maz]

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

[cmason22]

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!

[navanith]

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

Code: Select all

<table>
	<tr>
		<td>
			<div style="z-index:5">
				<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>	
				<SCRIPT language=JavaScript src="mmenudom.js" type=text/javascript></SCRIPT>	
				<SCRIPT language=JavaScript src="menu_data.js" type=text/javascript></SCRIPT>	
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<div style="position:relative;z-index:2">
			<select>
				<option> Drop the menu. Menu will overlap on top of this Select box
			</select>
			</div>
		</td>
	</tr>
</table>

Thanks in advance
Nav

[kevin3442]

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