By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,823 Members | 730 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,823 IT Pros & Developers. It's quick & easy.

IFRAME z-index bug with MHT files as src

P: n/a
I understand that as of IE5.5 iframes respect the z-index style
property. However I have noticed some odd behaviour when the iframe's
src is set to an MHT web archive instead of an HTML file.

For example: I have a DIV containing an IFRAME and an IMG, whose
z-index is 1. I have a second, identical DIV except this one's z-index
is set to 0. I would expect the first DIV (including the IFRAME and
IMG) two be rendered above the second DIV. When the src of the IFRAMEs
is an HTML page, this is true.

However if I use MHT files as the src of the IFRAMEs, the second DIV's
IFRAME (z-index: 0) appears above the first DIV's IMG (z-index: 1),
but not above the other IFRAME.

I assume this is because there are in face two z-order worlds. One for
windowed elements (e.g. IFRAMEs), and one for windowless elements
(e.g. IMGs). But why the different behaviour between HTML/MHT files?

Here is a screenshot using Win2k/IE6: http://tinypic.com/368zm

And here is the code I used:
<html>
<body>
<div style="position: absolute; z-index:1; left: 10; top: 10; width:
180; height: 80">
<iframe width="100" height="80" src="red.html"
scrolling="no"></iframe>
<img src="images/doll2.jpg" width="60" height="80">
</div>
<div style="position: absolute; z-index:0; left: 30; top: 70; width:
180; height: 80">
<iframe width="100" height="80" src="green.html"
scrolling="no"></iframe>
<img src="images/xltronic-avatar.jpg" width="60" height="80">
</div>
<div style="position: absolute; z-index:1; left: 10; top: 200; width:
180; height: 80">
<iframe width="100" height="80" src="red.mht"
scrolling="no"></iframe>
<img src="images/doll2.jpg" width="60" height="80">
</div>
<div style="position: absolute; z-index:0; left: 30; top: 260; width:
180; height: 80">
<iframe width="100" height="80" src="green.mht"
scrolling="no"></iframe>
<img src="images/xltronic-avatar.jpg" width="60" height="80">
</div>
</body>
</html>
Jul 23 '05 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.