Sub Menu alignment in IE7

On my test website www.psweb-test4.com
On the nav bar "about us" sub menu
I am having a real issue that I cannot seem to resolve. In IE7 I am trying to reposition/realign the background element I think this is ul.MenuHorizontal ul (this is highlighted in red background) it shows different/OK in Safari and IE8. Can you help please as this is very frustrating.

Have a look at the answer to your post in the other forum http://forums.adobe.com/message/3419549#3419549
Gramps

Similar Messages

Sub menu positions after IE7 hack

I have recently solved with the help of these forums the
position of my Spry sub menus in IE7,(very grateful indeed) but I
cannot get the "sub sub menu" to sit any further away from it's
parent than this in IE7 ( please view :
www.shedloadcreative.co.uk)
can anyone offer any guidance. The way I would like it to look can
be viewed in Safari, Firefox etc.
Hopefully someone out there can tell me what I'm doing
wrong!!!
Here is the hack if it sheds any light :
@media screen {
* html ul.MenuBarHorizontal ul
position: relative;
float: left;
display: inline;
margin: 0px -1000px -1000px 0px;
* html ul.MenuBarHorizontal
{position: static;
*:first-child+html ul.MenuBarHorizontal ul
position: relative;
float: left;
margin: 0px -1000px -1000px 100px;
*:first-child+html ul.MenuBarHorizontal
{position: static;

Sorry this is the hack code I'm using:
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #000;
@media screen {
* html ul.MenuBarHorizontal ul
position: relative;
float: left;
display: inline;
margin: 0px -1000px -1000px 20px;
* html ul.MenuBarHorizontal
{position: static;
*:first-child+html ul.MenuBarHorizontal ul
position: relative;
float: left;
margin: 0px -1000px -1000px 20px;
*:first-child+html ul.MenuBarHorizontal
{position: static;

How to Center Text in Menu and Left Align in Sub Menu

Hi - I'm looking to Center the text in the main menu of a Spry Menu in DW CS 5.5 but left align the sub menu's.
If someone could point me in the right direction it would be much appreciated.
Thanks
J

See here http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
Gramps

Positioning of spry sub menu in IE8

Hi - can anyone help with an IE8 issue concerning Spry? I have created a menu here:
http://www.clinicafiore.co.uk/jan2012/indexJan2012_1.html
In all the browsers I have tested (Chrome,FF,Safari,Opera) on Mac and PC platforms it works fine. In IE8 it doesn't (hooray).
The critical attribute is:
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 189px;
top: 0;
I.e. I have pushed the sub-menu out 189px when visible and set the top value to 0 thinking this would align the sub-menu with the top of the main menu item.
Is there a better way to do this to cover all browsers or do I need some conditional code for IE?
Really.really grateful for any help
For good measure here's all the html & the css
HTML
<div id="leftNav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" title="ageing body" class="MenuBarItemSubmenu">AGEING BODY</a>
        <ul>
          <li><a href="#">Ageing Décolleté</a></li>
          <li><a href="#">Ageing Hands</a></li>
          <li><a href="#">Ageing Neck</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">ageing face</a>
        <ul>
          <li><a href="#">Ageing Lips</a></li>
          <li><a href="#">Double Chin</a></li>
          <li><a href="#">Downturned Mouth</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>
CSS
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 0.9em;
          cursor: default;
          width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 0.9em;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 189px;
          float: left;
          font-weight: bold;
          text-transform: uppercase;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 189px;
          position: absolute;
          left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: 189px;
          top: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 189px;
          font-weight: normal;
          text-transform: none;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          border: 1px solid #CCC;
          font-weight: normal;
          text-transform: none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #aee56b;
          padding: 0.5em 0.75em;
          color: #333;
          text-decoration: none;
          border-bottom-width: thin;
          border-bottom-style: dotted;
          border-bottom-color: #FFF;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          background-color: #999999;
          color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #999999;
          color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;

I may be misinterpreting what it is that you want, partly because I thought we were talking horizontal menu and you point out a vertical menu.
I think that you used the vertical menu as an illustration to shopw how you want the submenu alligned. If that is correct, then please copy an paste the following into a new document and see the result in an IE8 browser.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal ul {margin-left: 8em; margin-top: -35px;}
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
If the above is not what you want, then please explain.
Gramps

Total frustration, Spry Sub Menu jumps to top of page in IE 7.

I am a newbie to Divs and spry menus, tring to put together a site for the local sports club. Have created a spry menu and have problems in IE browsers. In IE 7 the sub menu jumps to the top of the page. In IE 8 the submenu covers the main button/menu when you hover over it, instead of dropping down, also side image next to spry menu jumps out of Div. Works fine in Firefox. Have upgraded Spry to 1.61. Here is address of site    http://www.pascoevalesc.org.au/.
Help a very Frustrated person.
CSS:
@charset "utf-8";
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #161616;
    height: auto;
    width: 900px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
.twoColFixRtHdr #container {
    width: 900px; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #000000;
    float: left;
    height: auto;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
.twoColFixRtHdr #header {
    background-color: #000000;
    float: left;
    height: auto;
    width: 900px;
    margin: 0px;
    padding: 0;
.twoColFixRtHdr #header h1 {
    margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    background-color: #000000;
    float: left;
    height: auto;
    width: 900px;
    padding: 0px;
.twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 150px;
    background-color: #000000;
    padding: 0px;
    height: auto;
.twoColFixRtHdr #mainContent {
    background-color: #000000;
    float: left;
    height: auto;
    width: 740px;
    margin: 0;
    padding: 0;
#maincontentbottom {
    background-image: url(../images/bottom-maincontent.gif);
    background-repeat: no-repeat;
    float: left;
    height: 33px;
    width: 647px;
    margin-left: 50px;
#panthernewstop {
    float: left;
    height: 31px;
    width: 647px;
    background-image: url(../images/top-maincontent.gif);
    background-repeat: no-repeat;
    margin-left: 50px;
    margin-top: 120px;
#panthernewsmid {
    background-color: #000000;
    float: left;
    height: auto;
    width: 623px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #c6c4c4;
    border-right-color: #c6c4c4;
    border-bottom-color: #c6c4c4;
    border-left-color: #c6c4c4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 51px;
    padding-top: 0px;
    padding-right: 11px;
    padding-bottom: 0px;
    padding-left: 10px;
#panthernewsbottom {
    background-image: url(../images/bottom-maincontent.gif);
    background-repeat: no-repeat;
    float: left;
    height: 37px;
    width: 647px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 50px;
#sponsormaincontent {
    background-color: #000000;
    padding: 0px;
    height: 74px;
    width: 549px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-right-width: 0px;
    border-left-width: 0px;
    border-right-style: 0;
    border-left-style: 0;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-top-style: 0;
    border-bottom-style: 0;
.twoColFixRtHdr #footer {
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    height: 129px;
    width: 850px;
    padding: 0;
    float: left;
    margin-left: 20px;
.twoColFixRtHdr #container #footernav {
    float: left;
    height: 50px;
    width: 850px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    color: #999999;
    margin-top: 40px;
    margin-right: 20px;
.twoColFixRtHdr #footer p {
    height: 129px;
    width: 850px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
#3tabdiv {
    background-color: #151515;
    float: left;
    height: auto;
    width: 740px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 90px;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
.Title { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#panthernewsrow1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    float: left;
    height: auto;
    width: 280px;
    margin-top: 10px;
    margin-left: 10px;
#panthernewsrow2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    float: right;
    height: auto;
    width: 280px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
.twoColFixRtHdr #container #mainContent #panthernewsbottom {
    background-color: #000000;
    margin: 20px;
    float: left;
    height: auto;
    width: 700px;
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow1 .headtitles.style4 .style4 {
    font-size: 16px;
    font-weight: bold;
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow2 h2 .body-white {
    font-weight: normal;

G'day Mate,
You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Carn the Pies
Gramps

Cursor selection does not follow chapter order on sub-menu

I used iMovieHD6 to add chapter markers to my large DVD project. They "shared" very nicely into iDVD8 and the Chapter Selection sub-menus were created nicely.
The problem is that when I use the cursor arrows on the DVD remote (real or virtual, in or out of iDVD), the highlight jumps around the sub-menu items rather than moving in a logical order. For example, I have 4 sub-menus with 6 chapters in each. Let's use numbers for them starting with the upper left they are 1,2,3 and then at the lower left they begin 4,5,6. I am using the Reflection White theme. When I press the right remote cursor button it will move from 1 to 2 to 5 to 6 to 3 to 4 and back to 1. Note that this order is not the same for each sub-menu, but none of them go 1,2,3,4,5,6.
I don't know what might be wrong or how to correct it, but I have a really big project that is otherwise perfect and I'd really like to get it out, please help!
Thanks.

I just wanted to add this before closing this topic.
After poking around with the Reflection theme I better understood what Len was talking about. It appears that there are no modifiable parameters in the theme itself that control the order of cursor's motion through the buttons. That I assume is hard-coded into iDVD and follows a pre-programmed logic.
The point of failure is the position and orientation of the buttons in the Reflection theme's sub-menus when added automatically. They are made to look to the viewer as though they are set on an angled surface and viewed at an angle from above. While our brains can process this effect nicely, iDVD's cursor logic doesn't fare as well.
The work-around is fairly simple: Realizing that iDVD treats all chapter buttons as though they are two-dimensional objects on a flat surface, you must re-arrange them so that from top-left to bottom-right they follow a logical order, with the first buttons higher and farther left than the later-selected buttons. You don't have to move them very far to get the desired result and it doesn't have to affect the overall appearance of the menu in a noticeable way.
A slight rearrangement in my case left the overall look of the chapter menu the same but yielded a zig-zag flow through the buttons as follows:
[1] [3] [5]
[2] [4] [6]
Pressing the right cursor key jumps from top left to bottom left to top center then bottom center then top right and finally bottom right before going back to the start. Granted this is not quite "right" in that if iDVD could "see" the menu the way my brain does it would go left to right across the upper row of buttons rather than zig-zagging, but I figure that as long as the user can understand how to get to the button they want it'll be fine.
If you really need your menu selection to move linearly left to right with those arrows and with the up/down arrow used to move it vertically, then you have to arrange the buttons on the menu in a rectangular pattern with the top of each row of buttons all in a nice horizontal line. Note that's not the same as the alignment line that Reflection provides for you, it's a true horizontal line in relation to the monitor screen.
I'd much prefer that iDVD revisit the logic of the cursor control code, perhaps adding the choice of allowing the numerical sequence of the chapters to dictate the order of the cursor's motion rather than their relative position on the screen, but since they don't call me for advice, the above will likely have to do.

Sub menu display I.E 7.0

Hi,
Thanks for a fantastic extension.
I set-up a menu in Dreamweaver for site
http://www.pafiankingdom.com
and made some minor adjustments to the formatting. The navigation
menu displays correctly in I.E 6.0 and Firefox, but in I.E 7.0 the
sub menu's show up on top of the main menu items.
The CSS file looks like the following:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 100%;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0.35%;
list-style-type: none;
font-size: 12px;
font-weight:bold;
position: relative;
text-align: left;
cursor: pointer;
width: 100%;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
font-weight:bold;
position: absolute;
z-index: 1020;
cursor: default;
width: 100%;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 102%;
border: 0.35px solid #FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0.35x solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0.35px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-image:url(../images/template/fon_menu.gif);
padding: 0.5em 0.75em;
color: #000000;
font-family : Tahoma,Verdana,Arial;
text-indent:30px;
text-decoration: underline;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
text-decoration: underline;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-image:url(../images/template/fon_menu.gif);
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/template/fon_menu.gif);
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Perhaps my formatting changes have messed up it's
presentation in I.E 7.0. I don't seem to be able to locate the
problem.
Please help.
Thanks in advance
Richard

fixed the problem.
code:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 100%;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0.35%;
list-style-type: none;
font-size: 12px;
font-weight:bold;
position: relative;
text-align: left;
cursor: pointer;
width: 100%;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 0%;
padding: 0;
list-style-type: none;
font-size: 100%;
font-weight:bold;
position: absolute;
z-index: 1020;
cursor: default;
width: 100%;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 150px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 102%;
border: 0.35px solid #FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0.35x solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0.35px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-image:url(../images/template/fon_menu.gif);
padding: 0.5em 0.75em;
color: #000000;
font-family : Tahoma,Verdana,Arial;
text-indent:30px;
text-decoration: underline;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
text-decoration: underline;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-image:url(../images/template/fon_menu.gif);
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/template/fon_menu.gif);
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Unable to Adjust Sub Menu

Hi,
I am unable to 'permanently' adjust my sub menu on any of the x,y,z axis to align it to my preference.
After moving it to my liking, when I click away from the menu it snaps back to original position?!
Another guy back in april 2012 had this issue http://forums.adobe.com/message/4369269,
surely this must have been fixed?
Hopefully Im just being foolish.........Please point me to the solution.
Best Regards,
Ross

Thank you for the screen recording.
There is still one issue I need help with please. To produce "vertically
spaced", "rounded" buttons I try to use an "invisible" 1px border on the
menu item. This is a a very hit and miss process, sometimes the border
jumps back to solid black, sometimes the border resets to 0px...
Could you please check to see if it is a bug, or is there a specific order
of application that I need to know?
Thanks,
Peter
Peter Claridge
Member of The Directors Guild
w: www.peter-claridge.com
e: [email protected]
t: +49 89 613 98 240
f: +49 89 613 98 241
m: +49 171 2685600
skype: claridge_p
IMDB Résumé: www.imdb.me/peter-claridge

Why is sub, sub, sub menu way off to the right?

Why is my sub,sub, sub menu way over to the right? I've tried this also on a
blank page and it does the same thing?
http://www.carroll-indoor.com/temp9/
Any other page suggestions are fine as well!

I would be inclined to extract the menu from the page, place it in a new empty one, and work on getting in shape. I'm not seeing the sub, sub, sub menu display at all. I'm only seeing the final "Refs" item, and it has static positioning. Looking at the "Refs" parent <li>, Opera Dragonfly reports the computed style as:
-o-transform-origin: 60px 18px;
background-attachment: none;
background-clip: none;
background-color: #ffffff;
background-origin: none;
background-position: none;
background-repeat: none;
background-size: none;
bottom: 160px;
color: #868686;
cursor: pointer;
display: list-item;
float: none;
font-family: Arial;
font-size: 12px;
height: 36px;
left: 212px;
line-height: 18px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
right: 332px;
text-align: center;
top: 124px;
width: 120px
Looking at that, you have all margins and padding set to "0", floating turned off, with fixed positioning, reinforced by stating your "box" width and height, and explicitly defining the positioning for for that box with top, right, bottom, and left values. This results in all of your buttons being stacked one atop the other. If you are using some JavaScript to reposition everything, you may want to delve into that. I viewed your reference page in Opera 10.60, Firefox 3.6, Safari 4, and Chrome 4, on Mac OS 10.5.8.
Big help, I am.
Richard

How to move over text in a sub-menu --

Hi - I hope someone can help me because I'm stumped. In my previous post:
https://forums.adobe.com/thread/1669049?sr=stream
...the forum team helped me figure out how to fix bullets in a list. But now someone else brought it to my attention and I tried to fix it but cannot figure it out. Now the sub-menu words are way too close to the left edge of the main navigation:
So I'm not sure what to do to leave the bullet lists, which work great, alone but how to fix those sub-menu words to move them over to the right away from the left edge. Here's the main CSS file and the change I made from the previous post starts at line 432:
https://dev3.orr.noaa.gov/sites/all/themes/creative-responsive-theme/style.css
Any ideas? Any help is greatly appreciated and thanks.

Hi Ken,
The reason why the -11 is there is because in a previous post:
Bullets in list aren't displaying - can't figure out why
I added it to fix the bullet lists so that the text wraps and the bullet lists line up like they should. When I added it, though, it's now affecting the navigation.
UPDATE - I was able to pinpoint the exact code that affects the sub-menu text. The code is the CSS file is:
#main-menu li li a {
color: #C5C5C5;
min-width: 150px;
margin: 0;
background: #1e272e;
border-top: 1px solid #333;
font-size: 11px;
text-align: left;
overflow: hidden;
padding: 3% 5%;
font-weight: normal;
The way I confirmed that the above code is what I need to fix is I changed the font size to 16, just to see what would happen and here is the result I got:
So that above code seems to be the code that will affect the layout of the sub-menu words that I'm trying to move over a little bit from the left margin. Then I tried to tweak the margin and padding. I first added 10px to the left margin like this (margin: 0 0 0 10px) and that did not work. I then tried to add 1% to the padding and that did not work either. So I'm really stumped about how to move those sub-menu words over from the left a little bit. Any ideas?

Horizontal Spry Menu Bar with Horizontal Sub Menu

I have created a horizontal menu bar with only one main menu item leading to a sub menu. I would like this sub menu to display horizontally also, instead of vertically as added by default.
I am relatively new to dreamweaver and would appreciate any help possible.

Came across the fix by accident thru extensions in menu bar,
and choice of cursor for each section. Feeling happy! Happy New
Year everyone.

Muse 2014 -sub menu items appearing on roll-over etc.

Hi, complete newbie, so sorry if this has already been covered elsewhere. Only started using Muse about 1 month ago and now using Muse 2014 - using horizontal menu widget and discovered how it now shows sub-menus when hovering over the main menu item- I find this great!
I want a 'Contact Me' page with a basic form and this is not a problem, however, I want the sub-menus to appear when hovering over the other main menu items, but not the contact me page - might be completely off here, but created a 'Thank you' page as a child page of the contact me page and only want this displayed (not as a sub-menu choice when hovering over the contact me main menu item) when they have clicked the submit button on the form (I know how to set this re-direction in the forms options). Have tried playing with menu on the master page - switching off the edit together and changing settings on only the contact me menu item - without success- seems to apply to all main menu items.
I would like to know how to achieve sub-menus on other menu items - but not on contact me item; or whether I am going about trying to have a 'Thank you' response when someone submits the contact me form in the completely wrong way - can this be better achieved by other means?
I would really appreciate your advice and help. My published site is 'onyerbikegeordie.uk' with the main menus - except not with a contact me page as yet, but would give you an idea of what I am trying to achieve except for a contact me page.
Sorry for the long post, but thanks for reading and in anticipation of your help!
Joe
Message was edited by: Joe Fitzpatrick

Hi, managed to find the answer to this myself. In Plan, right-click on page and select Menu Options > Exclude Page from Menus. Job Done!
Joe

Cluster (sub menu) submit button grayed out

hello all
as of today my compressor has stopped allowing me to submit the batch i set up.
having sent an item from FCP to compressor, i get to set the options for settings and destination and then when i hit the submit button a second menu pops down regarding cluster options of which i have none. i add a name to this box yet no mater what other options i change the *submit button in this sub menu remains grayed out!*
http://twitpic.com/jj7n2
i have tried reinstalling compressor, and eventually the whole suit. i have removed the various prefs and qmaster stuff. i have used the fix compressor utility from digital rebel, repaired permissions and cleared out cache, but still *grayed out submit*.
what thoughts cloud genii?

I'm having the same problem.
This comes after suffering persistent crashing of Compressor 3.5 on launch and finally having to reinstall to at least fix the crashing problem. But now I can't submit any processes - the button is greyed out.
Can't remember setting this up originally, but it use to say "This Computer" for processing - do I need to add my computer to a list of available processors?
Any help hugely appreciated,
Simon

Can't access in Finder Contextual Menu the sub-menu named More

Hi!
I was trying to learn how to use Automator, in the web page
http://www.macosxautomation.com/automator/examples/ex03/index.html
and I realize that I can't access in Finder Contextual Menu the sub-menu named More for choose Automator > Create Workflow... from the sub-menu.
Someone can help me to configure the finder in order to

That page is out of date since it doesn't reflect the change in Snow Leopard that did away with the More contextual menu. Try this. System Preferences->Keyboard->Keyboard Shortcuts->Services->Development->enable Create Workflow. Close the prefPane, select the object, CONTROL-click->Services->Create Workflow.
If that solves your issue, then send a message to the page's developer and ask them to update it.
BTW, see http://discussions.apple.com/thread.jspa?threadID=2241804 for a four-parter by Sal Saghoian on *Automation in Snow Leopard*
and this, which describes the old and new automator—services stuff:
http://www.reynoldsftw.com/2009/08/automator-and-finder-interactions-in-os-x-10- 6/

Sub-menu of eSubmit is empty in non-English language (Russian)

BPC 7.5
BPC for Excel in English is working correctly, but in Russian sub-menu of eSubmit is empty

Hi Sorin!
Thank you for reply!
Yes, russian language for BPC installed.
Test was done with the same user for both language - in english everything is ok, in russian except submenu of "eSubmit" too.
Only eSubmit's submenu is empty
p.s. I see and can run eSubmit's macros in Excel (in russian) if I add them on Excel toolbar as icon (not from Planning and Consolidation -> eSubmit -> ..)
Edited by: Maxim Pak on Nov 17, 2010 6:57 AM
Edited by: Maxim Pak on Nov 17, 2010 7:19 AM

Sub Menu alignment in IE7

Similar Messages

Maybe you are looking for