iFrame shim under div

Posted on 2006-05-18
Last Modified: 2012-06-22

There is a technique that can be used to overcome the infinite z-index of windowed controls, so that a div with a z-index greater than page level can be seen above the control, and the control does not show through (the classic problem). This fix involves shimming an iFrame under the div (for IE5.5+ only).

So far so good and it works well. Question is, if the control is a select box, this is hidden as it should be, but if the dropdown arrow part is showing outside of the div and then is clicked on, the list shows above the div and iFrame, just as though only the select box itself was hidden, and not the actual drop-down list.

Does anyone know why the rule is broken in this case and have a fix?



Question by:darkhorse0
    LVL 10

    Expert Comment


    Can you provide a simple example or link to an example?

    Author Comment

    Yes, I will modify the msdn example of the windowless iFrame behaviour and post the code (will take some time but please check back and thanks for responding)

    Author Comment


    Run the page below; by default the select control is at 0 zindex, and the iframe at 5. The iframe will appear over the select as expected (even before the iFrame became windowless) but in IE 5.5+ the zindex of the iframe follows both the select and the div zindex rules and so the div can be set to 6 and appear above the iframe, thus hiding the control.

    I moved things about to show what I mean, you can see when you load the page that the iframe is above the select as it should be. Just click on the select arrow to drop it down, you see that the part which drops down is *above* the iframe.

    function setindex()

    function getindexes(){

    <BODY onload="getindexes()">

    <input type="text" value="" id=text1 name=text1 ><p>

    <input type="text" value="" id=text2 name=text2><p>

    <input type="text" value="" id=text3 name=text3><p>
    <input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
    <DIV id=div1 name=div1  style="width:200;height:200;background-color:blue;
    <select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:"
    size=1 >
    <IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:155;position:absolute;
    LVL 3

    Accepted Solution

    hi dear

    i had this problem not long time ago, and there s no direct solution for it.
    so here s what i did:

    i explicitly told the drop down to become hidden when i want smg to be on top of it. In other words, when for example the layer is visible, you have to put a javascript function onLoad or onClick or whatever.. and in this function u put:
    document.getElementbyid("select1").style.visibility = "hidden"

    and then also on the close of the layer or any other action you want you should do the same with:
    document.getElementbyid("select1").style.visibility = "visible"

    if u need more help, tell me


    Author Comment

    Hi zawedikian , thanks for responding

    So you did'nt use an iframe at all to cover the control? Or you did but were not happy with the drop down part still showing?



    LVL 3

    Expert Comment

    hi joe

    no actually i didn't use a frame at all to cover it. if u r using the frame just to cover this control, there s really no need for it. you can just do what i told u: on the action of a control that should come over the drop down, hide it then on the reverse action, show it again.

    and even if you need the frame, try to find a way to use the visibility property because it is the only solution under IE6 or less. but note that i heard that the problem of the z-index is solved for drop downs in the IE7 (that has problems!).


    Author Comment

    Hi zeina,

    Understood, the iframe is needed but I think I can find a way to combine that and the hiding method you suggest. In any case, a complete solution based on iframe is clearly not possible.

    As for IE7, I don't even want to think about that yet :) And the difficulty of installing multiple versions of IE make it impossible to test them like you can with gecko browsers (none of which have this problem in the first place!)

    Thanks for your help,



    Featured Post

    Hire Freelancers to Complete JavaScript Projects

    Source the talented Expert Exchange community
    for top quality work on your JavaScript projects.

    Hire the best. Collaborate easily. Get quality work.

    Join & Write a Comment

    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    729 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

    19 Experts available now in Live!

    Get 1:1 Help Now