How can I get my pdf object to display beneath my menu?

I know this isn't an original quandary, but I've yet to figure out how to pull this off.

Here's a screenshot of my page:

Here's the relevant HTML:


<div class="nav_bar" style="position:absolute; z-index:200;">
	<div class="navcontainer">
		<li><a href="http://localhost\SouthArea/index.php" class="home"></a></li>
		<li><a href="http://localhost\SouthArea/page.php?page_id=14" class="regions"></a>

...and my pdf object:

<div style="width:800px; height:690px; border:1px solid #cccccc; position:absolute; z-index:-100; float:right;"><object data="word.pdf" type="application/pdf" style="width:800px; height:685px; position:absolute; z-index:-200;">
	<embed src="word.pdf" type="application/pdf" />
	<param name="allowfullscreen" value="true" />
	<param name="wmode" value="transparent">

Open in new window

Bottom line: I've got my navbar z-index set to 200, my object container z-index set to -200 and the menu still displays BEHIND my pdf.

How can I beat this thing? I really like the effect, but the menu has to display over my pdf object. How can I do that?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bruce GustPHP DeveloperAuthor Commented:
BTW: I was able to successfully try the google docs approach where you use an iframe that incorporates the google dynamic. Oh, happy day! Thing is, this is an intranet site so the content is blocked as soon as you use a third party. So, I'm still stuck...
Julian HansenCommented:
Why not iframe your own site - put the <object> inside its own page and then iframe to that?
Bruce GustPHP DeveloperAuthor Commented:
Like this?

<iframe src="current_pdf.php" width="500" height="375"></iframe></div>

...and then my pdf page is this:

<!DOCTYPE html>
<title>Current PDF</title>

<div style="width:800px; height:690px; border:1px solid #cccccc; position:absolute; z-index:-100; float:right;"><object data="word.pdf" type="application/pdf" style="width:800px; height:685px; position:absolute; z-index:-200;">
<embed src="word.pdf" type="application/pdf" wmode="opaque" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="opaque">


I tried it, but the same problem persists. My menu goes behind the iframe.

What do you think?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
If your menu is absolutely positioned then can you not give your menu a top margin?

A bit difficult to imagine without seeing the page - you said it is internal - can you post the html source for it - specifically the menu (+css) - so I can try and replicate.
Bruce GustPHP DeveloperAuthor Commented:
Here you go:

Thanks for your time, Julian! I really want to nail this...
Julian HansenCommented:
That link seems to work fine - unless I am missing something - the PDF (when the page is scrolled) goes under the nav - or is that not what I should be looking for? Tried in FF, IE and Chrome - same result.
Julian HansenCommented:
Just realised it is the hover menu that is the issue. Screen grap of page with menu open - same result.
Belay the comment on IE - menu works but PDF does not load.
Bruce GustPHP DeveloperAuthor Commented:
Here's what I'm looking at (same page):



another screenshot
IE's menu doesn't work. Firefox, the menu does display correctly. Neither pdf scrolls correctly...


What now?
I think that It is not advisable to ever have BOTH the   CSS   position: absolute;  AND the  float: right;   ( or any float: )  for an element, use one or the other, but not both, as they are contradicting each other in how you want the browser to display an element.

I can not see a reason to use either the position: absolute;  or the  float: right;  in this page, but maybe I do not see the other things u intend to add later? ?
Bruce GustPHP DeveloperAuthor Commented:

Welcome to the party! I got rid of the "float:right;" dynamic on the "current_pdf.php" page. Didn't make any difference. Do you see anything else?
As far as the "scroll bars" in the PDF container not working, the user has NO ACCESS to the input (touch) because the z-index is less than zero, so the <body> and all other elements above in z order, get the input (touch-click) and the PDF container, is NOT in the event chain.

You might try to have the pdf thing as z-index One (or Two), and the menu thing as z-index Two (or higher) and see what difference that makes.
Bruce GustPHP DeveloperAuthor Commented:
I'll do that. What about the menu hovering OVER the pdf. Right now, it's behind the pdf which is pointless. In Firefox, it's fine. In IE, the pdf content insists on standing in front of everybody. How can I get that content to sit behind the menu?
OK, , before I get into the " In IE, the pdf content insists on standing in front of everybody"
I do NOT see any purpose for your <div> in this -
<div style="position:absolute; z-index:-200;"><iframe src="current_pdf.php" width="800" height="690"></iframe></div>

if you use  <div style="position:absolute;  it does not change the POSITION of the <iframe , which is what you need to deal with here, in my opinion, ,
It seems Like you could just use -

   <iframe src="current_pdf.php" width="800" height="690"></iframe>
without a <div> container, and NO z-index change, and the Menu should show above the <iframe>  , , , , ,  AND the <iframe> is NOW in the browser positioning relevance structure so other elements can respond to the <iframe> placement.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:

Check it out at I removed the div so now we're just looking at the iframe content and that's it. If I've got anything other than a pdf in there, the menu displays over the iframe just like it should...

...but the moment I go back to "current_pdf.php," the menu goes behind the content.

Your logic is sound, Slick, but that pdf introduces something that has to be accommodated differently and I don't know what.
Just looked at an Iframe, and I have this added -
 allowtransparency="true" added to the iframe attributes, , but that seems outdated to me,

The IE iframe goes to the TOP of any z order apparently?

you might try -
 to use the embedding of the pdf using the <object> tag and not Iframe. Then, u might would use the <param name="wmode" value="transparent"> inside the <object>. Something like this:

<object data="current_pdf.php" type="application/pdf" width="800" height="690">
<param name="wmode" value="transparent"></param>
    <embed src="current_pdf.php" type="application/pdf"  width="800" height="690" />

I think you can set the wmode in the iFrame, but not sure how?
One web source says this may do it for iFrame -

<iframe src="current_pdf.php?wmode=transparent" width="800" height="690"></iframe>

but that's just a guesss for me
Bruce GustPHP DeveloperAuthor Commented:
Works great in Firefox, but no go in IE...

<object data="current_pdf.php" width="800" height="690">
<param name="wmode" value="transparent"></param>
    <embed src="current_pdf.php" width="800" height="690" />
I'm out of Ideas to get the PDF element to change its display? ?    and I'm out of time today to do any more, got to work on other projects.
Bruce GustPHP DeveloperAuthor Commented:
Alright, guys!

I'm going to simply move my object below the menu. The best solution I found to all of this was using google to display the pdf (<iframe src="" style="width:718px; height:700px;" frameborder="0"></iframe>). At that point, all of my CSS was being properly acknowledged. Problem there, however, is that when you use that option in the context of a company intranet, the content is blocked.

So, I simply changed my design and it's going to work.

Thanks for all of your suggestions!
Julian HansenCommented:
You are welcome - unfortunately IE causing problems again - although when I tested on Edge it seems to work fine so there is light at the end of the tunnle
@Julian, , ,   LOL , like the years of non-conformist IE web developer headaches are goin to disappear with Edge? There should have been Light for web heads Years ago from IE and MS. If Edge does shape up, then what am I goin to complain about? ?

@brucegust, tanks 4 points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.