Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Page Menu drop down disappearing behind embedded pdf AND second level not cl (http://forum.bytesforall.com/showthread.php?t=15347)

mafgirl Sep 9, 2011 03:56 PM

[SOLVED] Page Menu drop down disappearing behind embedded pdf AND second level not cl
 
Hello there!!

Atahualpa 3.6.7 and WordPress 3.2.1. Have applied all 4 bug fixes

On my local dev test site (so no URL, but I have a screenshot..)
My page menu (custom WP menu) disappears behind an embedded PDF. I have read the threads I could find about embedded content and page menus disappearing behind it, but none of the fixes work for me. Having said that, none of the previous problems were with a PDF, the were with either Flash or embedded YouTube.
I tried this in my CSS/inserts :
Code:

ul.rMenu li:hover        {
z-index: 99999!important;               
}

and tried using different variations of adding
Code:

<param name="WMode" value="transparent"></param>
before my embed code or
Code:

wmode="transparent"
in it, but to no avail. on this screenshot here: http://mafgirl.com/images/Ryebrook-menu.jpg I have used this code:
Code:

<center><param name="WMode" value="transparent"></param><embed src="/uploads/Aesthetic-Reception.pdf" width="900" height="1230" wmode="transparent"></center>
and the above CSS insert, but as you can see the menu is still disappearing behind the pdf...

My second issue is the sub menus not 'touching' and therefore I cannot click it: it disappears before I can hover over it. I have tried several things in CSS inserts such as
Quote:

margin-top:0px!important;
as well as
Code:

margin-left: 0px; or margin-left: -20px;
It initially started when I had my menu as %page-right, but then changed it to %pages and the problem still occurs.. Anyone any idea how I can fix these issues?

Thanks for reading!

lmilesw Sep 9, 2011 11:33 PM

Not sure if this is the issue but you need a space before the !important. The code you posted has no space but perhaps that was a typo.

mafgirl Sep 11, 2011 02:25 AM

Quote:

Originally Posted by lmilesw (Post 71967)
Not sure if this is the issue but you need a space before the !important. The code you posted has no space but perhaps that was a typo.

Thanks Larry, I did indeed forget the space. however, the result is no different than the screenshot I posted.. Any other ideas to get the menu showing on top of the embedded pdf and to get the drop down menu to touch so it can be clicked on - rather than disappearing when trying to hover over it?
I'll try to find some time tomorrow to put the site on my online test environment so you can see for yourself what I mean, as sometimes screenshots do not always paint a clear picture..

juggledad Sep 11, 2011 04:01 AM

without seeing the site I can't point to a solution.

Here is what I would do:
1) view the site and then view the source. Now copy the source to a file and save it with '.html' as the extension
2) open that file in your browser, you should see the page
3) now start removing anything that is not needed, the footer, sidebars any CSS not needed. do a little at a time and hit save and refresh the page


eventually you should have it to the point where you can determine what is causing the issue

mafgirl Sep 11, 2011 05:45 AM

Quote:

Originally Posted by juggledad (Post 72026)
...Here's what I would do ...eventually you should have it to the point where you can determine what is causing the issue

Thank you Juggledad! I've never tried that before, but it sounds like a GREAT idea! Thank you for teaching me something new today :-) !! Ill give that a go today on my way home. If I can't figure it out, then Tomo at some point I will put the site online. Perhaps you would be better spotting the problem.

Thanks again to both of you, you never fail to come to my aid :-D

mafgirl Sep 12, 2011 07:50 AM

Hello Juggledad,

Thank you so much for your suggestion, it has helped me a great deal and I managed to isolate both problems, although only solve one:

Where the sub menu levels were not touching, I have managed to change my code to this:

Code:

/* Top level menu outside margins (position of menu) */
div#menu1{ border:none !important; padding-left:20px; margin-bottom:5px}

/* Top level menu inside margins (position of text within menu item) */
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active{
margin-left:10px;
margin-right:5px;
margin-top:0px;
border:none !important;}

/* Sub level menu outside margin (position of menu) and borders */
div#menu1 ul.rMenu li li,
div#menu1 ul.rMenu li,
div#menu1 ul.rMenu li a
 { border: 1px solid white; margin-left:-12px; }

and it now works beautifully. Hopefully the above code will be useful to others trying to fix the same problem :)

I have not yet got a solution of the disappearing of the menu, but I HAVE found out what is causing it :) , and that is the CSS for my menu shape:

Code:

/* shaped corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius: 128em 8em;
-khtml-border-radius:  128em 8em;
-webkit-border-radius: 128em 8em;
border-radius:  128em 8em;
}

If I deleted the above code, making the menu items 'normal' with straight corners OR changed it back to rounded corners using the below code:
Code:

/* round corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
}

It would NOT disappear behind the menu and work as intended.. However, as the menu shape is part of the design of the website, I'd like to find a way to make

it work.
So I tried to convert the 'em' to 'px' to no avail (still disappearing behind pdf):
Code:

/* shaped corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius: 21px 2px;
-khtml-border-radius:  21px 2px;
-webkit-border-radius: 21px 2px;
border-radius:  21px 2px;
}

So I tried to divide the radius to bottom-left/top-right/bottom-right/top-left etc - it did not disappear behind the pdf, but it also didn't create any shape (just plain rectangle) so perhaps I used the coding wrongly..?:

Code:

/* shaped corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius-topleft, -moz-border-radius-bottomright  : 4px;
-moz-border-radius-topright, -moz-border-radius-bottomleft: 42px;
-khtml-border-radius-top-left, -khtml-border-radius-bottom-right:  4px;
-khtml-border-radius-top-right, -khtml-border-radius-bottom-left:  42px;
-webkit-border-top-left-radius,-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius,-webkit-border-bottom-left-radius: 42px;
border-top-left-radius, border-bottom-right-radius:  4px;
border-top-right-radius, border-bottom-left-radius:  42px;
}

Have you got any idea how to fix this Juggledad? or Larry? or anyone else for that matter :)

Thanks for reading :)


PS will post a link to the live website tonight, I have not managed to upload all the files just yet

lmilesw Sep 12, 2011 10:16 AM

I would change all the areas where you have comma separated values to separate values as below. You can put comma separated values for the selectors but not the separate items.

HTML Code:

/* shaped corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 42px;
-moz-border-radius-bottomleft: 42px;
-khtml-border-radius-top-left: 4px;
-khtml-border-radius-bottom-right:  4px;
-khtml-border-radius-top-right: 42px;
-khtml-border-radius-bottom-left:  42px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 42px;
-webkit-border-bottom-left-radius: 42px;
border-top-left-radius: 4px;
border-bottom-right-radius:  4px;
border-top-right-radius: 42px;
border-bottom-left-radius:  42px;
}


mafgirl Sep 13, 2011 02:26 AM

Quote:

Originally Posted by lmilesw (Post 72079)
I would change all the areas where you have comma separated values to separate values as below. You can put comma separated values for the selectors but not the separate items.

Thanks Larry, that made my menu be styled as intended, however, still being behind the pdf..
Isn't that odd? rectangle or rounded corners have no problems at all.....

I did a little more research on menu items disappearing behind nav menus and it seems to be a common problem, having said that, most posts were from 2008/2009 or earlier!
Did find this snippet :
Quote:

If you create a transparent window, then SWF content embedded in the HTML loaded into that window is not always displayed. You must set the wmode parameter of the object or embed tag used to reference the SWF file to either opaque or transparent. The default value of wmode is window, so, by default, SWF content is not displayed in transparent windows. PDF content cannot be displayed in transparent windows, no matter which wmode value is set. (Prior to AIR 1.5.2, SWF content could not be displayed in transparent windows, either.)
on Adobe's website though, which is not encouraging..

So I tried playing some more with the z-index.. I put the embed in a div like so:

HTML Code:

<center><div class="pdf"><param name="wmode" value="transparent"><embed src="/uploads/Aesthetic-Reception.pdf" width="900" height="1230" wmode="transparent"></div></center>
I then added a low z-index on the div and also on the embed and the div.post-bodycopy, all made no difference..
Code:

/* Give embedded content a lower z-index */
embed {
z-index: 1 !important;}
div.post-bodycopy{
z-index: 1 !important;}
div.pdf{
z-index: 1 !important;}

I am hoping someone will know how to fix this..

juggledad Sep 13, 2011 06:14 AM

at that website, I'm just seeing the page, but the center is blank and there is a message 'Missing plug-in' near the bottom.

I also see in my debugger that
HTML Code:

http://ryebrook.testsite.marolinedesign.com/wp-content/uploads/fonts/cambria.woff
is not found

mafgirl Sep 13, 2011 06:28 AM

Quote:

Originally Posted by juggledad (Post 72128)
at that website, I'm just seeing the page, but the center is blank and there is a message 'Missing plug-in' near the bottom.

I also see in my debugger that
HTML Code:

/wp-content/uploads/fonts/cambria.woff
is not found

Hi Juggledad, thanks for having a look!
How odd that you have a blank center. This should be the embedded pdf, this is working for me in FF, IE and Safari on a Windows 7 laptop, what are you using? What happens when you click 'missing plug-in' at the bottom or is this not a link?

Thanks for letting me know that cambria.woff is not found, i do have cambria.ttf and cambria.svg, should I have cambria.woff too? I use AnyFont plugin to install the used fonts within the site, so everybody *should* see this font. It is working for me in my 3 browsers on my Windows laptop...

juggledad Sep 13, 2011 06:35 AM

oops, I was missing the Adobe reader plugin - my computer crashed during the hurricane last week and I'm still in recovery mode - BUT it brings up a good point that your website viewers will have to have it installed to see the pdf...

I'm installing it now

juggledad Sep 13, 2011 06:48 AM

oh I love how browsers are all so standard and the all render pages the same...NOT! You might want to read this http://kb2.adobe.com/cps/908/cpsid_90885.html

mafgirl Sep 13, 2011 06:54 AM

Quote:

Originally Posted by juggledad (Post 72131)
oh I love how browsers are all so standard and the all render pages the same...NOT! [/url]

:( it is my -and I'm probably not the only one- pet hate! Although it usually is IE that is being non-complient, not Adobe...

juggledad Sep 13, 2011 07:11 AM

Arrugh, firefox has the same issue, since adobe hasn't made a plugin to work in Lion, I can't see them if they are imbedded in the page, I can view them in the browser if they open in a new window... sigh I have no answer for you.

mafgirl Sep 13, 2011 07:19 AM

Quote:

Originally Posted by juggledad (Post 72133)
adobe hasn't made a plugin to work in Lion

Never mind Juggledad, thanks ever so much for trying!
Hoping someone else will know what is going on..
I'm still baffled.. How can it be that CSS radius borders rounded DO flow on top of pdf embedded content, but any other shape that incorporates top-left, bottom-right, top-right and bottom-left to be at different values, DOESN'T flow on top of embedded pdf content..
very odd..

I suppose I could try background images instead, although I REALLY don't want to...

GarethP Sep 13, 2011 08:17 AM

1 Attachment(s)
Sorry but I can't really help - but it DOES appear to display OK for me on Windows 7 using Chrome...

Attachment 1530

mafgirl Sep 13, 2011 08:30 AM

Quote:

Originally Posted by GarethP (Post 72138)
it DOES appear to display OK for me on Windows 7 using Chrome...

Hi GarethP Thank you so much for checking! I have downloaded Chrome and you are right.. it does work there.. it seems the old days of 'this website is viewed best in [browser]' are coming back :(

lmilesw Sep 13, 2011 08:32 AM

I just tested the Google Docs Embedder plugin and it works in my environment.

mafgirl Sep 13, 2011 10:17 AM

Quote:

Originally Posted by lmilesw (Post 72142)
I just tested the Google Docs Embedder plugin and it works in my environment.

Hi Larry!

Thanks for testing the GDE Embedder, I've tried loads of plugins, but none worked and decided to just plain embedding myself.

But I've not tried this one and as you mention it works, I downloaded/installed/activated and tested it too, and in my 3 browsers FF, Safari and IE it doesn't work. It does on Chrome, but then I suppose both are a Google product..
BTW, I only get a link to download the pdf file at the bottom

Larry, if I remember correctly from a previous thread from me, you have IE9? Although this does not mean you use IE9 by default, but does lead me to believe you have a Windows computer, am I right?

juggledad Sep 13, 2011 12:33 PM

I just tested on a MAC in Safari 5.1 and it worked great and the menu's are in front of the image

Did you clear your caches?

lmilesw Sep 13, 2011 03:00 PM

Yes I do have a Windows computer.

mafgirl Sep 16, 2011 01:43 AM

Quote:

Originally Posted by lmilesw (Post 72169)
Yes I do have a Windows computer.

I though so, I was wondering why yours was working and mine wasn't but Juggledad reminded me..
Quote:

Originally Posted by juggledad (Post 72155)
Did you clear your caches?

DOH!!! rookie mistake.... I cleared cache and all browsers working now, thanks to both of you!!


All times are GMT -6. The time now is 05:06 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.