Solved

Div overlapping multi-select box

Posted on 2006-10-20
7
1,408 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
7 Comments
 
LVL 2

Accepted Solution

by:
harshgrover earned 250 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 250 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article discusses four methods for overlaying images in a container on a web page
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now