Geek Answers Handbook

HTML div is not at the beginning of the embed object - IE

I have the following HTML

<embed class='pdf_container' src='welcome.pdf' style ='width:100%;height:500px;' ></embed> <div id="show_message" class='message_wrapper' > <div id="message_content"> The requested operation ... </div> </div>

and in CSS

 .message_wrapper{ position:fixed; z-index:1000; height:100px; width:100%; background:red; top:0; left:0; } .pdf_container{ position:absolute; top:0; left:0; z-index:100; }

Actually I want to show #show_message by .pdf_container , and it works well in Firefox, but not in IE , ignoring z-index .

Please help me deal with the problem.

Thanks.

See screenshots:

In IE

In IE 8.9

and in ff

In FIREFOX

+4
source share
2 answers

You will need to set WMODE to Transparent inside the embed tag.

 <embed class='pdf_container' src='welcome.pdf' style ='width:100%;height:500px;' wmode="transparent" ></embed>
-1
source

Try this, you seem to get a solution, like me, and it works on my local system :-) cheerss A little different from your code, but I'm sure you will get it.

http://jsfiddle.net/fRsUv/

 html { height:100% } #container { position:relative; width:100%; } #pdf { width:100%; z-index:1; } #layer_over_pdf { width:200px; z-index:2; } #pdf, #layer_over_pdf { position:absolute; top:0; left:0; } <div id="container"> <div id="pdf"><embed id="pdfEmbed" src="JavaScript_DHTML_Mat_V4.pdf" style="width:500px; height:600px" type="application/pdf"></embed></div> <div id="layer_over_pdf">some content</div> </div>
-1
source

More articles:


All Articles