div tags does not hide select tags then over 1

HelgeD · Dec 6, 2001

Hi,
I came across this problem a couple of times now, and it's time to find help elsewhere, so i post the problem here.
Im been using several tools from the net and all appears to have the same problem, they won't hide a select combobox or listbox when they display over them, it could be a dropdown menu or a tooltip box.
To help you see the problem I made a simple page you can copy&paste from this thread to a new HTML file.

Im not sure where the problem is

1. by HTML definition (the standards)
2. Internet Explorer
3. Me

I hope soneone is able to help on this issue

Best Regards
Helge Damsholt.

*** copy lines from here to end of post ***
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Error with Select tags</title>
<script language="JavaScript1.2">
<!-- Script Begin
function Toggle(e) {
if (document.all["testit"].style.visibility == "visible&quot

{
document.all["testit"].style.visibility = "hidden";
e.value = "Click to Show layer";
}else{
document.all["testit"].style.visibility = "visible";
e.value = "Click to Hide layer";
}}
// Script End -->
</script>
</head>
<body>
<div id="testit" name="TestIT" style="position: absolute; top: 80; left: 20; visibility: hidden; z-index: 1000; height: 300px; width: 400px; background: #0066CC; font-family: sans-serif; font-size: medium; color: #FFFFFF">Is is not possible for me to get this layer on top of select tags<br>does anyone know about this problem ??<br>It's mayme IE ??</div>
<input type="button" name="ChangeLayer" onclick="Toggle(this);" value="Click to Show layer">
<br><br><br>
test Area<br>
<input type="text" size="50" value="This is only a input tag there will be hidden under the displayed layer"><br>
<input type="radio" size="50">This is only a input tag there will be hidden under the displayed layer<br>
<input type="checkbox" size="50">This is only a input tag there will be hidden under the displayed layer<br>
<input type="button" size="50" value="This is only a input tag there will be hidden under the displayed layer" ><br>
<br>This will underneat layer when it's displayed<br>
<select name="test">
<option>Its not possible to hide this under the displayed layer</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select><br><br>
<select name="test" style="z-index:2" multiple size="4">
<option>Its not possible to hide this under the displayed layer even it is indexed</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select>
</body>
</html>

Klae · Dec 6, 2001

How about if you copy this code....
-------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Error with Select tags</title>
<script language="JavaScript1.2">
<!-- Script Begin
function Toggle(e) {
if (document.all["testit"].style.visibility == "visible&quot

{
document.all["testit"].style.visibility = "hidden";
document.all["testdiv"].style.visibility = "visible";
e.value = "Click to Show layer";
}else{
document.all["testit"].style.visibility = "visible";
document.all["testdiv"].style.visibility = "hidden";
e.value = "Click to Hide layer";
}}
// Script End -->
</script>
</head>
<body>
<div id="testit" name="TestIT" style="position: absolute; top: 80; left: 20; visibility: hidden; z-index: 1000; height: 300px; width: 400px; background: #0066CC; font-family: sans-serif; font-size: medium; color: #FFFFFF">Is is not possible for me to get this layer on top of select tags<br>does anyone know about this problem ??<br>It's mayme IE ??</div>
<input type="button" name="ChangeLayer" onclick="Toggle(this);" value="Click to Show layer">
<br><br><br>
test Area<br>
<div id="testdiv" style="visibility: visible;">
<input type="text" size="50" value="This is only a input tag there will be hidden under the displayed layer"><br>
<input type="radio" size="50">This is only a input tag there will be hidden under the displayed layer<br>
<input type="checkbox" size="50">This is only a input tag there will be hidden under the displayed layer<br>
<input type="button" size="50" value="This is only a input tag there will be hidden under the displayed layer" ><br>
<br>This will underneat layer when it's displayed<br>
<select name="test">
<option>Its not possible to hide this under the displayed layer</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select><br><br>
<select name="test" style="z-index:2" multiple size="4">
<option>Its not possible to hide this under the displayed layer even it is indexed</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select>
</div>
</body>
</html> Klae

You're only as good as your last answer!

HelgeD · Dec 6, 2001

Klae,
First of all thanks for a wery quick response.

you modification removes everything within testdiv, what im looking for is <select> tags to appear like all the others <input> tags, written text etc....

Im pretty sure this is a bug, it can't be by definition that <select> tags should behave like this, I even tried to but one within another div tag with a lower z-index, also as you see the listbox has a z-index of 2 but its dosen't matter at all.

Best Regards
Helge

nikischwabe · Dec 6, 2001

Hi

I am certain it is a browser thing so I dont see any point in tearing your hair out over it. There is a solution however but it is a bit long winded. put your entire form on a div then hide the div when required and show the other.

Anyway see if this is something like what you want. Needs minor adjustment to work in NS mind you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>hide selects</title>

<SCRIPT type="text/javascript">

</SCRIPT>

</head>
<body>

<FORM action="" method="" name="form1">
<BUTTON type="" onclick="toggleDiv(document.getElementById('div1'),document.getElementById('div2'))">toggle</BUTTON>
</FORM>

<DIV id="div1" style="background-color: #0066cc; visibility:visible; height:100px; width:300px; position:absolute;">
<BR>
<FORM action="" method="" name="form2">
<SELECT name="select1"><OPTION>option1</OPTION><OPTION>option2</OPTION><OPTION>option3</OPTION></SELECT>
</FORM>
<BUTTON type="">whatever</BUTTON>
</DIV>


<DIV id="div2" style="background-color: #0066cc; visibility:hidden; height:100px; width:300px; position:absolute;">
<FORM action="" method="" name="form2">
<SELECT name="select2"><OPTION>option1.2</OPTION><OPTION>option2.2</OPTION><OPTION>option3.2</OPTION></SELECT>
</FORM>
<BUTTON type="">whatever else</BUTTON>
</DIV>

</body>
</html>
Nice one

Klae · Dec 7, 2001

I have had problems identical to yours with drop-down boxes(<SELECT> tags) before. When I had an ever-present menu like the black one on microsoft.com but mine would scroll down when the user scrolled down so it would always be in the top right corner. It had a z-index of something stupid like '1000' BUT when a SELECT tag was in the top right of the window then it would be on-top of my menu no matter what I did. So I agree that controls like drop-down boxes (SELECT tags) are bugged and don't listen to the style sheet in that respect and I had to bodge it so when my menu and a SELECT tag were both trying to be in the top-right corner I had JavaScript that would hide the SELECT tag when there was an issue and then show the SELECT tag whenever a scroll event took the SELECT tag out of the top-right corner.

Basically there is a bug with SELECT tags in browsers and I know only to bodge it with the visibility attribute of style sheets to get round it. Klae

You're only as good as your last answer!

HelgeD · Dec 7, 2001

Thanks to you both,
A few statements indicate a browser problem so i try Microsoft to get there view on z-indexes and select tags

Best Regards
Helge

ianbm · Jan 3, 2002

I found this from microsoft...

http://lists.w3.org/Archives/Public/www-html/1999Dec/0156.html

its still not fixed in IE6

bisht · Jan 3, 2002

Hi Kale,
I'm facing same type of problem with <Div> tag and <Select> tag.

In last mail you wrote that you have code regarding the same problem, could you send me that code so that I can also
hide the SELECT tag when there was an issue to show the SELECT tag whenever a <Div> tag is overlapping.

If anyone has the similar code. I'll be thankful to all of you.

Thanks and Regards,
Rakesh Bisht

twist · Jan 3, 2002

you can get rid of the dropdowns when you show the div over top, thats about the only thing you can do, or maybe place a blank flash movie on top of it or something, they like being on top too.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Error with Select tags</title>
<script language="JavaScript1.2">
<!-- Script Begin
var holderGuts = '';
function Toggle(e) {
if (document.all["testit"].style.visibility == "visible&quot

{
document.all["testit"].style.visibility = "hidden";
document.all.holder.innerHTML = holderGuts;
e.value = "Click to Show layer";
}else{
holderGuts = holder.innerHTML;
holder.innerHTML = ''
document.all["testit"].style.visibility = "visible";
e.value = "Click to Hide layer";
}}
// Script End -->
</script>
</head>
<body>
<div id="testit" name="TestIT" style="position: absolute; top: 80; left: 20; visibility: hidden; z-index: 1000; height: 300px; width: 400px; background: #0066CC; font-family: sans-serif; font-size: medium; color: #FFFFFF">Is is not possible for me to get this layer on top of select tags<br>does anyone know about this problem ??<br>It's mayme IE ??</div>
<input type="button" name="ChangeLayer" onclick="Toggle(this);" value="Click to Show layer">
<div id="holder">
<br><br><br>
test Area<br>
<input type="text" size="50" value="This is only a input tag there will be hidden under the displayed layer"><br>
<input type="radio" size="50">This is only a input tag there will be hidden under the displayed layer<br>
<input type="checkbox" size="50">This is only a input tag there will be hidden under the displayed layer<br>
<input type="button" size="50" value="This is only a input tag there will be hidden under the displayed layer" ><br>
<br>This will underneat layer when it's displayed<br>
<select name="test">
<option>Its not possible to hide this under the displayed layer</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select><br><br>
<select name="test" style="z-index:2" multiple size="4">
<option>Its not possible to hide this under the displayed layer even it is indexed</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select>
</div>
</body>
</html>

HelgeD · Jan 3, 2002

Hi All,
I tried MS on this, and the response is that the only tag left there is windowed is select tag, the same problem existed with iframe until 5.0 but that was changed to windowless in 5.5, so we just have to wait for select tags to be windowless.

By the way i came across a new object (popup)

http://support.microsoft.com/default.aspx?scid=kb;ES-AR;q177378

but haven't tested it i deep yet, I made changes to our little test page to see the result, bad for us that we must change whatever little menucode we find on the web there do div on top af select tags

Code:

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<title>Error with Select tags</title>
<script language=&quot;JavaScript1.2&quot;>
<!-- Script Begin
var pop = window.createPopup();
var oPopup = window.createPopup();
var popShow = false;

function openPopup()
{
    var oPopBody = oPopup.document.body;
    oPopBody.innerHTML = &quot;<DIV style='height: 200px ;width: 400px ; background: #0033CC'>This is a popup.</DIV>&quot;
    oPopup.show(20, 200, 400, 200, document.body);
}

function Toggle(e,left,top,width,height,tekst) {
	if (popShow){
		pop.hide();
		popShow = false;
		e.value = &quot;Click to Show layer&quot;;
	}else{
	    var poptext = pop.document.body;
	    poptext.innerHTML = &quot;<div style='height: &quot; + height + &quot;px; width: &quot; + width + &quot;px; background: #0066CC; font-family: sans-serif; font-size: medium; color: #FFFFFF'>&quot; + tekst + &quot;<div&quot;;
	    pop.show(left, top, width, height, document.body);
		popShow = true;
		e.value = &quot;Click to Hide layer&quot;;
	}
}
//openPopup();
//  Script End -->
</script>
</head>
<body>
<div id=&quot;overDiv&quot; style=&quot;position:absolute; visibility:hidden; z-index:1000;&quot;></div>
<script language=&quot;JavaScript&quot; src=&quot;overlib.js&quot;></script> 
<input type=&quot;button&quot; name=&quot;ChangeLayer&quot; onclick=&quot;Toggle(this,20,80,400,300,'This window is created with the popup object, only possible to make one<br>this is exactly how I want my page and select tags to behave<br><br>It is very difficult to implement this object into exsiting code, so it will be nice if select tag will be windowless in near future');&quot; value=&quot;Click to Show layer&quot;>
<br><br><br>
test Area<br>
<input type=&quot;text&quot; size=&quot;50&quot; value=&quot;This is only a input tag there will be hidden under the displayed layer&quot;><br> 
<input type=&quot;radio&quot; size=&quot;50&quot;>This is only a input tag there will be hidden under the displayed layer<br>
<input type=&quot;checkbox&quot; size=&quot;50&quot;>This is only a input tag there will be hidden under the displayed layer<br> 
<input type=&quot;button&quot; size=&quot;50&quot; value=&quot;This is only a input tag there will be hidden under the displayed layer&quot; ><br> 
<br>This will underneat layer when it's displayed<br>
<select name=&quot;test&quot;>
<option>Its not possible to hide this under the displayed layer</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select><br><br>
<select name=&quot;test&quot; style=&quot;z-index:2&quot; multiple size=&quot;4&quot;>
<option>Its not possible to hide this under the displayed layer even it is indexed</option>
<option>To my knowledge, a select tag ignores z-index'es</option>
</select>
</body>
</html>

Guest_imported · Jan 11, 2002

Hi,

This is a well documented problem with the browser(s), which has be a pain for JavaScript developers for some
time. Take a look at:

http://www.webreference.com/dhtml/diner/seethru/

For an indepth descussion of the problem, and examples of every way in whihc the problem crops up.

Hope this helps,

Ben Taylor (btaylor@littoralis.com),
Technical Manager, Littoralis

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

div tags does not hide select tags then over 1

HelgeD

Programmer

Klae

Programmer

HelgeD

Programmer

nikischwabe

Programmer

Klae

Programmer

HelgeD

Programmer

ianbm

Programmer

bisht

MIS

twist

Programmer

HelgeD

Programmer

Guest_imported

New member

Similar threads

Part and Inventory Search

Sponsor