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