PDF file in iframe is overlapping top menu on IE 11

  • I am using iframe to display PDF file for my wordpress portal. This is the iframe code:
    <iframe src="pdf file URL" width="800" height="800"</iframe>

    File displays correctly on Chrome and Firefox browser. But on IE 11 browser, it overlaps on the top navigation menu. Please check this screenshot.

    This issue is only for PDF file.

    This is happening across any WordPress version or theme. Tried on WP v4.9.6 and v5.2.2.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @anilk2812,

    Have you tried with WordPress 5.3? I think the last version improves a lot of things for different browsers. So, it could help ??

    If it’s not the case, you could try with adding some padding to the top of the iframe, and to apply it only when someone is using IE11.

    Here are some articles about how to apply CSS only for IE11:
    https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11

    Hope this helps, let us know! ??

    Thread Starter Anil K

    (@anilk2812)

    Hi @_dorsvenabili ,

    Thank you for your response.
    Issue comes when we scroll the page downward. PDF file displays on top layer hiding the navigation menu. Also, the drop down items of the menu hide behind the pdf file.
    We can add padding and move iframe element down but issue appears again when when we scroll the page downward.

    Thanks for the article about how to apply css only for IE11. I can use it for other issues.

    Thanks,
    Anil

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘PDF file in iframe is overlapping top menu on IE 11’ is closed to new replies.