Gabi 0

Hi,

I have a relatively simple page, which shows a large DIV positioned absolutely and anchored to all margins through CSS. With JavaScript code I show a smaller DIV over this large one. Then also with JavaScript I hide back the smaller DIV.

This is all working fine, in all browsers, including IE7.

However, if I put this page into an IFRAME of another page, then, on Internet Explorer 7, when I hide the smaller DIV, the larger DIV also disappears (I can see only it's border as a thin line, just like if the DIV has a height of zero).

Here is the code of the page that sits in the IFRAME:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>  
        <script>
        <!--
        function show() {
            var el = document.getElementById("dbg");
            el.style.display="";
        }

        function hide() {
            var el = document.getElementById("dbg");
            el.style.display="none";
        }
        -->
        </script>
    </head>
    <body>
        <div style="background-color: yellow; border: 1px solid black; 
            position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px;">
            <button onclick="show();">show</button>
        </div>
        <div id="dbg" style="z-index: 10; display: none; position: absolute; 
            top: 100px; left: 100px; width: 320px; height: 200px; background-color: red;">
            <button onclick="hide();">hide</button>
        </div> 
    </body>
</html>

And here is the code of the page that holds the IFRAME:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <div style="position: absolute; top: 50px; left: 50px; width: 640px; height: 480px;">
            <iframe src="inner.html" style="width: 640px; height: 480px;"/>
        </div> 
    </body>
</html>

I really cannot find any explanation for this. From what I've seen on the Internet, it seems that IE7 and IFRAME don't get along too well. Any ideas why this is happening? In all other browsers except IE7 it works fine (didn't test IE6, only IE8).

The only workaround that I found is to make the large DIVs style not use "bottom: 15px; right: 15px;" but rather "width: ...px; height: ...px;", but I can't do this in my case. I need the DIV to automatically adapt to the size of the window or IFRAME.

Thanks, Gabi.

1 answer

0
points

I have absolutely no clue, but what you could try is set position:relative; and try with margin-top -bottom -left -right. also, you could clean the js code up a bit with making a function toggle()

function toggle()
{
  var el = document.getElementById("dbg");
  el.style.display = el.style.display=='none'?'block':'none';
}

this should do the trick. NB: see i used, block, this might also be causing problems, because you set it to ''. maybe ie7 needs the div to be explicitly called a bl;ock lvl element (or at least auto)

Answered over 9 years ago by Menno Geelen