PDA

Click to See Complete Forum and Search --> : layers don't cover selects

utahsaint
12-03-2002, 09:30 AM
Help I have a layer that is hidden when it showes and there is a select under it the select box showes through the layer. I would share the code but its really scary because its a whole menu that I wrote with cookies and all. This is the only real issue I ran into. Whats odd is that the z-index and disable do nothing. This is in an IE enviornement. Please help.:confused:
gil davis
12-03-2002, 10:06 AM
Forms are windowed objects. They have visual priority over other HTML. They do not react to changing their z-index property.

Basically, you have three choices: 1) move the form, 2) move the menu, or 3) hide the form while the menu is active.
Paul O'B
12-03-2002, 10:11 AM
Hi,

The select is a window element, all windowed elements paint themselves on top of all windowless elements by design. The best way to workaround this issue of windowed elements drawing on top of windowless elements is to hide the select element through script.

i.e. put the select in a layer and then you can set the layer to visible or hidden as you require.

Hope this helps.

Paul
utahsaint
12-03-2002, 10:53 AM
Now if I could remember how to loop through all the div elements without knowing there names.

I like the idea of just putting into a layer and hidding it. Probably because I already have some code that does that. Its just odd that text boxes and everything else works fine but not selects. This almost seems like a bug to me.
AdamGundry
12-03-2002, 01:49 PM
Webreference did an article about this problem some time ago. You can find it here (http://www.webreference.com/dhtml/diner/seethru/indexNEW.html).

Adam
Stefan
12-04-2002, 05:17 AM
Originally posted by gil davis
[B]Forms are windowed objects. They have visual priority over other HTML. They do not react to changing their z-index property.

I must say that that sounds much more like an implementation thing in browsers then something actually in the HTML or CSS specs.

If you read the CSS spec one finds that z-index "Applies to: positioned elements"

It does not make any exception for <form> or any other element in HTML.

In short this is not how it should be, never the less it's a common bug.
The reason I point this out is as long as webdevelopers simply accept this behaviour, the browser manufacturers wont bother to fix it. Sometimes they need a little motivation (like a kick in the butt) to fix things :D
gil davis
12-04-2002, 05:56 AM
z-index "Applies to: positioned elements"
Maybe that's the answer then. I've never tried to declare a form's "position" attribute (that would really drive NS 4.x nuts!).
Stefan
12-04-2002, 07:30 AM
Originally posted by gil davis
Maybe that's the answer then. I've never tried to declare a form's "position" attribute (that would really drive NS 4.x nuts!).

Well, normally <form> resides in the normal flow of a page and z-index on eg the popup menu should place it above the <form>.

However it is possible that the IE bugs are possible to work around by positiong the form.

1 thing that is notable though is that Mozilla has almost no problems at all on that testpage Andm linked to.

The only problems are with
* scollbars on select
* <embed> - which is proprietary crap code
* <applet> - deprecated HTML

<object> which is the proper tag you should use instead of crap like <embed> and <applet> seems to work just fine with z-index (not tested with Flash or JAVA or similar though).

Try eg this testcode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>
</head>
<body>

<object type="text/html" data="test.html" style="width:200px; height:200px;"></object>

<div style="width:100px; height:100px; position:absolute; top:50px; left:50px; background:green;">
</div>

</body>
</html>

In short, good browser implementations don't have to have any problems with z-indexing things properly.
Z-index not working is due to bugs in browsers.
mojavelinux
12-04-2002, 11:30 AM
If you would like to get code that detects select boxes automatically for the different browsers (since mozilla only has a problem with the scrollbar itself, opera 7 has no problems at all and IE must hide the whole select box)...check out my DOM Tooltip code.

You can see a demo on the following page:

http://mojavelinux.com/cooker/demos/domTT/example6.html

The project page is at

http://mojavelinux.com/forum/viewtopic?t=127
utahsaint
12-04-2002, 02:46 PM
I was thinking of just looping through div tags with a prefix of hide in the id. Then just hide that field whenever a flyout appears. I was going to use this approach because we are removing all java applets and the only other thing that shows up are those pesky selects over layers in IE 6.

Then I saw some really cool code. Care to share?
Zach Elfers
12-04-2002, 02:49 PM
Thanks too! I also experience that problem.
mojavelinux
12-04-2002, 03:40 PM
Saw some really cool code. Care to share?

But of course, the library is open source...just go get it and check out the source code. It is VERY organized source code and should be easy to follow. If it is not, post the question on the forum from the project page.
utahsaint
12-04-2002, 03:58 PM
I did find the code after searching quite a bit. You might as a put a link somewhere toward the top of your page for the download. Thanks a lot though for your code. I'll look through it when I get a chance.
utahsaint
12-12-2002, 10:08 AM
I decided it would be faster to just hide all selects on all forms. Here is the code I used. Yes its fast and somewhat messy but I already have 100's of lines of code for my menu and decided not to add tons more. This seems to work very quickly.

// This toggles the selects
function clearSelects(which){
for(x=0;x<document.forms.length;x++){
for(i=0;i<document.forms[x].length;i++){
var tempobj=document.forms[x].elements[i];
if (tempobj.type.substring(0,6) == "select"){
if(which == "hide")
tempobj.style.visibility = "hidden";
else
tempobj.style.visibility = "visible";
}
}
}
}
mojavelinux
12-12-2002, 11:00 AM
The problem with just mererly hidding all the selects is two fold. We run a large web application and when you hide every select box on the page because some little tiny layer popups up on a remote part of the page, it is extremely distracting to the user and makes the page look aweful. Secondly, mozilla requires that you hide only the scrollbar on form elements, which again is distracting when you hide the whole element just for that little problem. Finally, there are many other things on the page that can potentially cause problems, like flash animations, etc...and the select detection allows for a smaller portion of your page to be disrupted. Support for these elements can easily be added to the code I have written.
utahsaint
12-12-2002, 05:07 PM
We have smaller web application with not as many selects. The layer that is covering things is the menu so its not much of a distraction to the user if things are removed from the form. Actually it draws attention more to the menu so its not bad at all.
Stefan
12-29-2002, 03:15 AM
Just though I add a link to this thread in Bugzilla that exaplains how to make flash adhere to z-index using the latest beta flash player-plugins, both in Gecko and IE

http://bugzilla.mozilla.org/show_bug.cgi?id=181138

Thus scratch another buggy implementation of the list of things not adhering to z-index :)