Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Css / Html / Iframe / Internet Explorer

Pdf In Iframe Overlapping Top Navigation Bar In Internet Explorer

Post a Comment
I am working on asp.net webform with a masterpage. The master page has a top navigation bar and a side bar. beside side bar i called contentplaceholder in which i've put an iframe.

Solution 1:

I think you need to set the iframe wmode to "opaque" 

<iframe ... wmode="opaque"></iframe>

See
z-index does not work in Internet Explorer with pdf in iframe
and
YouTube Video Embedded via iframe Ignoring z-index?

Also, it's hard to tell when you don't show us the styles you have defined.
But it's most-likely an issue with the z-index.

Never mind, seems to be for flash video only.
Just set a div with the height of the navigation bar before the iframe (the blue div).
That way, you shouldn't need the z-index.

<!doctype html>
<html>
<head>
    <title>
        Test
    </title>


    <style type="text/css">


        html, body
        {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }


        .navbar-fixed-top
        {
            position: fixed;
            display: block;
            width: 100%;
            background-color: red;
            height: 50px;
            top: 0px;
        }

        .sidebar
        {
            display: block;
            float: left;
            width: 20%;
            height: 900px;
            background-color: green;
        }

    </style>


</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper" class="mywrapper">

            <!-- Navigation -->
            <!-- Fixed navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
                ......
            </nav>
            <div class="row">
                <div class="col-md-3" style="z-index:2;">
                    <div class="navbar-default sidebar" role="navigation">
                        <div class="sidebar-nav">
                            ...................
                        </div>
                        <!-- /.sidebar-collapse -->
                    </div>
                    <!-- /.navbar-static-side -->
                </div>

                <div class="col-md-9 col-sm-9 col-lg-9" style="background-color: #FFF; z-index:1; background-color: yellow;">
                    <div style="display: block; width: 100%; height: 60px; background-color: blue;">aaaa</div>
                    <iframe src="about:blank" frameborder="0" style="width: 80%; height: 500px; border: none;"></iframe>
                </div>
            </div> <!-- End Row -->
        </div><!-- End Wrapper -->
    </form>
</body>
</html>

You may like these posts

Post a Comment for "Pdf In Iframe Overlapping Top Navigation Bar In Internet Explorer"