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><styletype="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><formid="form1"runat="server"><divid="wrapper"class="mywrapper"><!-- Navigation --><!-- Fixed navbar --><navclass="navbar navbar-default navbar-fixed-top"style="z-index:2;">
                ......
            </nav><divclass="row"><divclass="col-md-3"style="z-index:2;"><divclass="navbar-default sidebar"role="navigation"><divclass="sidebar-nav">
                            ...................
                        </div><!-- /.sidebar-collapse --></div><!-- /.navbar-static-side --></div><divclass="col-md-9 col-sm-9 col-lg-9"style="background-color: #FFF; z-index:1; background-color: yellow;"><divstyle="display: block; width: 100%; height: 60px; background-color: blue;">aaaa</div><iframesrc="about:blank"frameborder="0"style="width: 80%; height: 500px; border: none;"></iframe></div></div><!-- End Row --></div><!-- End Wrapper --></form></body></html>

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