CSS Drop Down Menu hidden by PDF object

Mabrito · Sep 6, 2010

I have a CSS drop down menu and the drop down menus from it are being hidden by the <object> tag that is used to display a PDF document. I hear the z-index tag can fix this but am confused on how to implement it.

Basically this is my page I am embedding the PDF document on:

Code:

<body style="height:100%; overflow-y: scroll;">
	<div class="pagesize">
    	<div class="menuSection">
             [I]menu stuff here[/I]
    	</div>
        
        <div class="bodySection">
        	<object type="application/pdf" data="documents/FastOrngMSDS.pdf" width="900" height="800" >
            </object>
        </div>       
   	</div>
</body>

As you can see, above is the object tag with the PDF document. It works great, just hides the CSS drop down menus.

In case you need to see, here is the CSS code I used for the menu:

Code:

.bg {background: url(../images/menu/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(../images/menu/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(../images/menu/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(../images/menu/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(../images/menu/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(../images/menu/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(../images/menu/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(../images/menu/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(../images/menu/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(../images/menu/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(../images/menu/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(../images/menu/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

Any help is implementing the z-index and how it is used, would be greatly appreciated and helpful!

tgabe213 · Sep 6, 2010

http://www.w3schools.com/css/pr_pos_z-index.asp

Position the menu and body div's (fixed, absolute, or relative), and set their z-indexs. Whichever div has the higher z-index will always be on top.

Also, can you seriously efficiently read that css? Each selector should have its own line.

Mabrito · Sep 6, 2010

Haha not really, CSS is still very new to me. I got this code from a friend and just modified the color scheme of the menu basically. What you mean by " Each selector should have its own line"

tgabe213 · Sep 6, 2010

Lazy_Moron said:
Haha not really, CSS is still very new to me. I got this code from a friend and just modified the color scheme of the menu basically. What you mean by " Each selector should have its own line"

Well, for this line,

Code:

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}

I would do,

Code:

.menu :hover ul.sub
{
    left: 2px;
    top: 40px;
    right: 2px;
    background: #fff;
    padding: 3px 0;
    border: 1px solid #999999;
    white-space: nowrap;
    width: 200px;
    height: auto;
}

Mabrito · Sep 6, 2010

Ah thats what you mean. Nah, I kind of prefer it going across in a straight line. Guess just me weird preference.

I set position:relative for both the bodySection and menuSection CSS classes. Then I set z-index to 1 for menuSection and z-index to 400 for bodySection with no success. What could be the error? I notice in the menu CSS, there are some z-indexs set to 200. Not sure if this has effect or not, but thought I should bring it up.

webdes03 · Sep 6, 2010

Actually, the way you have it is more efficient from a data end than the format that tgabe213 is suggesting. It basically has been minified, removing the erroneous whitespace to make more efficient use of bandwidth. It's a bit tougher to read but in high volumes it's more efficient. With low volumes it's not a big deal, but look at any major website and chances are they've minified it. Any seasoned developer shouldn't have an issue reading it the way you originally posted it.

As for the z-index issue; this is an issue that crops up any time the object tag is used. Say you had a flash object there, your nav would "pop-under" that element also. You have to define a z-index on both the object tag and the nav. I see you've set a z-index of 200 on the menu hover element, so you need to put a z-index of less than that on the object.

You can either append a style parameter inline on that specific object tag, set a style for the ID of that object, or set it globally by creating a CSS like for all object tags.

Mabrito · Sep 6, 2010

I changed the object tag to say this with no success:

<object style="position:relative; z-index:-1;" type="application/pdf" data="documents/FastOrngMSDS.pdf" width="880" height="800" ></object>

webdes03 · Sep 6, 2010

Lazy_Moron said:
I changed the object tag to say this with no success:

<object style="position:relative; z-index:-1;" type="application/pdf" data="documents/FastOrngMSDS.pdf" width="880" height="800" ></object>

Just do 1, without the minus sign.

Mabrito · Sep 6, 2010

webdes03 said:
Just do 1, without the minus sign.

No success

Grrrr Chrome issue, Firefox and IE works.

Mabrito · Sep 6, 2010

Correction, works in Firefox, IE and Chrome is broke.

webdes03 · Sep 6, 2010

See this article; in general there are some cross browser compatibility issues with what you're trying to do. Set the param and embed values also and see if that helps.

http://dhtml-menu.com/menu/dhtml-menu-sample-overlapping-sample.html

Mabrito · Sep 6, 2010

I made this adjustment with no success:

<object style="position:relative; z-index:1;" type="application/pdf" data="documents/FastOrngMSDS.pdf" width="880" height="800" >
<param name="wmode" value="opaque">
<embed src="documents/FastOrngMSDS.pdf" width="880" height="800">
</object>

I did use the embed command correct right?

webdes03 · Sep 6, 2010

Lazy_Moron said:
I made this adjustment with no success:

You have to put the embed attribute in as well as the param...

<object style="position:relative; z-index:1;" type="application/pdf" data="documents/FastOrngMSDS.pdf" width="880" height="800" >
<param name="wmode" value="opaque">
<embed src="documents/FastOrngMSDS.pdf" width="880" height="800" wmode="opaque">
</object>

Mabrito · Sep 6, 2010

webdes03 said:
You have to put the embed attribute in as well as the param...

<object style="position:relative; z-index:1;" type="application/pdf" data="documents/FastOrngMSDS.pdf" width="880" height="800" >
<param name="wmode" value="opaque">
<embed src="documents/FastOrngMSDS.pdf" width="880" height="800" wmode="opaque">
</object>

Sigh the bastard is still hiding behind it

Also tried this combo with no success:

<object style="position:relative; z-index:1;" type="application/pdf" data="documents/FastOrngMSDS.pdf" width="880" height="800" >
<param name="wmode" value="transparent">
<embed src="documents/FastOrngMSDS.pdf" width="880" height="800" wmode="transparent">
</embed>
</object>

abhishan · Sep 28, 2011

Hi,

I am faced with the same issue and have tried everything with object as well as iframe tags. Please do post in case the solution was found.

Thanks.

KingKaeru · Sep 28, 2011

start putting style="position:relative;" on bodysection, menusection, and body in that order to debug.

CSS Drop Down Menu hidden by PDF object

Mabrito

Supreme [H]ardness

tgabe213

2[H]4U

Mabrito

Supreme [H]ardness

tgabe213

2[H]4U

Mabrito

Supreme [H]ardness

webdes03

Limp Gawd

Mabrito

Supreme [H]ardness

webdes03

Limp Gawd

Mabrito

Supreme [H]ardness

Mabrito

Supreme [H]ardness

webdes03

Limp Gawd

Mabrito

Supreme [H]ardness

webdes03

Limp Gawd

Mabrito

Supreme [H]ardness

abhishan

n00b

KingKaeru

Supreme [H]ardness