Tip: Click lines to highlight, hold ctrl/cmd to multi-select

z-index fix for internet explorer (11-Feb @ 15:47)

Fixes the z-index bug in ie6 where so called "windowed" elements (select, object, etc) dont respect z-index in relation to "non-windowed" elements.

www.flickr.com-photos-bjarlestam

Syntax Highlighted Code

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.      // make the specified div a windowed control in IE6
  5.      // this masks an iframe (which is a windowed control) onto the div,
  6.      // turning the div into a windowed control itself
  7.      function makeWindowed(p_div)
  8.      {
  9.         var is_ie6 =
  10.            document.all &&
  11.           (navigator.userAgent.toLowerCase().indexOf("msie 6.") != -1);
  12.         if (is_ie6)
  13.         {
  14.            var html =
  15.               "<iframe style=\"position: absolute; display: block; " +
  16.               "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;" +
  17.               "filter: mask(); background-color: #ffffff; \"></iframe>";
  18.            if (p_div) p_div.innerHTML += html;
  19.            // force refresh of div
  20.            var olddisplay = p_div.style.display;
  21.            p_div.style.display = 'none';
  22.            p_div.style.display = olddisplay;
  23.         };
  24.      }
  25. </script>
  26. </head>
  27. <body>
  28. <div id="test" style="position: absolute; z-index: 2;
  29. top: 50; left: 30; width: 200px; height: 200px;
  30. background-color: red">
  31. &nbsp;
  32. </div>
  33. <select style="position: absolute; z-index: 1; top: 50;">
  34. <option>test</option>
  35. </select>
  36. <a href="javascript:makeWindowed(document.getElementById('test'));">
  37. Make Windowed</a>
  38. </body>
  39. </html>

Plain Code

<html>
<head>
<script type="text/javascript">
     // make the specified div a windowed control in IE6
     // this masks an iframe (which is a windowed control) onto the div,
     // turning the div into a windowed control itself
     function makeWindowed(p_div)
     {
        var is_ie6 =
           document.all && 
           (navigator.userAgent.toLowerCase().indexOf("msie 6.") != -1);
        if (is_ie6)
        {
           var html =
              "<iframe style=\"position: absolute; display: block; " +
              "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;" +
              "filter: mask(); background-color: #ffffff; \"></iframe>";
           if (p_div) p_div.innerHTML += html;
           // force refresh of div
           var olddisplay = p_div.style.display;
           p_div.style.display = 'none';
           p_div.style.display = olddisplay;
        };
     }
</script>
</head>
<body>
<div id="test" style="position: absolute; z-index: 2; 
top: 50; left: 30; width: 200px; height: 200px; 
background-color: red">
&nbsp;
</div>
<select style="position: absolute; z-index: 1; top: 50;">
<option>test</option>
</select>
<a href="javascript:makeWindowed(document.getElementById('test'));">
Make Windowed</a>
</body>
</html>

Codedump Run

Permalink: http://codedumper.com/z-index-fix-for-internet-explorer