Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

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


  #1  
Old Sep 9, 2011, 03:56 PM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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!
__________________
my website www.marolinedesign.com

Last edited by mafgirl; Jan 19, 2012 at 09:22 AM.
  #2  
Old Sep 9, 2011, 11:33 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Sep 11, 2011, 02:25 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by lmilesw
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..
__________________
my website www.marolinedesign.com
  #4  
Old Sep 11, 2011, 04:01 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Sep 11, 2011 at 01:54 PM.
  #5  
Old Sep 11, 2011, 05:45 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by juggledad
...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
__________________
my website www.marolinedesign.com
  #6  
Old Sep 12, 2011, 07:50 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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
__________________
my website www.marolinedesign.com

Last edited by mafgirl; Sep 12, 2011 at 07:51 AM. Reason: added PS
  #7  
Old Sep 12, 2011, 10:16 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Sep 13, 2011, 02:26 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by lmilesw
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..
__________________
my website www.marolinedesign.com

Last edited by mafgirl; Jan 30, 2012 at 02:48 AM. Reason: adding adobe quote
  #9  
Old Sep 13, 2011, 06:14 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Sep 13, 2011, 06:28 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by juggledad
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...
__________________
my website www.marolinedesign.com

Last edited by mafgirl; Jan 30, 2012 at 02:49 AM.
  #11  
Old Sep 13, 2011, 06:35 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Sep 13, 2011, 06:48 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Sep 13, 2011, 06:54 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by juggledad
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...
__________________
my website www.marolinedesign.com
  #14  
Old Sep 13, 2011, 07:11 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Sep 13, 2011, 07:19 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by juggledad
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...
__________________
my website www.marolinedesign.com
  #16  
Old Sep 13, 2011, 08:17 AM
GarethP
 
64 posts · Jun 2010
Sorry but I can't really help - but it DOES appear to display OK for me on Windows 7 using Chrome...

Click image for larger version

Name:	ryebrook.jpg
Views:	1245
Size:	76.1 KB
ID:	1530
  #17  
Old Sep 13, 2011, 08:30 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by GarethP
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
__________________
my website www.marolinedesign.com
  #18  
Old Sep 13, 2011, 08:32 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
I just tested the Google Docs Embedder plugin and it works in my environment.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #19  
Old Sep 13, 2011, 10:17 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by lmilesw
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?
__________________
my website www.marolinedesign.com

Last edited by mafgirl; Jan 19, 2012 at 09:23 AM. Reason: added the BTW
  #20  
Old Sep 13, 2011, 12:33 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #21  
Old Sep 13, 2011, 03:00 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Yes I do have a Windows computer.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #22  
Old Sep 16, 2011, 01:43 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Quote:
Originally Posted by lmilesw
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
Did you clear your caches?
DOH!!! rookie mistake.... I cleared cache and all browsers working now, thanks to both of you!!
__________________
my website www.marolinedesign.com

Bookmarks

Tags
page menu disappear embed

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Navigation menu disappearing behind embedded YouTube videos on page Eric Bobrow Page & Category Menu Bars 8 May 25, 2011 06:27 AM
BUG: Menu and right drop out menus disappearing when above headline of page extremecarver New Versions, & Updating 8 May 10, 2011 04:04 AM
Help in Multi Level Categories/Drop Down Menu ishfaqqadir.lhr Header configuration & styling 1 Apr 30, 2011 05:07 AM
[SOLVED] Drop down menus disappearing because of a Flash object ChuckMunson Page & Category Menu Bars 15 Dec 25, 2010 05:08 PM
[SOLVED] Page Menu Bar - I want some drop downs to be clickable, and one or two to no shbaxt Page & Category Menu Bars 2 Aug 3, 2010 01:32 PM


All times are GMT -6. The time now is 12:38 AM.


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