• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 449
  • Last Modified:

Strange MSIE bug - Div hovering UNDER MSIE Selection boxes

I'm writing a web app that uses some custom code to provide floating help.  Hover over the icon and a floating help appears.

Works perfectly in most cases, except this one;

http://www.rsow.com/?IMG=d0de69c6d1139874d2ab4f908b029a18


It appears the DIV (which has a z-index of 100) still floats below the selection boxes.  Nothing I do gets them to float above the selection boxes in IE.. Is this due to the selectin boxes always being rendered last?  
Is there a way around this?
0
Palamedes
Asked:
Palamedes
  • 7
  • 5
1 Solution
 
lombardpCommented:
As you can read in these two Answers, form elements have z-index of infinity.

The only workaround, explained in both answers, is to hide the form element when floating element is above.:

http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20091653.html
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21156119.html

0
 
PalamedesAuthor Commented:
Buuut, it works over every other type of form element.. ONLY the Select box actually shows up on top, and only in IE..
0
 
lombardpCommented:
In the first link of my post, Cd& says:
" No.  The form elements have a z-index of infinity and are always on top. If you need to put something over them you can use the visibility attribute set to "hidden" and then re-display using "visible". "

And in the second link of my post, there is a comment from Zyloch that says:
"if you use z-index, you should be able to put it over all form elements EXCEPT the select dropdown box."

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
PalamedesAuthor Commented:
Yeah... I can read...

My point is,  WHY does it work with all form elements but not Select box?  I realize that Zyloch stated that, but you haven't answered the WHY of it.

In my original post I write; "Is this due to the selectin boxes always being rendered last?"  This being the crux of my question.
0
 
lombardpCommented:
Ok, I searched for an answer, and these could be good ones:

http://www.milonic.com/mfa/2004-July/004535.html
http://www.webreference.com/dhtml/diner/seethru/

Basically in IE SELECTs are being rendered by the Operating System, they are "windowed control", so they do not implement z-index correctly.

Also MicroSoft documentation explain this: follow this URL and search for z-index in the text:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/select.asp
0
 
PalamedesAuthor Commented:
Okay after doing some research, I have figured out how to display a layer OVER a select item.  Rather simple actually..

It's a simple matter of having two layers.  One is your content layer named _b1282 in this case, and then a iframe that is called and resized to the content layers size, with a zindex below that of your select box.

        <iframe frameborder="0" id="_iframe_b1282" class="mouseOverIframe"></iframe>
        <div id="_b1282" class="mouseOver">
          <p>This is a popup.</p>
        </div>

It's rather lengthy Javascript to make it all work, but you get the idea.. Have the iframe appear, then have the pop up appear at the same location.  The Iframe will cover the evil select box.

So... it would appear that Cd& and Zyloch are wrong. You can get around this.
0
 
PalamedesAuthor Commented:
Correction:  Have the iframes zindex set below that of your pop up, not of the select box..  
0
 
PalamedesAuthor Commented:

I have tested this in Netscape (pc), Mozilla (pc and mac), Safari(mac), and MSIE(pc).  It works across the board.

I'll create an example page in a bit and post it.
0
 
lombardpCommented:
Palamedes, great solutions!

0
 
PalamedesAuthor Commented:

Here is a example on my home page.

  http://www.rsow.com/?codebits=javascript

I'm not going into actually coding, just theory and the examples do work. (so you could steal the code if ya want.. =)
0
 
PalamedesAuthor Commented:
lombardp, I went ahead and accepted your answer as it does answer why it can't be done..

Even if all those people are wrong.. =)


Thanks.
0
 
lombardpCommented:
This answered question (your solution in particular) will be useful in future questions, since it provides a solution for an old problem.

Thanks to you!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now