views:

1636

answers:

2

I'm having a truly... bizzare error in none other than Internet Explorer with a windowing system I'm developing. Basically, the windows are absolutely positioned divs containing ah iFrame that shows their page and resizes along with them. In all other browsers this works fine as intended, but in IE the iFrame doesn't show up... properly.

My original code for spawning a new window looks like this:

function spawnNewWindow(url, title, type)
{
    //Does another window with that particular type already exist?
    //If so, just point it at the new link without actually spawning a new window.
    var cancelSpawn = false;
    if ( $('.windowType_'+type).length )
    {
     //Update the SRC attribute for the iframe contained within the window. This should effectively
     //reload the window too.
     $('.windowType_'+type).children("iframe").attr("src", "/darknova4/"+url);
    } else {


    //First, create the window
    $("body").append(
    "<div class='window'> \
    <div class='resizeArea'></div> \
    <div class='titlebar'>"+title+"</div> \
    <div class='closeWindow'></div> \
    <div class='windowContent newspawn'><iframe src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
    </div>");

    //Move this window to the top of the stack
    $(".newspawn").parent(".window").css("z-index", windowZIndex++);

    //Set the data for this window's type, will be used to prevent copy windows being open later
    $(".newspawn").addClass("windowType_"+type);

    //Set up the window for moving and resizing and other stuff
    setupWindows();

    //Finally, remove the "newspawn" flag from the window, since it has content and we don't need work with it anymore.
    $(".newspawn").removeClass("newspawn");

    }
}

On Internet Explorer, this produces a blank white window, which indicates an invisible iFrame since all of my windowed pages have a black background. I suspected the famous (and still not quite fixed) z-index bug, so I made the following change to play with the stacking order and see if I could find a quick-fix:

$("body").append(
"<div class='window'> \
<div class='resizeArea'></div> \
<div class='titlebar'>"+title+"</div> \
<div class='closeWindow'></div> \
<div class='windowContent newspawn'><iframe style='position: relative;' src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
</div>");

Note the relative position, which should be default for objects, but isn't because of the stacking bug. What happens with this code is, the windows shows up, the iFrame shows up, and all looks good, until you try to use it. I can't explain why, but Mousing Over the iFrame causes it to disappear. I have no code on the site tied to the mouse move event, and no code on the iFrame's pages that would cause it to do anything on mouseover. It's really weird. Does anyone have a clue as to why it might be behaving this way?

If you need to see this behavior for yourself, I've already got a test of the system implemented at www.darknovagames.com, which works fine in firefox, but as mentioned is really bizzare in IE. I can post more code if you think it will help, but this is where I think the error is. Namely, I'd be happy to post the CSS on the parent window and the JavaScript for my mouse events, etc.

Thanks to anyone who can provide some insight on this strange behavior.

+3  A: 

Try removing position: relative from your HTML element inside the iframe. That seems to take care of the problem in IE8 (and in IE8's Compatibility Mode).

Update: fix for height issue

Adding position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; to the iframe fixes the height problem caused by the above position: relative change in IE7 and IE8.

With both fixes in place, the iframe appears to be working correctly in IE7, IE8, and IE8 emulating IE7 on my machine.

Steven Richards
Meaning that in IE8 release, the iFrame shows up as intended? That's very interesting. I wonder why id doesn't work in the IE8 Beta (which is what I have access to) or IE7?
Nicholas Flynt
Yes, it shows up in IE8. Small caveat: the iframe is not showing at full height (it's only about 100-150px high), but no flickering or disappearing. Adding "position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px;" to the iframe fixes the height problem as well in IE8, but eliminates the left margin on the news items within the iframe body. It's really a beautiful chain of dysfunctional behavior.
Steven Richards
I just read this properly: the HTML element *inside* the iframe would be on the page I'm including. It's very interesting that it works that way. Hmm... I wonder if IE would respect the z-index of the HTML element on the iframe'd page and actually use it? There's no way that's the correct behavior, but it would sure be a convenient bug. I'll try it out tomorrow.
Nicholas Flynt
You're not going to believe this. Earlier, I had switched the code for the iFramed pages all over to the Strict doctype. However, rather than delete the Transitional doctype, I commented it out. IE was apparantly ignoring the comment, and incorrectly applying two doctypes at once, which was causing basically all of my issues. Strange error indeed, but it seems to be all fixed now. Many thanks to you for pointing me in the right direction.
Nicholas Flynt
A: 

I think it's somehow related to shim technique issues in MS IE.

IFRAME is windowless element, so z-index of IFRAME may be not in sync with the outline DIV z-index.

Please see http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/q177/3/78.asp&amp;NoWebContent=1 for more info.

Please also look at this.

(can't get MS KB link displayed with the name correctly, probably a bug in SO).

Thevs