Solved

Layer hidden par <select> tag

Posted on 2006-07-10
4
668 Views
Last Modified: 2012-08-14
We have a web page with a layer and <select> tags. The layer is a small window which is supposed to hide the <select> but it does not... How can we make it hide the select ?

So it goes :

<style type="text/css">
#cat_prodiv {position:relative;width:15em;}
#cat_proinput {position:relative;width:100%;height:1.2em;display:block;}
#cat_procontainer {position:relative;bottom:4px;right:4px;border:1px solid #404040;background:#fff;font-size:85%;overflow:hidden;}
#cat_proshadow {position:absolute;width:100%;*width:auto;_width:100%;margin:.3em;z-index:5;background:#a0a0a0;} /* bug 614383 workaround for ie7 */
</style>

<div id="cat_prodiv"><input id="cat_proinput" style="height:18px;width:120px;" type="text" name=zoom2 autocomplete=off>
                    <div id="cat_proshadow"><div id="cat_procontainer">bla bla bla<br>bla bla bla<br>bla bla bla<br>
                        bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br></div></div>
                      </div>
<br><br>
<select><option>hello</select>

and we want to "hello" to be hidden by the "bla bla bla" lines.

Help greatly appreciated.
 
0
Comment
Question by:javilmer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 200 total points
ID: 17075300
The problem is only in IE...
Select element is a "windowed element" (in M$ lingo).
And "windowed element" always display on top on "windowless elements".
http://support.microsoft.com/kb/q177378/
0
 
LVL 2

Expert Comment

by:holly29
ID: 17080657
The comment above is correct, not an answer though.
What's your need for  hiding the <select>?

Do you want to create a combobox with both input and dropdown options?
0

Featured Post

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question