472,953 Members | 1,679 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,953 software developers and data experts.

position absolute does not go above a dropdown (<select>...)

I'm using the code below to display a menu that opens when the mouse
goes over the main menu item (try it in your browser to understand the

It uses "position:absolute" and a switch between "display='none'" and

However the problem is that
- in Internet Explorer 6 the dropdown (<select>...) always hides the
- in Mozilla the menu is hidden initially but after clicking on the
text "Select" it isn't hidden.

How does that come and how can I overcome it?
I want the menu to be above the other stuff when it comes up.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Menu Example</title>
<form method="get" action="target.jsp" name="myForm">
<TABLE id="acGeneralMainMenuItem" border="1" rules="none"
cellspacing="0" bordercolor="blue">
<TR class="tableMenuRow">
<TD NOWRAP ONMOUSEOVER="showSubmenu('acGeneralSubmenu',this,' acGeneralMainMenuItem');"
&nbsp;General menu&nbsp;<br>
<TABLE id="acGeneralSubmenu"
border="1" rules="none" cellspacing="0" bordercolor="blue"
style="display:none; position:absolute;">
<TR class="tableMenuRow">
<TD NOWRAP id="generalMenuItem0" onclick=
"document.getElementsByTagName('form')[0].actionSelected.value='f158';document.getElementsB yTagName('form')[0].submit()"

ONMOUSEOVER="highlightMenuItem('generalMenuItem0') ;"

ONMOUSEOUT="lowlightMenuItem('generalMenuItem0');" >
&nbsp;General item 1&nbsp;
<TR class="tableMenuRow">
<TD NOWRAP id="generalMenuItem1"
onclick="document.getElementsByTagName('form')[0].actionSelected.value='f159';document.getElementsB yTagName('form')[0].submit()"
ONMOUSEOVER="highlightMenuItem('generalMenuItem1') ;"
ONMOUSEOUT="lowlightMenuItem('generalMenuItem1');" >
&nbsp;General item 2&nbsp;
<TR class="tableMenuRow">
<input type="hidden" name="actionSelected" value="">
<SELECT name="f145">
<OPTION value="*" selected>*</OPTION>
<OPTION value="option1">option1</OPTION>
<OPTION value="option2">option2</OPTION>
<OPTION value="option3">option3</OPTION>
<OPTION value="option4">option4</OPTION>
<OPTION value="option5">option5</OPTION>
<OPTION value="option6">option6</OPTION>
<OPTION value="option7">option7</OPTION>
<OPTION value="option8">option8</OPTION>
<OPTION value="option9">option9</OPTION>

<script type="text/javascript">
// Define a global variable to hold the id of the submenu showed the
last time
var lastSubmenuShown='';

// Define a function to show the submenu at an absolute position
relative to
// the main menu item's position within the parent element.
// The structure of the main menu item and the submenu is:
// <TABLE id="acGeneralMainMenuItem" ...>
// <TR ...>
// <TD NOWRAP ONMOUSEOVER="showSubmenu('acGeneralSubmenu',this,' acGeneralMainMenuItem');"
// ONMOUSEOUT="hideSubMenu('acGeneralSubmenu')">
// General Actions<br>
// <TABLE id="acGeneralSubmenu" style="display:none;
// <TR ...>
// <TD NOWRAP id="..."
// ONCLICK="script to execute action associated with
submenu item"
// ...
// >Action1</TD>
// ...
// Parameters:
// submenuId: the id of the submenu to be shown
// parent: the parent of the main menu item
// mainMenuItemId: the id of the main menu item
function showSubmenu(submenuId,parent,mainMenuItemId)
{ // Hide last submenu
if (lastSubmenuShown!='') hideSubmenu(lastSubmenuShown);

// Initialize yOffset with the height of the main menu item minus 2
var yOffset=document.getElementById(mainMenuItemId).of fsetHeight-2;
var x = 0;
var y = yOffset;
do {
x += parent.offsetLeft;
y += parent.offsetTop;
} while ( parent = parent.offsetParent );

var e = document.getElementById( submenuId );
e.style.left = x + 'px';
e.style.top = y + 'px';
e.style.display = '';
var xMax = document.body.scrollLeft + document.body.clientWidth;
if ( x + e.clientWidth > xMax ) {
e.style.left = ( xMax > e.clientWidth ?
( xMax - e.clientWidth ) : 0 ) + 'px';

if ( y + e.clientHeight > document.body.scrollTop +
document.body.clientHeight ) {
y -= e.clientHeight + ( yOffset ? yOffset : 0 );
e.style.top = ( y > e.clientHeight ? y : 0 ) + 'px';


return false;

// Define a function to hide the submenu
// Parameters:
// submenuId: the id of the submenu to be hidden
function hideSubmenu(submenuId)
{ document.getElementById(submenuId).style.display = 'none';
return false;

// Define a variable to hold the id of the last menu item highlighted
var lastHighlightedMenu='';

// Define a function to highlight a menu item
function highlightMenuItem(menuItemId)
{ if (lastHighlightedMenu!='') lowlightMenuItem(lastHighlightedMenu);
document.getElementById(menuItemId).setAttribute(' bgcolor','#aaaaff','false');

// Define a function to lowlight a menu item
function lowlightMenuItem(menuItemId)
{ document.getElementById(menuItemId).setAttribute(' bgcolor','white','false')
Jul 23 '05 #1
2 6382
Joachim Bauer wrote:
I'm using the code below to display a menu that opens when the mouse
goes over the main menu item (try it in your browser to understand the

It uses "position:absolute" and a switch between "display='none'" and

However the problem is that
- in Internet Explorer 6 the dropdown (<select>...) always hides the
<select> is the only remaining windowed element, it is always positioned over other elements.

<url: http://support.microsoft.com/default...b;en-us;177378 />
- in Mozilla the menu is hidden initially but after clicking on the
text "Select" it isn't hidden.
By default the background-color of the table is probably "transparent". Changing the style definition from:
style="display:none; position:absolute;
style="display:none; position:absolute;background-color:white;"

Seemed to resolve the problem. Also, you probably shouldn't be using setAttribute() and "bgcolor". You'd be far better off changing:

document.getElementById(menuItemId).setAttribute(' bgcolor','white','false')
document.getElementById(menuItemId).style.backgrou ndColor = 'white';

And when setAttribute() does take a 3rd parameter, it is supposed to be an integer, not a string. By passing the string 'false', it
evaluates to true so you're actually passing the opposite value to what you are intending. More on setAttribute() at <url:
http://msdn.microsoft.com/workshop/a...tattribute.asp />, but as I said, you'd be better off using
..style.backgroundColor = ...
How does that come and how can I overcome it?
I want the menu to be above the other stuff when it comes up.

Defining a background-color on the table style seems to resolve the problem in Gecko-based browsers, but in IE, there is no way of
keeping a <select> from appearing on top of every other element.

Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #2
Grant, thanks for your hints. I wrote a workaround for I.E.'s stupid
behaviour to keep <select> above everything else. It is hiding all
<select>s that overlap with my menus. It is done with the function
below which is called in showSubmenu and in hideSubMenu in case of
navigator.appName is "Microsoft Internet Explorer".

// Define a function to show/hide the select controls
// that overlap with the menu
// Parameters:
// actions: may be 'hide' of 'show'
// x: the x position of the menu
// y: the y position of the menu
// width: the width of the menu
// height: the height of the menu
function showHideSelectControls(action,x,y,width,height)
{ var right=x+width-1;
var bottom=y+height-1;

var selectControls=document.getElementsByTagName("sele ct");
for (var i=0; i<selectControls.length; i++)
{ if (action=='hide')
{ var sx=selectControls[i].offsetLeft;
var sy=selectControls[i].offsetTop;

// sx and sy are relative to parent. Compute absolute values
var parent=selectControls[i].offsetParent;
do {
sx += parent.offsetLeft;
sy += parent.offsetTop;
} while ( parent = parent.offsetParent );

var sRight=sx+selectControls[i].offsetWidth-1;
var sBottom=sy+selectControls[i].offsetHeight-1;

if (bottom >= sy
&& (x >= sx && x <= sRight
right >= sx && right <= sRight))
else selectControls[i].style.visibility='visible';
Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: Andrea | last post by:
Hi, I'm trying to emulate part of our client-server application as a web site so customers can use it, and I'm stuck when it comes to re-ordering items in a list. Basically we have a list of...
by: Ang Talunin | last post by:
Hey, I wondering if it's possible to retrieve all the <option>-fields from a <select> when posting a <form> to a php file Example: I've got a form like this: <form action = phpfile.php...
by: Manfred | last post by:
Hi I try to change the border of the <select> Tag to a thin, black line. On IE no reaction! <select style="border:1px solid #000000;background-color:red;"> <option>hallo</option>...
by: Bonge Boo! | last post by:
This has got to be obvious, but I can't make it work. I have a form called with 3 pull down menus. They are linked to a database which generates the values for the <SELECT? Pull-downs. Lets...
by: joiv | last post by:
I'm making a <select></select> with lots of <option></option>. It contains all possible options. Because of the length of the list, I also have an <input type="text">. This is what I wish to do:...
by: Brian Foley | last post by:
Hello, I am used to using the label tag with check boxes and radio buttons in html forms. This allows me to click on the text of the label to activate/deactivate the check box / button, rather...
by: joseph.lindley | last post by:
Forgive me for I am a bit of a web-dev novice - but I'm not doing too bad. I'm currently working with a bit of javascript to dynamically add <option>s into a select box. My code currently works...
by: Man-wai Chang | last post by:
-- iTech Consulting Co., Ltd. Expert of ePOS solutions Website: http://www.itech.com.hk (IE only) Tel: (852)2325 3883 Fax: (852)2325 8288
by: mikek12004 | last post by:
In a form I have 5 elements (e.g. pictures) and I wish for the user to be able to set the order of appearance. For this I have for each picture a select box (names select1 to select5) with "please...
by: Mushico | last post by:
How to calculate date of retirement from date of birth
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.