ansaurus

Question

Dropdown controls get higher precedence in visibility when overlapped by any other control on page.

Answer 1

+1 A:

The usual fix for this is to place an iframe behind your menu bar. The iframe is one of the few elements that has priority over a drop down list in older version of IE. The iframe should obscure the drop down list and you can pop your menu over the top of it.

It isn't a nice solution, but this is the technique I have used many times to deal with this IE specific problem.

UPDATE

Here is a quick example of an iframe shim using JavaScript...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <title>Example</title>
    <style>
        #overthetop {
            position: absolute;
            top: 5px;
            left: 5px;
            background-color: Yellow;
            z-index: 1000;
        }


        #myiframe {
            border: none;
        }
    </style>
</head>
<body>
    <div id="iframeshim">
        <iframe src="about:blank" id="myiframe"></iframe>
    </div>
    <div id="overthetop">
        <p>Some</p>
        <p>Content</p>
        <p>Here</p>
    </div>
    <select name="test"><option value="test">Test</option></select>

    <script type="text/javascript">
        var overTheTop = document.getElementById("overthetop");
        var iframeShim = document.getElementById("iframeshim");
        var myIframe = document.getElementById("myiframe");

        var w = overTheTop.offsetWidth;
        var h = overTheTop.offsetHeight;
        var t = overTheTop.top;
        var l = overTheTop.left;

        iframeShim.style.display = "block";
        iframeShim.style.position = "absolute";
        iframeShim.style.top = t + "px";
        iframeShim.style.left = l + "px";
        iframeShim.style.width = w + "px";
        iframeShim.style.height = h + "px";
        iframeShim.style.zindex = "900";

        myIframe.style.width = w + "px";
        myIframe.style.height = h + "px";

        overTheTop.style.zIndex = "1000";


    </script>
</body>
</html>

Sohnee 2010-10-12 06:57:04

please send me how to use iframe in master-content page context.

neo 2010-10-12 07:04:35

till now i hanven't use iframe

neo 2010-10-12 07:04:52

Example added... it is quite a verbose example, but it should demonstrate the fix - try it in the IE version you have the problem in!

Sohnee 2010-10-12 12:29:18

ansaurus

tags:

views:

answers:

Dropdown controls get higher precedence in visibility when overlapped by any other control on page.

related questions