[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Div overlapping multi-select box

Posted on 2006-10-20
7
Medium Priority
?
1,482 Views
Last Modified: 2012-05-05
I've been having a very hard time in IE6 with a DIV over lapping a multiselect box.  I've tried changing Z-indexes, I've tried many options, but for some reason in IE6 the multi-select box always appears above the div I'm creating.  

This is not a problem in IE7 or Mozilla/Firefox, if only I could code specifically for those versions.  Below is a very basic sample of the problem.  If you view it in IE6, the select box will be super-imposed over the data of the <div>.  

Is there an easy way to set the select box down in the "zorder"?

Any help would be appreciated.  Thanks,

<html>
  <head>
    <title>Test Div over Select</title>
    <style>
      .ac_menu
      {
       border:1px solid black
      }
      .ac_normal
      {
       background-color:#ffffff;
       cursor:pointer;
      }
    </style>
  </head>
  <body>
    <div class="ac_menu" style="visibility: visible; position: absolute; z-index: 1; ">
      <div class="ac_normal">
        simple
      </div>    
      <div class="ac_normal">
        simple text
      </div>    
      <div class="ac_normal">
        simple text to
      </div>    
      <div class="ac_normal">
        simple text to cover a
      </div>    
      <div class="ac_normal">
        simple text to cover a select
      </div>    
      <div class="ac_normal">
        simple text to cover a select box
      </div>    
    </div>
    <select id="testSelect" size="5" multiple="yes">
      <option value="1">test 1</option>
      <option value="2">test 2</option>
      <option value="3">test 3</option>
      <option value="4">test 4</option>
      <option value="5">test 5</option>
    </select>
  </body>
</html>
0
Comment
Question by:skacore
  • 3
5 Comments
 
LVL 2

Accepted Solution

by:
harshgrover earned 1000 total points
ID: 17776257
select boxes can  be quite a pain in the IE versions :)...i have this following link memorized to resolve this issue :)

http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/select-tag-overlap-in-ie-part-ii
0
 
LVL 17

Expert Comment

by:gops1
ID: 17786219
Try out this code. Since I too have IE 7 am not able to reproduce your problem. Let me know if this works for you:

<html>
      <head>
            <title>Test Div over Select</title>
            <style>
                  .ac_menu
                  {
                  border:1px solid black
                  }
                  .ac_normal
                  {
                  background-color:#ffffff;
                  cursor:pointer;
                  }
            </style>

            <script language="">
                  function loadFrame(){
                        var DivRef=document.getElementById('ac_menu1');
                        var IfrRef=document.getElementById('DivShim');
                        IfrRef.style.position="absolute";
                        IfrRef.style.width=DivRef.offsetWidth;
                        IfrRef.style.height=DivRef.offsetHeight;
                        IfrRef.style.top=DivRef.style.top;
                        IfrRef.style.left=DivRef.style.left;
                        IfrRef.style.zIndex=DivRef.style.zIndex - 1;
                        IfrRef.style.display="";
                  }
            </script>
      </head>
      <body onload="loadFrame();">
            <div id="ac_menu1" class="ac_menu" style="visibility: visible; position: absolute; z-index: 100; ">
                  <div class="ac_normal">
                  simple
                  </div>
                  <div class="ac_normal">
                  simple text
                  </div>
                  <div class="ac_normal">
                  simple text to
                  </div>
                  <div class="ac_normal">
                  simple text to cover a
                  </div>
                  <div class="ac_normal">
                  simple text to cover a select
                  </div>
                  <div class="ac_normal">
                  simple text to cover a select box
                  </div>
            </div>

            <select id="testSelect" size="5" multiple="yes">
                  <option value="1">test 1</option>
                  <option value="2">test 2</option>
                  <option value="3">test 3</option>
                  <option value="4">test 4</option>
                  <option value="5">test 5</option>
            </select>
            <iframe style="display:none;" id="DivShim" style="position: absolute;" frameborder="0" border="0">sdsdsds</iframe>
      </body>
</html>
0
 
LVL 17

Assisted Solution

by:gops1
gops1 earned 1000 total points
ID: 17787155
skacore there is a small change. Ignore the previous and try out this code:

<html>
     <head>
          <title>Test Div over Select</title>
               <style>
                    .ac_menu
                    {
                    border:1px solid black
                    }
                    .ac_normal
                    {
                    background-color:#ffffff;
                    cursor:pointer;
                    }
               </style>
               <script language="">
                    function loadFrame(){
                         var DivRef=document.getElementById('ac_menu1');
                         var IfrRef=document.getElementById('DivShim');
                         IfrRef.style.position="absolute";
                         IfrRef.style.width=DivRef.offsetWidth;
                         IfrRef.style.height=DivRef.offsetHeight;
                         IfrRef.style.top=DivRef.style.top;
                         IfrRef.style.left=DivRef.style.left;
                         IfrRef.style.zIndex=DivRef.style.zIndex - 1;
                         IfrRef.style.display="";
                    }
          </script>
     </head>
<body onload="loadFrame();">
     <iframe id="DivShim" style="display:none;position: absolute;" frameborder="0" border="0"></iframe>
     <div id="ac_menu1" class="ac_menu" style="visibility: visible; position: absolute; z-index: 100; ">
          <div class="ac_normal">
          simple
          </div>
          <div class="ac_normal">
          simple text
          </div>
          <div class="ac_normal">
          simple text to
          </div>
          <div class="ac_normal">
          simple text to cover a
          </div>
          <div class="ac_normal">
          simple text to cover a select
          </div>
          <div class="ac_normal">
          simple text to cover a select box
          </div>
     </div>
     <select id="testSelect" size="5" multiple="yes">
          <option value="1">test 1</option>
          <option value="2">test 2</option>
          <option value="3">test 3</option>
          <option value="4">test 4</option>
          <option value="5">test 5</option>
     </select>
</body>
</html>
0
 
LVL 1

Author Comment

by:skacore
ID: 17789054
I appreciate this advice, but my example was far more "simple" than my actual problem.  In my application, I am making an AJAX call to the database, and dynamically creating the "div" elements based on the returns.  Thus, the onload on the body would not be able to initialize, because the ac_menu does not exist onload.

Is there any other way to mask the "multi-select" box?
0
 
LVL 17

Expert Comment

by:gops1
ID: 17789153
But my solution was specific to your question "Div overlapping multi-select box"

And you dont necessarily have to call on load of the body. You can call this even on a click or after you get response from Ajax call.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

640 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