Issue:Menu Hide behind PDF in IE

Question

I have created the menu bar for my project and in iframe i am showing PDF file.But my menu is hiding behind PDF(only in IE).For reference i am sending you my code please just go through it and let me know where i am wrong.

enter code here

<title>Test Sample</title>

<link rel='stylesheet' href='css/style.css'>

<style>
    #tabUL {
        border-bottom: 1px solid #d0d0d0;
        margin: 8px 0px 6px 0px;
        padding: 6px 0px 30px 5px;
        font-size: .9em;
        clear: both;
        font-family: tahoma,verdana;
        position: relative;
        font-size: 13px;
    }

        #tabUL li {
            float: left;
            list-style-type: none;
            padding: 0px;
            margin-right: 1px;
            margin-top: 0px;
            margin-bottom: 0px;
            border: 1px solid #AAA;
            background: #D1D1D1;
            background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            display: inline-block;
            position: relative;
            z-index: 0;
            border-top-left-radius: 14px;
            border-top-right-radius: 14px;
            /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 0px 0 #FFF;*/
            text-shadow: 0 0px #000;
            margin: 0 -0.5px;
            padding: 0 20px;
        }

            #tabUL li a:not(.currentselected) {
                color: black;
            }

        #tabUL a {
            color: #003366;
            float: left;
            line-height: 14px;
            padding: 6px 24px 8px 10px;
            text-decoration: none;
        }

            #tabUL a:hover {
                color: #7f7f7f;
            }

        #tabUL li.selected {
            background: #FFF;
            color: #333;
            z-index: 2;
            border-bottom-color: #FFF;
            box-shadow: -1px 2px 0 #FFF;
        }

            #tabUL li.selected:before {
                box-shadow: 2px 2px 0 #FFF;
            }

            #tabUL li.selected:after {
                box-shadow: -2px 2px 0 #FFF;
            }

    /* To put Scroll in the rel Tab More menu */
    .reltab-moremenu-content {
        /*font-size: 12px;*/
        font-size: 11px;
        display: none;
        width: 150px;
        height: auto;
        max-height: 100px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        list-style-type: none;
        border: 1px solid #ddd;
        position: absolute;
        left: auto;
        margin-left: 0%;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        top: auto;
        padding: 5px 0px;
        border: 1px solid #ccc;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        font-weight: normal;
    }

    #tabUL li:hover ul {
        display: block;
        position: absolute;
        margin: 25px 0px 0px 0px;
        padding: 0;
    }

    #tabUL li:hover li {
        float: none;
        clear: both;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        background: #fff;
        border: 0px #AAA;
        font-family: tahoma,verdana;
        position: relative;
        font-size: 13px;
    }

    #tabMore li {
        float: left;
        list-style-type: none;
        padding: 0px;
        margin-right: 1px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<ul id="tabUL">
    <li class="selected" id="li_TabMain36"><a class="selected" id="TabMain36" href="#">Test1</a></li>
    <li id="li_TabRel75"><a id="TabRel75" href="#">Test2</a></li>
    <li id="li_TabRel39"><a id="TabRel39" href="#">Test3</a></li>
    <li id="li_TabRel53"><a id="TabRel53" href="#">Test4</a></li>
    <li><a id="More" href="#">More ◢</a><ul class="reltab-moremenu-content" id="tabMore">
        <li id="More_li_TabRel7" class="tablist11"><a id="TabRel7" href="#">Test A</a></li>
        <li id="More_li_TabRel44"><a id="TabRel44" href="#">Test B</a></li>
        <li id="More_li_TabRel80"><a id="TabRel80" href="#">Test C</a></li>
    </ul>
    </li>
</ul>
<iframe src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" style="width: 100%"></iframe>

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

Your solution http://jsfiddle.net/tpN7m/3/

 <ul id="tabUL">
<li class="selected" id="li_TabMain36"><a class="selected" id="TabMain36" href="#">Test1</a>
</li>
<li id="li_TabRel75"><a id="TabRel75" href="#">Test2</a>
</li>
<li id="li_TabRel39"><a id="TabRel39" href="#">Test3</a>
</li>
<li id="li_TabRel53"><a id="TabRel53" href="#">Test4</a>
</li>
<li><a id="Mre" href="#">More ◢</a>
    <ul class="reltab-moremenu-content" id="tabMore
    <!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->

        <li id="More_li_TabRel7" class="tablist11"> 
            <a id="TabRel7" href="#">Test A</a>

        </li>
        <li id="More_li_TabRel44">
            <a id="TabRel44" href="#">Test B</a>

        </li>
        <li id="More_li_TabRel80">
            <a id="TabRel80" href="#">Test C</a>

        </li>
    </ul>
</li>

Add to CSS :

 .cover {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

Source : z-index does not work in Internet Explorer with pdf in iframe

edited May 23 '17 at 12:11

Community

1
1

answered Mar 19 '14 at 04:46

Madhurendra Sachan

760
8
23

I have tried its not working at my end.Its working fine in Firefox but not in IE. – user1722447 Mar 19 '14 at 05:50
Sorry to disturb you again but if you tried with above code its not working.So please tell me is anything wrong in my code.The issue is only in IE. – user1722447 Mar 19 '14 at 06:32
Ok so wait till I get access to my windows pc, after that I will be updating the answer. – Madhurendra Sachan Mar 19 '14 at 06:43
And yes I can understand in most cases IE creates an issue "most incompatible" browser according to me. – Madhurendra Sachan Mar 19 '14 at 06:44
Thanks MADTerry looking into my problem.Please let me know the solution once you found an answer.Its little bit urgent. – user1722447 Mar 19 '14 at 07:11
Updated with solution. – Madhurendra Sachan Mar 20 '14 at 01:43
Thanks for your valuable reply.Please let me know what changes you have done and where it is?. – user1722447 Mar 20 '14 at 04:51
I have added and css class – Madhurendra Sachan Mar 20 '14 at 08:25
Thanks for giving your valuable time and looking into my problem.Its working perfectly with code that you provided. – user1722447 Mar 21 '14 at 09:26
using Google Doc Viewer is free for commercial use? e.g. https://docs.google.com/gview?embedded=true&url=pdfURL – Ankush Jain Jun 15 '18 at 06:48

score 0 · Answer 2 · answered Mar 19 '14 at 04:39

Try this nos.Its working nice for me

 <ul id="tabUL">
    <li class="selected" id="li_TabMain36"><a class="selected" id="TabMain36" href="#">Test1</a></li>
    <li id="li_TabRel75"><a id="TabRel75" href="#">Test2</a></li>
    <li id="li_TabRel39"><a id="TabRel39" href="#">Test3</a></li>
    <li id="li_TabRel53"><a id="TabRel53" href="#">Test4</a></li>
    <li><a id="More" href="#">More ◢</a><ul class="reltab-moremenu-content" id="tabMore">
        <li id="More_li_TabRel7" class="tablist11"><a id="TabRel7" href="#">Test A</a></li>
        <li id="More_li_TabRel44"><a id="TabRel44" href="#">Test B</a></li>
        <li id="More_li_TabRel80"><a id="TabRel80" href="#">Test C</a></li>
    </ul>
    </li>
</ul>
<iframe src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" width="800px" height="600px" />

This is not working you just copy and paste above code in notepad and save as HTML and run along with css move mouse cursor over more menu you see more sub-menus hiding behind PDF. — user1722447, Mar 19 '14 at 04:47

Issue:Menu Hide behind PDF in IE

2 Answers2