Solved

Div overlapping multi-select box

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML Relative path 9 32
Not seen Link button 5 37
Add image to into animation on website template 1 27
Place text over image using CSS 6 42
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

806 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