views:

20

answers:

0

Hi All,

I've encountered a very interesting issue with IE + iframes + invalid urls + floating divs.

I have a floating div (well not floating with css 'float' but floating as in a higher z-index). This floating div shows over the top of the iframe. However when we try to load an invalid url in the iframe then the iframe gets shown ontop of the div.

I think the best way to explain is with an example:

<html>
    <head>
        <style>
#floater {
    z-index:3;
    position:absolute;
    left:550px;
    top:100px;     
    width:477px;
    border:solid 3px blue;
}
        </style>
    </head>
    <body>
        <div id='container' style='position:relative;'>
            <!-- Change to valid url to see how this should work -->
            <iframe src='http://www.google.invalid' width='600px' height='600px'></iframe>
            <div id='floater'>FLOATER</div>
        </div>
    </body>
</html>

Has anyone ever encountered this piece of IE magic before? Any suggestions? Thanks All

Guido