Mht file rendered inside a iframe overlaps other contents

2010年1月30日上午 09:09

0

Hi,

When a mht file is rendered inside a iframe, the iframe overlaps all the other contents i.e. if i have a div positioned on top of an iframe, the div is never visible. Tried with large value for z-index on the div, still nothing seems to work. The HTML snippet is below:

<iframe src="myContent.mht" name="myFrame" style="position: absolute; z-index: 10; top: 10px;"></iframe>

<div style="border: 1px solid blue; position: absolute; left: 0; top: 20px; z-index: 100">hello world</div>

The goal is to have the div overlap the iframe.

I've tried:

1. positioning the iframe with different z-index

2. instead of rendering mht, tried rendering html file. Then the iframe doesn't overlap and honors the z-index value given

3. tried rendering this on opera, firefox (with the mht addon). There the z-index is honored and the div can overlap the iframe

Any ideas on how to solve this problem?? Is this a bug in IE??
- 回覆
- 引述

所有回覆

2010年1月30日上午 10:11

0

The only thing that can overlap such an iframe is another iframe.

Also, its only the content of the iframe i.e. the mht file that stands out and disagrees to be overlapped by other elements. The iframe hosting the mht itself can be overlapped (this can be checked using nested iframes).

But having another iframe just for overlapping purpose doesn't seem good and makes it cumbersome to write scripts. Are there other solutions??
- 回覆
- 引述
2012年3月8日下午 08:08

0
I am having the same problem. I have an iframe that's showing an MHT file. Above it is a dynamic menu with DIVs that are absolutely positioned. When the menu DIVs are shown (due to a mouse hover event), the DIV menu is overlapped by the iframe (not what I want). This seems to happen no matter what I do with the z-index. I followed the advice on this page just in case this is the IE z-index problem, but that didn't help. I found a few other pages with people mentioning this problem:

http://www.vistaheads.com/forums/microsoft-public-internetexplorer-general/290692-rendering-divs-top-iframe-when-src-mht.html

http://networking.itags.org/internet-explorer/30350/

I'm using IE9 on Win7 64-bit. Is there a workaround for this?

Steven
- 已編輯 Steven Borkman 2012年3月8日下午 08:09
- 已編輯 Steven Borkman 2012年3月8日下午 08:11
- 已編輯 Steven Borkman 2012年3月8日下午 08:12
- 回覆
- 引述
2012年3月8日下午 08:35

0

@Steven

please supply a link to your website or a mashup for us to debug.

otherwise have you validated and corrected the markup of both your container page. Outcomes may differ because of markup errors.

<iframe> elements overflow behaviour vary depending on the DocumentMode that your page renders in.

To save confusion, it helps if you start your own question and refer to any similar questions/answers in your own question.

Regards.
Rob^_^
- 回覆
- 引述

2012年3月8日下午 08:43

Please try this:

<html>
<head>
<title>z-Index Problem</title>
</head>
<body>

	<div style="position:absolute; z-index:10" >
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
	</div>

<br/>
<br/>
<br/>
<br/>
<br/>

<table style="z-index:0">

<tr>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" />
	</td>
</tr></table>

</body>
</html>

Thanks,

Steven

已編輯 Steven Borkman 2012年3月8日下午 08:54

2012年3月8日下午 08:50

0

Here's how it renders on my computer. Notice that the MHT files are on top, and the HTML files are below the DIVs. I want to get the MHT files to appear below the DIV, just like the HTML files.

Steven
- 回覆
- 引述

2012年3月8日下午 09:34

<!doctype html>
<html>
<head>
<title>Beginner web developer Problem</title>
</head>
<body>

	<div>
		<p>The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.</p>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
	</div>

<br/>

<table style="with:100%">

<tr>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" />
	</td>
</tr></table>

</body>
</html>

Rob^_^i

DO NOT HIJACK OTHERS QUESTIONS... TO SAVE CONFUSION START YOUR OWN QUESTION AND REFER TO SIMILAR ANSWERS IN OTHER THREADS.

已編輯 doctoroftypeMVP 2012年3月8日下午 09:37
已提議為解答 doctoroftypeMVP 2012年3月8日下午 09:37

2012年3月8日下午 10:09

I see there is some confusion. That does not answer the original question because you removed position:absolute. That was the whole point of the question. If I use position:absolute, I have overlapping elements (div and iframe). In that case, iframes with MHT files are always on top of everything else. In fact, when I add doctype, it's even worse...

<!DOCTYPE html>
<html>
<head>
<title>z-Index Problem</title>
</head>
<body>

	<div style="position:absolute; z-index:10" >
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
	</div>

<br/>
<br/>
<br/>
<br/>
<br/>

<table style="z-index:0">

<tr>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" />
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" />
	</td>
</tr></table>

</body>
</html>

Renders like this:

So 3 of the 4 iframes don't even show up. Where did they go? Let's have a look at the debug view in IE...

What's this? There's only 1 <td> in the row? They disappeared!

So I changed the iframe tags so they have a separate closing tag </iframe>:

<!DOCTYPE html>
<html>
<head>
<title>z-Index Problem</title>
</head>
<body>

	<div style="position:absolute; z-index:10" >
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
	</div>

<br/>
<br/>
<br/>
<br/>
<br/>

<table style="z-index:0">

<tr>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" ></iframe>
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" ></iframe>
	</td>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" ></iframe>
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" ></iframe>
	</td>
</tr></table>

</body>
</html>

That at least shows the iframes again.

已編輯 Steven Borkman 2012年3月8日下午 10:10 clean up

2012年3月8日下午 10:09

0

That renders the same as without the doctype:

So we're no closer to a solution.

Steven
- 回覆
- 引述

2012年3月9日上午 03:04

Please start your own questions...

Here is your answer

<!DOCTYPE html>
<html>
<head>
<title>Idiot Problem</title>
</head>
<body>

	<div>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
	</div>
<br/>

<table>

<tr>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" ></iframe>
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" ></iframe>
	</td>
	<td>
		<iframe src="http://www.praxair.com/" style="width:100px; height:100px" ></iframe>
	</td>
	<td>
		<iframe src="http://alordofchaos.com/Documents/944_owners_manual.mht" style="width:100px; height:100px" ></iframe>
	</td>
</tr></table>

</body>
</html>

hint:absolute positioning is relative to the body element. by default div elements are display:block

block level elements by default are 100% wide and sit one on top of the other....like a tower of building blocks except from the top down.

so the natural document flow positions block level elements (div, table) one on top of the other

PLEASE START YOUR OWN QUESTIONS. PROVIDE A WEB LINK TO YOUR WEBSITE OR MASHUP.

Rob^_^

2012年3月12日下午 01:22

0

Hi Rob,
While I appreciate your enthusiasm and your HTML wisdom, I think you missed the point of this thread. Karunasagark's original post says...

The goal is to have the div overlap the iframe.

That is also my goal. Karunasagark's post demonstrated (with code) that it is difficult to get a div to overlap an iframe when the iframe has an MHT file as it's source (src). My code example was meant to demonstrate that IE treats iframes holding MHT files differently than iframes with more traditional HTML content. This may be a bug. In any case, a work-around would be most welcome.

Thanks,

Steven
- 回覆
- 引述

2012年3月12日下午 09:37

I just found a partial work-around. There are a few limitations though:

1. The MHT file must exist in the same domain as the outer HTML page (with the iframe). This limitation is due to the browser's restriction on cross-domain scripting.

2. Pictures and other fancy embedded objects may not render properly.

Here's the code:

<!DOCTYPE html>
<html>
<head>
	<title>z-Index Problem</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
</head>
<body>

	<div style="position:absolute; z-index:10" >
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
		The quick brown dog jumped over the lazy fox. The quick brown dog jumped over the lazy fox.<br/>
	</div>

<br/>
<br/>
<br/>


<table style="z-index:0">

<tr>
	<td>
		<iframe style="width:100px; height:100px" id="iframe1" ></iframe>
	</td>
	<td>
		<iframe src="mht.mht" style="width:100px; height:100px" id="iframe2" /></iframe>
	</td>
	<td>
		<div id="JustADiv" />
	</td>
</tr></table>

<button onClick="go()">Go</Button>

<script type="text/javascript" >


	function copyContents(source, destinationDoc, destinationNode) {
		$(destinationNode).empty();
		for (var i = 0; i < source.childNodes.length; i++){
		
			var theCopy = destinationDoc.importNode(source.childNodes[i], true);
			destinationNode.appendChild(theCopy);
		
		}
		
	}
	
	function go() {
	
		copyContents(iframe2.document.body, document, JustADiv);
		copyContents(iframe2.document.body, iframe1.document, iframe1.document.body);
	
	}
	
</script>


</body>
</html>

The idea behind the work around is that the contents of the MHT file are copied to a different container that behaves better (with respect to z-index). In this example, I copy the contents of the MHT file to both another iframe and a div. If this solution were to be put into practice, the "go" function would be called by the MHT's onLoad event handler, and the iframe with the original MHT would be hidden with CSS.

Here's how it looks when I run it on my computer:

Before clicking Go:

After clicking Go:

As you can see, the picture of the swirling circle did not render in either the iframe or the div when copied, but the text and text formatting did copy properly.

If anyone wants to try this example, you'll have to make your own MHT file (I used MS Word).

Unfortunately for me, I do need images to render properly, so this work around isn't sufficient for me, but hopefully someone can benefit from this.

Steven

已編輯 Steven Borkman 2012年3月12日下午 09:38
已編輯 Steven Borkman 2012年3月12日下午 09:40

2012年3月12日下午 11:04

0

................who would use such a design pattern on a public web site Steven...

Please start your own questions....do not hijack others questions...
Rob^_^
- 回覆
- 引述