Solved

Div overlapping multi-select box

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Responsive Font Size 6 45
HTML <font style="color:red"> 9 51
Mobile apps - web/native or hybrid? 1 64
Clear input text 15 26
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

685 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