0

I have a simple html page with a menu, and a pdf in an iframe. Adobe Reader displays the pdf in the iframe. In IE9, when the menu is activated (hovered over), parts of it go behind the pdf document. This seems to be only a problem with IE (?).

I know there have been similar posts to this, but I couldn't get the solutions there to work for my case. Here's my code.

html :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Dropdown Menu</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>

<nav>    
    <ul>
        <li><a href="#">Menu</a>
            <ul>
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li><a href="#">Option 3</a></li>
                <li><a href="#">Option 4</a></li>
                <li><a href="#">Option 5</a></li>                                             
                    <ul>
                        <li><a href="#">Option 5A</a></li>
                        <li><a href="#">Option 5B</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>
<iframe src="http://www.relacweb.org/menuconferencia/menu/manual-memorias.pdf" width="900px" height="600px"  >
</body>
</html>

where style.css is :

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #909eab url(bg.png);
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
    margin: 100px auto; 
    text-align: center;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;
        }


    nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none; 
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a; position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    background: #4b545f;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

Here's a screenshot when run in IE 9: screen shot in IE

Is there a way to tweak the above code so that the menu appears fully infront of the pdf document ? e.g. like it does when run in other browsers, like chrome:

screen shot in chrome

EDIT :

It sounds like bgiframe can be used to fix this. I had a go with bgiframe version 3.0.1 but couldn't get it to work (no errors reported, and no difference in page behaviour).

Tried something like: 

<script type="text/javascript">
$(document).ready(function(){

   var settings = { conditional: true };

   $('.mainlevel li').bgiframe(settings);
});
</script>

and changed 

<li><a href="#">Menu</a>

to 

<li class="mainlevel"><a href="#">Menu</a>

If someone can enlighten me on the use of bgiframe for this example, that would be great.

Moe Sisko
  • 11,665
  • 8
  • 50
  • 80
  • so setting `z-index` on them isn't working? I have had problems with youtube iframes doing that same thing, and youtube has a special thing to add on to the link, I'm not sure what you would do for a pdf – Michael St Clair Nov 12 '13 at 05:20
  • I've tried setting z-index, and adding another iframe - trying the usual suspects hasn't worked. – Moe Sisko Nov 12 '13 at 05:25
  • Have you seen this? http://breakthroughdesign.com/how-to-show-a-div-over-a-select-box-iframe-flash-java-applet-etc/85 – Michael St Clair Nov 13 '13 at 15:27
  • thanks, i tried to use bgiframe, but couldn't get it to work. See my edit for more info. – Moe Sisko Nov 14 '13 at 06:34

0 Answers0