Link to home
Start Free TrialLog in
Avatar of skacore
skacore

asked on

Div overlapping multi-select box

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>
ASKER CERTIFIED SOLUTION
Avatar of harshgrover
harshgrover

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of skacore
skacore

ASKER

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?
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.