when I implement the PDFs bol object on my webpage using a simple html object, it displays well in both chrome and Explorer (IE 11). The main problem is that the main navigation submenu (submenu) goes behind the PDF viewer in Explorer (IE). And one more thing - all position attributes and z-index values are beautiful. This is a problem with the object. please show me the solution. I can not create a violin for this. for more details see my code below and launch Internet Explorer in the browser and hover the “Step 2” navigation menu . enter code here
<!DOCTYPE html> <html> <head> <style> body{margin:0 auto;width:500px;} header{height:60px;background:#ccc;} ul#mainnav{list-style:none;display:block;position:relative;z-index:1000;} ul#mainnav li{float:left;width:80px;} ul#mainnav li#step2 ul#submenu{display:none;list-style:none;position:absolute;z-index:99;margin-left:-40px;margin-top:5px;} ul#mainnav li#step2:hover ul#submenu{display:block;} ul#mainnav li#step2 ul#submenu li{float:none;height:30px;border-bottom:1px solid #fff;background:#000;color:#fff;display:block;} </style> </head> <body> <header> <ul id="mainnav"> <li>step1</li> <li id="step2">step2 <ul id="submenu"> <li>step2 1</li> <li>step2 2</li> <li>step2 3</li> <li>step2 4</li> </ul> </li> <li>step3</li> <li>step4</li> <li>step5</li> <li style="clear:both;"></li> </ul> </header> <div style="width:300px;height:400px;position:relative;border:2px sild #fff;float:left;"> <object data="http://www.pdf995.com/samples/pdf.pdf" style="width:94%;height:94%;position:absolute;z-index:0;padding:5px;" type="application/pdf" wmode="transparent" > <param name="wMode" value="transparent"/> </object> </div> </body> </html>
In Internet Explorer, click the Allow blocked content button, then you can see the PDF in Explorer.
This does not duplicate the question. I do not want to use any iframe and embed elements. Through the object I need it. Please suggest me.
html html5 internet-explorer css3
Rayudu
source share