Solved

Div overlapping multi-select box

Posted on 2006-10-20
7
1,417 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

919 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

17 Experts available now in Live!

Get 1:1 Help Now