Menu bar question horizontal Spry

Similar Questions

• NAV menu bar question

  Hello all. quick question. my menu of the navigation bar appears behind my slideshow on my page... it is good all workers up to that I joined an easyrotator slide show, in the past, I would like to just change the css further down on the page, but I don't see the css for the slideshow in my css file, it must have been integrated by the file easrotator How to fix this?  URL is http://vacationcribs.com

  Thank you.

  Add the following code in your current css of #navbarwrapper...

  position: relative;

  z index: 9999;

  EDIT: So change...

  {#wrapper #navbarwrapper}

  height: 40px;

  Width: 960px;

  margin-right: auto;

  left margin: auto;

  }

  TO

  {#wrapper #navbarwrapper}

  height: 40px;

  Width: 960px;

  margin-right: auto;

  left margin: auto;

  position: relative;

  z index: 9999;

  }

• The easy Menu bar question

  I just created a new bar menu for my site < zamamienglishguide.com > (but it is not updated with this problem) as a solution to another problem I posted earlier, but my drop-down menus aren't back up when the mouse is not flat above them.  Who is?  The menu at the top six buttons are visible, as it should, but are so four drop-down lists on my menu buttons to the left.  What I didn't click to do this and what do I click to cancel it?

  Change the following

  UL. MenuBarHorizontal ul
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  z index: 1020;
  cursor: default;
  Width: 8.2em;
  position: absolute;
     left: auto;

  left:-1000em;
  }

• Change Active (?) Link in the Spry menu bar

  I have inserted a bar menus horizontal spry in my page and have adjusted behaviors for link properties (l, v, h, & a). However, I would like the text of the button menu spry to a specific and constant color for the active page linked (destination). For example, the background color of the menu bar is grey dark (#282828) and the text is light gray (#D9D9D9). If I point and click on the 'About' button the text is orange (#D96E11). How could I go to keep the text of this orange color once the page 'About' is reached?

  I am a newbie to DW, so I am not able to follow and understand your answer here. You said, ' give the tag which represents the current page ID. Where and how can I achieve this? From there, ' and then create a new style for the ID rule ". Do you mean create a new CSS rule-> type of selector: class?

  New DW isn't a problem, but to use it successfully, you must understand the HTML and CSS. Judging from your questions, you're new to them, too. Again, this is not a problem, but your progress will be slow and painful until you master the basics of these two technologies.

  There are several ways to add an ID to a tag of , but the best way is to first create the style rule. The example I gave is an ID selector, not a class. Class selectors begin with a dot (period). ID selectors begin with the pound sign.

  Once you have created the style rule and saved your stylesheet, you can position your cursor within the binding to which you want to apply the code. Then right click in the tag in the selector tag at the bottom of the Document window, and then choose Set ID > here on the shortcut menu.

  

• Menu bar horizontal Spry and IE11

  I inserted a drop-down list of the Horizontal Spry menu bar in a .dwt file model and created a file .html from him.

  See:  http://www.peterbarker.plus.com/exp.html

     

  I have not changed the original CSS

   

  Unfortunately the drop-down menu options menu may not work as expected. Choice open laterally to the right seen in my browser IE11.

     

  I had friends check using their browser. They have looked at the page via Firefox, Chrome, mobile Windows 8.1 and different versions of IE. In each case, the Menu bar horizontal Spry exploited properly. It seems to be a problem with my browser.

     

  I would appreciate any advice please.

  Is there something I can do with coding CSS or Spry or maybe there is a setting of IE that will solve the problem for me and / or others who may visit IE11 or similar?

  It seems that there is a problem with my browser.

  Do not use IE Compatibility Mode.

  You should not use spaces or special characters in file names.  This image file name is invalid code.

  images/Myshkin, Yaroslavl, Russia Compressed.jpg

  Rename it without spaces or commas.

  Nancy O.

• Need to justify horizontal of Spry Menu bar on the left

  I use DW CS6.  Menu bar horizontal Spry is in a div of fluid set grid on the page.

  The menu bar horizontal floated a CSS change left until what I did (I think).  It floats right now and I cannot figure out how to get back to float left.  Does anyone know a fix?

  Spry Menu CSS is:

  UL. MenuBarHorizontal

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  do-size: 100%;

  cursor: default;

  Width: auto;

  }

  and presentation of fluid grid CSS to div's

  {#menuHorizontal}

  Clear: both;

  float: left;

  left margin: 0;

  display: block;

  }

  Is the current page to the http://www.bedroomandmore.com/1_b_fluidGrid.html

  Thank you very much!

  Thank you Al,.

  Use the w3 validator I've corrected everything except one point, where it is said there was a string of code, when in fact there was only my tag closure at the bottom of the page.

  ... still can't seem to get the menu bar horizontal Spry back to left well aligned.

  Correction:

  I had css for fluid grid layout div for the bar of menus with a set width:

  {#menuHorizontal}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  Thank you

  Eric

• Is it possible to position a horizontal Spry menu bar exactly?

  You can position a horizontal Spry menu bar in a particular place? For example at the bottom of the header div? I can't find where this is set in CSS and my reference manuals note this.

  Put your spry menu in your header div is not a good idea.  When you set the header rules, the menu will be affected.  I gave you the code

  put the spry menu here

  Highlight 'Insert menu spry here' and insert your spry menu.

  Put the code above after the closing of your head tag

  Make sure the css for the header and menu bar are the same width and postitioning.

  Gary

• Problem with the 2.0 (1.0) Spry menu bar re - CSS

  Hello:

  I'm having some trouble with a Spry (horizontal) 2.0 (1.0) menu bar I created.  Initially, I thought the problem was in what concerns the problems of rendering on IE 6.0, but the problem seems to be more general than that, and I came to believe that this has to do with the CSS created by the browser Widget and changed once imported in the Web page.  That's why I chose to post my question here rather than on the spry page.

  I leaned on the tutorial provided by David Powers (Bayside.css) and in addition any other documentation regarding the Spry UI bar menu.  The problem appeared as one of the 6 IE rendered page with a gap that is created when the menus appear, so push down the divs that appear below the page.

  However, through a laborious process of trial and error, my problem now seems to be that when I export the CSS generated by the browser widget to an external style sheet (the style sheet General governing the whole of the site), he comes into conflict with other CSS styles for links etc.  The end result is that all the padding, background colors, background images, and colors of text are lost.  As long as the CSS is in the head that this does not happen.

  My thought is that this must have to do with the problems of specificity, inheritance, etc.

  The site is available at the following ADDRESS: http://www.aclco.org/testing/index.html.  In its current form, all the CSS associated with the menu bar is located at the head of each page.  (see CSS below).

  My question is I can set up a separate style sheet for the menu bar horizontally and have these styles applied specifically (and only) in the menu bar my only alternative is to work through the rest of the General style sheet and the work by problems of specificity/inheritance - that may be the "best" practice , but it may create another 'cascading' [sic] problems elsewhere.

  Advice or suggestions or directed readings (which would point to a solution) that could be offered would be greatly appreciated.

  Steve Webster

  The horizontal CSS governing the menu bar is as follows: (currently the following CSS is embedded in the web page's head)
  

  < style type = "text/css" >

  / * - Start styles horizontal Spry Menu Widget 2.0 (1.0) menu bar-* /.

  
  / * BeginOAWidget_Instance_2141544: #MenuBar * /.
  / * Values for skinning a basic through presets menu. If the default settings are not sufficient, most count should be done in
  These rules, except for the images used to down or to the right pointing arrows, located in the SpryMenuBasic.css file
  
  They take the following classes of widget for layout of menu (located in a "Preset")
  . MenuBar - applies to all menu bars - default is a horizontal bar, all submenus are vertical - level 2 subs and beyond are drop down to the right.
  . MenuBarVertical - vertical main bar; All submenus are drop down to the right.
  
  You can also pass in extra classnames to set your desired top-level menu bar layout. Normally, they are defined by using a predefined setting.
  They apply only to the horizontal menu bars:
  MenuBarLeftShrink - the menu bar will be horizontally "shrinkwrapped" be just big enough to hold his items and left-aligned
  MenuBarRightShrink - as MenuBarLeftShrink, but right-aligned
  MenuBarFixedLeft - set to a specified width defined in rule "." MenuBarFixedLeft', and left-aligned.
  MenuBarFixedCentered - Fixed to a specified width defined in rule "." MenuBarFixedCentered',.
  and centered in its parent container.
  MenuBarFullwidth - expands to fill the width of the parent container.
  
  In general, all the rules specified in this file are prefixed by #MenuBar so that they don't apply to instances of the widget inserted along
  with the rules. This allows use of multiple MenuBarBasic widgets on the same page with different layouts. Due to limitations in IE6.
  There are a few rules where this was not possible. These rules are so noted in the comments.
  
  */

  {#MenuBar}
  background-color: transparent;
  do-family: Arial, Helvetica, without serif. / * Specify the fonts on the bar menu and submenu MenuItemContainer, so MenuItemContainer.
  MenuItem and MenuItemLabel
  at a given level all use the same definition for ems.
  Note that this means that the size is also inherited from the submenus of the child,
  so be careful when using other than relative sizes
  100% on the fonts submenu. */
  make-weight: normal;
  font size: 17px;
  make-style: normal;
  padding: 0;
  
  }
  / * ATTENTION: because ID + class selectors do not work correctly in IE6, but we want to restrict these rules to all this
  instance of widget, we used the concatenated string classnames to our selectors for the type of layout of the menu bar
  in this section. These have very low specificity, so be careful not to overstep accidentally. */

  . MenuBar br {/ * using only a class, so there same specificity that the "."} MenuBarFixedCentered br' rule bleow * /.
  display: none;
  }
  . {MenuBarLeftShrink}
  float: left; / * shrink the content, but also to float the menu bar * /.
  Width: auto;
  }
  . {MenuBarRightShrink}
  float: right; / * shrink the content, but also to float the menu bar * /.
  Width: auto;
  }
  . {MenuBarFixedLeft}
  float: left;
  Width: 80em;
  }
  . {MenuBarFixedCentered}
  float: none;
  Width: 80em;
  margin-left: auto;
  margin-right: auto;
  }
  . MenuBarFixedCentered br {}
  Clear: both;
  Display: block;
  }
  . MenuBarFixedCentered. Submenu br {}
  display: none;
  }
  . {MenuBarFullwidth}
  float: left;
  Width: 100%;
  }

  / * Top level bar small objects - these actually apply to all items and get substituted for the submenus level 1st or successive * /.
  #MenuBar. {MenuItemContainer}
  padding: 0px 0px 0px 0px;
  margin: 0;     / * Zero margin on the containers of items. The MenuItem is the active area of hover.
  For most elements, we have padding top or bottom or border only on MenuItem
  or a child so we keep all tiled submenu with elements.
  Definition of this 0 avoids the "dead zones" to hover. */
  }
  #MenuBar. {}, MenuItem
  padding: 10px 10px 10px 4px;
  background-color: #000088;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/navigation%20Bar%20Segm ent - Dark.png);
  background-repeat: repeat-x;
  
  }
  #MenuBar. {MenuItemFirst}
  border-style: none none no none;
  }
  #MenuBar. {MenuItemLast}
  border-style: none none no none;
  }

  #MenuBar. MenuItem. {MenuItemLabel}
  text-align: center;
  line-height: 1.4em;
  color: #ffffff;
  background-color: transparent;
  padding: 0px 18px 0px 5px;
  Width: 10em;
  Width: auto;
  }
  . SpryIsIE6 #MenuBar. MenuItem. {MenuItemLabel}
  Width: 1em; / * Equivalent to min-width in modern browsers * /.
  }

  / * First level of submenu items * /.
  #MenuBar. Submenu. {}, MenuItem
  do-family: Arial, Helvetica, without serif.
  make-weight: bold;
  font size: 15px;
  make-style: normal;
  background-color: #000088;
  padding: 0px 2px 0px 0px;
  border-width: 0px;
  border color: #cccccc #cccccc #cccccc #cccccc.
  / * Border styles are replaced by first and last items * /.
  border-style: solid solid no solid;
  }
  #MenuBar. Submenu. {MenuItemFirst}
  border-style: none;
  padding: 0px;
  }
  #MenuBar. Submenu. MenuItemFirst. {MenuItemLabel}
  padding-top: 0px;
  }
  #MenuBar. Submenu. {MenuItemLast}
  border-style: none none no none;
  }
  #MenuBar. Submenu. MenuItemLast. {MenuItemLabel}
  padding-bottom: 10px;
  }
  #MenuBar. Submenu. MenuItem. {MenuItemLabel}
  text-align: left;
  line-height: 1em;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  Width: 240px;
  
  }

  / * Hover States for containers, objects and labels * /.
  #MenuBar. {MenuItemHover}
  background-color: #2E35A3;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/navigation%20Bar%20Segm ent%20Light2.png);
  background-repeat: repeat-x;
  
  }

  #MenuBar. MenuItemWithSubMenu.MenuItemHover. {MenuItemLabel}
  background-color: transparent; / * expose this propeller separately * /.
  color: #ffffff;
  }
  #MenuBar. MenuItemHover. {MenuItemLabel}
  background-color: transparent;
  color: #ffffff;
  }
  #MenuBar. Submenu. {MenuItemHover}
  background-color: #2E35A3;
  
  }

  #MenuBar. Submenu. MenuItemHover. {MenuItemLabel}
  background-color: transparent;
  color: #ffffff;
  }
  / * The submenu - first-level submenus properties * /.
  #MenuBar. {SubMenuVisible}
  background-color: transparent;
  min-width: 0%;  / * This prevents the menu being lean that the parent MenuItemContainer - but not available on ie6 nice to have * /.
  border-style: none none no none;
  }
  #MenuBar.MenuBar. SubMenuVisible {/ * menu bar horizontally for only * /}
  top: 100%;    / * 100% is at the bottom of menuItemContainer parent * /.
  left: 0px; / * "left" may need tuning according to borders or padding applied to the bar MenuItemContainer or MenuItem,.
  and your personal taste.
  0px align left drop-down list with the content of the MenuItemContainer area. Assuming you keep the margins 0
  on MenuItemContainer and on the parent MenuItem
  menu bar, which in fact equals the sum of padding-left MenuItemContainer & MenuItem align
  the drop-down menu to the left of the menu item label.*.
  z-index: 10;
  }
  #MenuBar.MenuBarVertical. {SubMenuVisible}
  Top: 0px;
  left: 100%;
  min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
  }
  / * The sous-menu--deuxieme submenu level properties and beyond - are visible to descendants. MenuLevel1 * /.
  #MenuBar. MenuLevel1. {SubMenuVisible}
  background-color: transparent;
  min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
  Top: 0px;    / * If you want, you can move this down a smidge to separate the top item "submenu s of menubar.
  It is really necessary only for the submenu on the first point of MenuLevel1, or you can make it negative to make the submenu
  vertically 'centered' about his call to * /.
  left: 100%; / * If you want to move the submenu on the left to partially cover the point of his call, you can add a margin to the left with a
  negative value to this rule. Alternatively, if you use the elements of fixed width, you can change this value on the left
  to use px or ems to get the desired offset. */
  }
  / * IE6 rules - you can remove these if you do not want to support IE6 * /.

  / * Note about several classes in IE6.
  Some rules above use several class names to an element of selection, such as "hover" (MenuItemHover) and 'a a submenu' (MenuItemWithSubMenu).
  * give the selector '. MenuItemWithSubMenu.MenuItemHover'.
  * Unfortunately, IE6 does not support using mutiple classnames in a selector for an element. For a selector like '. foo.bar.baz', IE6 does not take into account
  * all but the final classname (here, ".baz") and defines the specificity in consequence, with only one of these classs as significant. To work around this problem
  * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate classnames for IE6, such as "MenuItemWithSubMenuHover".
  * Given that many of these necessary, the plugin does not generate additional classes for modern browsers, and we use the copies of CSS2 style class
  * syntax for that. Since IE6, both apply the rules where the
  * It should not and gets the specificity wrong too, we have rules of order carefully, then misapplied rule in IE6 can be overridden.
  * So we put first the multiple class rule. IE6 wrongly apply this rule.  We follow this with the single class rule that it would be
  * replace by mistake, by ensuring that the specificity of IE6 interpreted as is the same as the unique class selector, so the latter wins.
  * We then create a copy of the rule of multiple class, adding a "." SpryIsIE6' in the context of the class and to ensure that the specificity
  * the selector is high enough to beat the rule of single class in the case of "match of these two classes. We place the rule of IE6 at the end of the
  * block of css styling to make it easy to remove if you want to drop support for IE6.
  * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
  * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the need of IE conditional comments to these rules.
  */
  . SpryIsIE6 #MenuBar. MenuBarView. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
  background-color: transparent; / * expose this propeller separately * /.
  color: #ffffff;
  }
  . SpryIsIE6 #MenuBar. MenuBarView. Submenu. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
  background-color: transparent; / * expose this propeller separately * /.
  color: #ffffff;
  }
  . SpryIsIE6 #MenuBar. Submenu. Submenu / * selector IE6 * /}
  left margin:-0px; / * Offset at least part of a version of 'double upholstery' bug IE6 'double margin "* /.
  }

  
  / * EndOAWidget_Instance_2141544 * /.

  / * End Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles * /.

  
  < / style >

  The CSS for the site in general is reproduced below: (my belief is that it is a: link, a: visited, a: hover, a: active styles that may be in conflict).

  @charset "utf-8";

  
  {body
  Police: 100% Verdana, Arial, Helvetica, without serif.
  min-height: 0; / * this is necessary to overcome the "haslayout" bug found in Windows 7 in conjunction with IE8.  For more information see: URL - http://reference.sitepoint.com/css/haslayout.html * /
  margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.
  padding: 0;
  text-align: center; / * This allows the centering of the container and overcomes an inherent bug in IE 5 * /.
  Color: #000000;
  list-style-image: none;
  background-color: #FCFCFC;
  
  }

  H1, h2, h3, h4, h5, h6 {}

  color: #000066;

  }

  a: link {}
  color: #151A 96.
  text-decoration: underline;
  }
  a: visited {}
  text-decoration: underline;
  color: #1B8DCD;
  }
  a: hover {}
  text-decoration: none;
  color: #F30A0A;
  }
  a: active {}
  text-decoration: underline;
  color: #151A 96.
  }

  #container {}
  Width: 960px;
  margin: 0 auto; / * margins (in conjunction with a width) auto Center the page * /.
  text-align: left; / * This setting overrides the text-align: center on the body element. */
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
  background-repeat: repeat-y;
  }

  #header {}
  padding: 0;  / * This filling is the alignment to the left of the items in the div that appear below. If an image is used in the #header instead of text, you can remove the padding. */
  
  Width: 960px;
  height: 332px;
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
  background-repeat: repeat no.;
  }

  
  #header h1 {}
  
  margin-right: 0px; / * zero setting of the margin of the last element in the #header div tag will prevent the collapse of margin - inexplicable space between divs. If the div has a border around it, this isn't necessary, which also allows to avoid the collapse of margin * /.
  padding: 0; / * padding instead of margin will allow you to keep the edges of the div element * /.
  display: none;

  }

  #header img {}
  display: none;
  }

  {#Main_nav_contents}
  padding: 0;
  margin-top: 0px;
  height: 39px;
  Width: 950px;
  padding-top: 275px;
  padding-left: 39px;
  z index: 3;
  
  }

  {#MenuBarVertical}
  margin-bottom: 50px;
  padding-top: 50px;
  padding-bottom: 200px;
  padding-left: 15px;
  padding-right: 15px;
  
  }

  
  {.mainContent_left}
  margin: 0; / on this div element right margin creates the column on the right side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the content of #sidebar1 is complete. */
  padding-left: 30px;
  padding-right: 20px; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
  Width: 600px;
  float: left;
  }

  
  {.sidebar_right}
  float: right; / * because this element is floating, it takes a width * /.
  Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
  top of the margin: 30px;
  margin-left: 0;
  margin-right: 10px;
  font-size: 90%;
  
  }
  
  {.mainContent_right}
  margin-left: 10px;
  padding-left: 30px;
  padding-right: 20px;
  Width: 600px;
  float: right;
  
  }
  
  {.sidebar_left}
  float: left; / * because this element is floating, it takes a width * /.
  Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
  top of the margin: 30px;
  margin-left: 30px;
  margin-right: 0;
  overflow: hidden;
  font-size: 90%;
  
  }
  
  {.main_content_centered}
  Width: 650px;
  margin left: 155px;
  
  }

  {.main_content_centered_header}
  margin left: 75px;

  
  }

  {.sidebar_textbox}
  margin: 0px;
  Width: 260px;
  padding: 2px;
  }

  
  {.sidebar_textbox_header}

  Width: 255px;
  height: 58px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20he ader.png);

  }

  {.sidebar_textbox_background_middle}

  Width: 255px;
  padding-top: 12px;
  padding-bottom: 10px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20Mi ddle.png);
  background-repeat: repeat-y;
  }

  {.sidebar_textbox_content}
  / * The width and filling are fixed as follows to reflect the quirks in the rendering of the browser while ensuring that the text is contained in the background of the text box * /.
  
  Width: 230px;
  padding-left: 20px;
  padding-right: 40px;
  }

  {.sidebar_textbox_footer}

  Width: 255px;
  height: 64px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20Foo ter.png);

  }

  #issues_menu a: link {}
  color: #151A 96.
  text-decoration: none;
  make-weight: bold;
  
  }

  
  #issues_menu a: visited {}
  color: #151A 96.
  make-weight: bold;
  text-decoration: none;

  }

  #issues_menu a: hover {}
  color: #F30A0A;
  make-weight: bold;
  make-style: oblique;
  text-decoration: none;
  
  }

  #issues_menu a: active {}
  color: #151A 96.
  make-weight: bold;
  text-decoration: none;
  
  }

  {#archives}
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 0px;

  }

  {.landscape_textbox}
  Width: 500px;
  margin-right: 0px;
  margin left: 30px;
  padding-top: 35px;.
  padding-bottom: 25px;
  make-style: normal;
  make-weight: normal;

  }

  {.landscape_textbox_hdr}

  Width: 500px;
  height: 38px;
  margin: auto;
  padding: 0;
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
  
  }

  {.landscape_textbox_middle}

  Width: auto;
  margin: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/landscapte%20Textbox%20 Middle.png);
  background-repeat: repeat-y;
  
  }

  {.landscape_textbox_content}

  Width: 450px;
  Padding: 25px;
  }

  {.landscape_textbox_ftr}

  Width: 500px;
  height: 44px;
  margin: auto;
  padding: 0;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/Landscape%20Textbox%20F ooter.png);

  }

  
  #footer {}
  padding: 0; / * This filling is the alignment to the left of the items in the div that appear above him. */
  Width: 960px;
  height: 222px;
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
  background-repeat: repeat no.;
  
  }

  #footer p {}
  margin: 0px; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
  padding: 0px; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
  text-align: center;
  margin-left: 50px;
  right margin: 50px;
  padding: 10px;
  font size: small;
  }
  
  #footer h5 {}

  text-align: center;

  }

  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
  float: right;
  left margin: 8px;
  }
  .fltlft {/ * this class can be used to float an element on your page to the left * /}
  float: left;
  right margin: 8px;
  }
  .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
  Clear: both;
  height: 0;
  font size: 1px;
  line-height: 0px;
  }

  
  {.dropcap}
  display: block;
  float: left;
  line-height: 80%;
  font size: 250%;
  make-weight: bolder;
  color: #000066;
  Padding: .1em .03em 0 0;
  }

  {.red_arrows}
  list-style-position: outside;
  list-style-image: url (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
  }

  {.blue_bullets}
  list-style-position: outside;
  list-style-image: url (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);
  }

  attention {}
  color: #F30A0A;
  font-size: x-large;
  do-family: Georgia, "Times New Roman", Times, serif;
  make-style: italic;
  Police-weight: 900;
  }
  
  {.attention_small}
  color: #F30A0A;
  font size: large;
  do-family: Georgia, "Times New Roman", Times, serif;
  make-style: italic;
  Police-weight: 900;
  }

  .table {}
  table-layout: fixed;
  
  }
  . Blue {}
  Color: #00F;
  }
  #container .mainContent_left p .blue {}
  color: #0303A 0;
  }

  Hello Steve

  Well, I checked your page in IE6 and it seems to work fine for me except that here seemes to be a little space between

• items that may be due to lack of support of .png?  In other words, if there is a little transparency on the edge of the chart?  Maybe it's more a shot in the water on my part!

  Now my suggestion to you would be to mark this thread as closed/replied and after again with just the link to the page and your question.  Short is sweet.

  Martin

• CS4 MENU HORIZONTAL SPRY DOES NOT WORK IN IE 8

  I had problems with the drop-down list of CS4 so I decided to create a clean HTML page and start from scratch. I created a new HTML page with nothing else than a horizontal menu spry, but it does not work in IE 8. Drop-down menus do not show. Nothing has been changed in all included files in DW, but I copied and pasted below.

  Any help would be greatly appreciated.

  HTML:

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
  " < html xmlns =" http://www.w3.org/1999/xhtml ">
  < head >
  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
  < title > Untitled Document < /title >
  < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
  < link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "
  < / head >

  < body >
  < ul id = "MenuBar1" class = "MenuBarHorizontal" >
  < li > < a class = "MenuBarItemSubmenu" href = "#" > item 1 < /a >
  < ul >
  < li > < a href = "#" > 1.1 < /a > < /li >
  < li > < a href = "#" > 1.2 < /a > < /li >
  < li > < a href = "#" > question 1.3 < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" > item 2 < /a > < /li >
  < li > < a class = "MenuBarItemSubmenu" href = "#" > point 3 < /a >
  < ul >
  < li > < a class = "MenuBarItemSubmenu" href = "#" > point 3.1 < /a >
  < ul >
  < li > < a href = "#" > section 3.1.1 < /a > < /li >
  < li > < a href = "#" > 3.1.2 < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" > point 3.2 < /a > < /li >
  < li > < a href = "#" > point 3.3 < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" > point 4 < /a > < /li >
  < /ul >
  < script type = "text/javascript" >
  <!--
  var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
  ->
  < /script >
  < / body >
  < / html >

  @charset "UTF-8";

  / * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

  /*******************************************************************************

  The AVAILABLE INFORMATION: Describes the box model, positioning, the order

  *******************************************************************************/

  / * The outermost container for the menu bar, an area of width auto without margin or padding * /.
  UL. MenuBarHorizontal
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  cursor: default;
  Width: auto;
  }
  / * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */
  UL. MenuBarActive
  {
  z-index: 1000;
  }
  / * Menu item containers, position of children relative to this container and are a fixed width * /.
  UL. MenuBarHorizontal li
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  position: relative;
  text-align: left;
  cursor: pointer;
  Width: 8th;
  float: left;
  }
  / * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
  UL. MenuBarHorizontal ul
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  z index: 1020;
  cursor: default;
  Width: 8.2em;
  position: absolute;
  left:-1000em;
  }
  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.
  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible
  {
  left: auto;
  }
  / * Container of menu items are same fixed width parent * /.
  UL. MenuBarHorizontal ul li
  {
  Width: 8.2em;
  }
  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
  UL. MenuBarHorizontal ul ul
  {
  position: absolute;
  margin:-5% 0 0 95%;
  }
  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible
  {
  left: auto;
  top: 0;
  }

  /*******************************************************************************

  INFORMATION DESIGN: Describes the set of colors, borders, fonts

  *******************************************************************************/

  / * Submenu containers have borders on all sides * /.
  UL. MenuBarHorizontal ul
  {
  border: 1px solid #CCC;
  }
  / * Menu items are a light grey block with padding and no text decoration * /.
  UL. MenuBarHorizontal a
  {
  display: block;
  cursor: pointer;
  background-color: #EEE;
  Padding: 0.5em 0.75em;
  Color: #333;
  text-decoration: none;
  }
  / Components menu that have mouse over or focus have a blue background and white text * /.
  UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
  {
  background-color: # 33;
  color: #FFF;
  }
  / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
  UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
  {
  background-color: # 33;
  color: #FFF;
  }

  /*******************************************************************************

  Submenu INDICATION: styles if there is a submenu in a given category

  *******************************************************************************/

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
  UL. MenuBarHorizontal a.MenuBarItemSubmenu
  {
  background-image: url (SpryMenuBarDown.gif);
  background-repeat: no-repeat;
  background-position: 50 95%;
  }
  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
  UL. MenuBarHorizontal ul a.MenuBarItemSubmenu
  {
  background-image: url (SpryMenuBarRight.gif);
  background-repeat: no-repeat;
  background-position: 50 95%;
  }
  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
  UL. MenuBarHorizontal a.MenuBarItemSubmenuHover
  {
  background-image: url (SpryMenuBarDownHover.gif);
  background-repeat: no-repeat;
  background-position: 50 95%;
  }
  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;
  }

  /*******************************************************************************

  BROWSER HACKS: hacks below should not be changed, unless you are an expert

  *******************************************************************************/

  / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
  UL. MenuBarHorizontal iframe
  {
  position: absolute;
  z index: 1010;
  Filter:alpha(opacity:0.1);
  }
  / * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
  @media screen, projection
  {
  UL. MenuBarHorizontal li. MenuBarItemIE
  {
  display: inline;
  f\loat: left;
  Background: #FFF;
  }
  }

  SpryMenuBar.js - version 0.12 - Pre - Release Spry 1.6.1
  //
  Copyright (c) 2006. Adobe Systems Incorporated.
  All rights reserved.
  //
  Redistribution and use in source form and binary, with or without
  modification, are permitted provided that the following conditions are met:
  //
  * The redistributions of source code must retain the above copyright notice
  This list of conditions and the following disclaimer.
  * The redistributions in binary form must reproduce the above copyright notice
  This list of conditions and the following disclaimer in the documentation
  and/or other documents provided with the distribution.
  * Neither the name of Adobe Systems Incorporated nor the names of its
  contributors may be used to endorse or promote products derived from this
  software without specific written permission.
  //
  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS WHAT.
  AND ANY EXPRESS WARRANTY OR IMPLIED, INCLUDING, BUT WITHOUT LIMITATION, THE
  GUARANTEED IMPLICIT QUALITY MARKET AND ADEQUACY HAS A PARTICULAR PURPOSE
  ARE EXCLUDED. IN NO CASE WILL THE OWNER OF THE COPYRIGHT OR CONTRIBUTORS BE
  RESPONSIBLE FOR DIRECT, INDIRECT, INCIDENTAL, SPECIAL DAMAGES, COPIES, OR
  CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PURCHASES OF)
  SUBSTITUTE PRODUCTS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  RESULTING FROM THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
  POSSIBILITY OF SUCH DAMAGES.

  /*******************************************************************************

  SpryMenuBar.js
  This file manages the JavaScript for the Spry menu bar.  You should have no need
  to change this file.  Some highlights of the object from the menu bar, is that the timers are
  used to prevent the display until the user has flown over the parent of submenus
  menu item for some time, but also a timer for when they leave a submenu to keep
  display this submenu until that timer starts.

  *******************************************************************************/

  var Spry; If (!.) Spry) Spry = {}; If (!.) Spry.Widget) Spry.Widget = {};

  Spry.BrowserSniff = function()
  {
  var b = navigator.appName.toString ();
  var up = navigator.platform.toString ();
  au var = navigator.userAgent.toString ();

  This.Mozilla = this.ie = this.opera = this.safari = false;
  var re_opera = /Opera. ([0 - 9.] *)/i;
  var re_msie = /MSIE. ([0 - 9.] *)/i;
  var re_gecko = / gecko/i;
  var re_safari = /(applewebkit|safari)-/ ([\d\.] *) / i;
  var r = false;

  If ((r = ua.match (re_opera))) {}
  This.Opera = true;
  This.version = parseFloat (r [1]);
  } else if ((r = ua.match (re_msie))) {}
  This.IE = true;
  This.version = parseFloat (r [1]);
  } else if ((r = ua.match (re_safari))) {}
  This.Safari = true;
  This.version = parseFloat (r [2]);
  } else if (ua.match (re_gecko)) {}
  var re_gecko_version = /rv:\s*([0-9\.]_+) / i;
  r = ua.match (re_gecko_version);
  This.Mozilla = true;
  This.version = parseFloat (r [1]);
  }
  This.Windows = this.mac = this.linux = false;

  This. Platform = ua.match (/ windows/i)? "windows":
  (ua.match (/ linux/i)?) "linux":
  (ua.match (/ mac/i)?) "mac":
  UA.match (/ unix/i)? (('unix': 'unknown'));
  [this. Platform] = true;
  This.v = this.version;

  If (this.safari & & this.mac & & this.mozilla) {}
  This.Mozilla = false;
  }
  };

  Spry.is = new Spry.BrowserSniff ();

  Constructor for the Menu bar
  element must be an ID of an unordered list (< ul > tag)
  preloadImage1 and preloadImage2 are images for the rollover a State menu
  Spry.Widget.MenuBar = function (element, opts)
  {
  This.init (element, opts);
  };

  Spry.Widget.MenuBar.prototype.init = function (element, opts)
  {
  This.Element = this.getElement (element);

  represents the menu (under-) current, in that we operate
  this.currMenu = null;
  this.showDelay = 250;
  this.hideDelay = 600;
  If (typeof document.getElementById == 'undefined' |) (navigator.vendor == 'Apple Computer, Inc.' & & typeof window.) XMLHttpRequest == "undefined"). (Spry.is.ie & & typeof document.uniqueID == 'undefined'))
  {
  deposit on older browsers not taken in charge
  return;
  }

  Difficulty of flickering images CSS IE6
  If (Spry.is.ie & & Spry.is.version < 7) {}
  try {}
  document.execCommand ("BackgroundImageCache", false, true);
  } catch (err) {}
  }

  this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
  this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
  this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
  this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
  this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;

  this.hoverClass = "MenuBarItemHover";
  this.subHoverClass = "MenuBarItemSubmenuHover";
  this.subVisibleClass = "MenuBarSubmenuVisible";
  this.hasSubClass = "MenuBarItemSubmenu;
  this.activeClass = "MenuBarActive";
  this.isieClass = "MenuBarItemIE";
  this.verticalClass = "MenuBarVertical."
  this.horizontalClass = "MenuBarHorizontal;
  this.enableKeyboardNavigation = true;

  this.hasFocus = false;
  load the overview images now
  If (OPTS)
  {
  for (var k opts)
  {
  If (typeof this [k] is "undefined")
  {
  rollover var = new Image;
  rollover. SRC = opts [k];
  }
  }
  Spry.Widget.MenuBar.setOptions (, opts);
  }

  Safari does not support the tabindex
  If (Spry.is.safari)
  this.enableKeyboardNavigation = false;

  If (this.) Element)
  {
  this.currMenu = this.element;
  var items = this.element.getElementsByTagName('li');
  for (var i = 0; i < items.length; i ++)
  {
  If (I > 0 & & this.enableKeyboardNavigation)
  .tabIndex items [i]. GetElementsByTagName ('a') [0] = '-1';

  (Items [i], element); This.Initialize
  If (Spry.is.IE)
  {
  this.addClassName (items [i], this.isieClass);
  Items [i].style.position = "static";
  }
  }
  If (this.enableKeyboardNavigation)
  {
  var self = this;
  this.addEventListener (document, 'keydown', function (e) {self.keyDown (e)}; false);
  }

  If (Spry.is.IE)
  {
  If (this.hasClassName (this.element, this.verticalClass))
  {
  This.Element.style.position = "relative";
  }
  var linkitems = this.element.getElementsByTagName ('a');
  for (var i = 0; i < linkitems.length; i ++)
  {
  . style.position linkitems [i] = 'relative ';
  }
  }
  }
  };
  Spry.Widget.MenuBar.KEY_ESC = 27;
  Spry.Widget.MenuBar.KEY_UP = 38;
  Spry.Widget.MenuBar.KEY_DOWN = 40;
  Spry.Widget.MenuBar.KEY_LEFT = 37;
  Spry.Widget.MenuBar.KEY_RIGHT = 39;

  Spry.Widget.MenuBar.prototype.getElement = function (ele)
  {
  If (ele & & typeof ele == 'string')
  return document.getElementById (ele);
  return ele;
  };

  Spry.Widget.MenuBar.prototype.hasClassName = function (ele, className)
  {
  If (! ele |! className |! ele.className | ele.className.search (new RegExp ("\\b" + className + "\\b")) == - 1).
  {
  Returns false;
  }
  Returns true;
  };

  Spry.Widget.MenuBar.prototype.addClassName = function (ele, className)
  {
  If (! ele |! className | this.hasClassName (ele, className))
  return;
  ele.className += (ele.className? "": "") + ClassName; "
  };

  Spry.Widget.MenuBar.prototype.removeClassName = function (ele, className)
  {
  If (! ele |! className |! this.hasClassName (ele, className))
  return;
  ele.className = ele.className.replace (new RegExp ("\\s*\\b" + className + "\\b", "g"), ' ');
  };

  addEventListener for the Menu bar
  join an event a tag without creating annoying HTML code
  Spry.Widget.MenuBar.prototype.addEventListener = function (element, eventType, Manager, capture)
  {
  Try
  {
  If (element.addEventListener)
  {
  element.addEventListener (eventType, Manager, capture);
  }
  Else if (element.attachEvent)
  {
  element.attachEvent ("on" + eventType, handler);
  }
  }
  catch (e) {}
  };

  menu bar createIframeLayer
  creates an IFRAME under a menu that appears above the form controls and ActiveX
  Spry.Widget.MenuBar.prototype.createIframeLayer = function (menu)
  {
  var layer = document.createElement ('iframe');
  layer.tabIndex = '-1';
  Layer.src = "' javascript: '" '; "
  layer.frameBorder = '0';
  Layer.scrolling = 'no ';
  menu.parentNode.appendChild (layer);
  
  Layer.style.Left = menu.offsetLeft + 'px ';
  Layer.style.Top = menu.offsetTop + 'px ';
  Layer.style.Width = menu.offsetWidth + 'px ';
  Layer.style.Height = menu.offsetHeight + 'px ';
  };

  menu bar removeIframeLayer
  Removes an IFRAME under a menu to reveal form and ActiveX controls
  Spry.Widget.MenuBar.prototype.removeIframeLayer = function (menu)
  {
  var layers = ((menu == this.element)? menu: menu.parentNode) .getElementsByTagName ('iframe');
  While (layers.length > 0)
  {
  layers [0].parentNode.removeChild (Layers [0]);
  }
  };

  menu bar clearMenus
  root is the unordered list of high level (< ul > tag)
  Spry.Widget.MenuBar.prototype.clearMenus = function (root)
  {
  var menus = root.getElementsByTagName ('ul');
  for (var i = 0; i < menus.length; i ++)
  this.hideSubmenu (menus [i]);

  this.removeClassName (this.element, this.activeClass);
  };

  menu bar bubbledTextEvent
  identify bubbled events text in Safari, so we can ignore
  Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
  {
  return Spry.is.safari & & (event.target == event.relatedTarget.parentNode |) (event.eventPhase == 3 & & event.target.parentNode == event.relatedTarget)) ;
  };

  menu bar showSubmenu
  set the CSS class on this menu to show
  Spry.Widget.MenuBar.prototype.showSubmenu = function (menu)
  {
  If (this.currMenu)
  {
  this.clearMenus (this.currMenu);
  this.currMenu = null;
  }
  
  If (menu)
  {
  this.addClassName (menu, this.subVisibleClass);
  If (typeof document.all! = "undefined" & &!) Spry.is.Opera & & navigator.vendor! = 'KDE')
  {
  If (! this.hasClassName (this.element, this.horizontalClass): menu.parentNode.parentNode! = this.element)
  {
  menu.style.Top = menu.parentNode.offsetTop + 'px ';
  }
  }
  If (Spry.is.ie & & Spry.is.version < 7)
  {
  this.createIframeLayer (menu);
  }
  }
  this.addClassName (this.element, this.activeClass);
  };

  menu bar hideSubmenu
  delete the CSS class on this menu to hide
  Spry.Widget.MenuBar.prototype.hideSubmenu = function (menu)
  {
  If (menu)
  {
  this.removeClassName (menu, this.subVisibleClass);
  If (typeof document.all! = "undefined" & &!) Spry.is.Opera & & navigator.vendor! = 'KDE')
  {
  menu.style.Top = ";
  menu.style.Left = ";
  }
  If (Spry.is.ie & & Spry.is.version < 7)
  this.removeIframeLayer (menu);
  }
  };

  initialization of the Menu bar
  create listeners for events for the widget bar of menus so that we can properly
  show and hide sub-menus
  Spry.Widget.MenuBar.prototype.initialize = function (listitem, element)
  {
  var opentime, closetime;
  link var = listitem.getElementsByTagName ('a') [0];
  submenus var = listitem.getElementsByTagName ('ul');
  var menu = (submenus.length > 0? submenus [0]: null);

  If (menu)
  this.addClassName (link, this.hasSubClass);

  If (!.) Spry.is.IE)
  {
  define a simple function which comes standard in Internet Explorer to determine
  If a node is in another node
  ListItem.Contains = function (testNode)
  {
  It's the list item
  if(testNode == null)
  Returns false;

  if(testNode == This)
  Returns true;
  on the other
  Return this.contains (testNode.parentNode);
  };
  }

  need to set this to reach lower
  var self = this;
  this.addEventListener (listitem, "mouseover", Function {self.mouseOver (listitem, e)}; false);
  this.addEventListener (listitem, 'mouseout/mouseouthandler()', Function {if (self.enableKeyboardNavigation) self.clearSelection (); self.mouseOut (listitem, e);}, false);

  If (this.enableKeyboardNavigation)
  {
  this.addEventListener (link, 'blur', function (e) {self.onBlur (listitem)}; false);
  this.addEventListener (link, 'focus', Function {self.keyFocus (listitem, e)}; false);
  }
  };
  Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e As EventArgs)
  {
  this.lastOpen = listitem.getElementsByTagName ('a') [0];
  this.addClassName (this.lastOpen, listitem.getElementsByTagName('ul').length > 0? this.subHoverClass: this.hoverClass);
  this.hasFocus = true;
  };
  Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
  {
  this.clearSelection (listitem);
  };
  Spry.Widget.MenuBar.prototype.clearSelection = {function (el)}
  search any intersection with the open current item
  If (! this.lastOpen)
  return;

  If (el)
  {
  El = el.getElementsByTagName ('a') [0];
  
  check children
  var point = this.lastOpen;
  While (article! = this.element)
  {
  var tmp = el;
  While (tmp! = this.element)
  {
  If (tmp is point)
  return;
  try {}
  tmp = tmp.parentNode;
  } catch (err) {break ;}
  }
  Item = item.parentNode;
  }
  }
  var point = this.lastOpen;
  While (article! = this.element)
  {
  this.hideSubmenu (item.parentNode);
  link var = item.getElementsByTagName ('a') [0];
  this.removeClassName (link, this.hoverClass);
  this.removeClassName (link, this.subHoverClass);
  Item = item.parentNode;
  }
  this.lastOpen = false;
  };
  Spry.Widget.MenuBar.prototype.keyDown = function (e)
  {
  If (! this.hasFocus)
  return;

  If (! this.lastOpen)
  {
  this.hasFocus = false;
  return;
  }

  var e = e | event;
  ListItem var = this.lastOpen.parentNode;
  var this.lastOpen = link;
  submenus var = listitem.getElementsByTagName ('ul');
  var menu = (submenus.length > 0? submenus [0]: null);
  var hasSubMenu (menu) =? true: false;

  opts var = [listitem, menu, null, this.getSibling (listitem, 'previousSibling'), this.getSibling (listitem, 'nextSibling')];
  
  If (! opts [3])
  opts [2] = (listitem.parentNode.parentNode.nodeName.toLowerCase () == 'li')? listitem.parentNode.parentNode:null;

  var found = 0;
  switch (e.keyCode) {}
  case this.upKeyCode:
  found = this.getElementForKey (opt, 'y', 1);
  break;
  case this.downKeyCode:
  found = this.getElementForKey (opt, 'y',-1);
  break;
  case this.leftKeyCode:
  found = this.getElementForKey (opt, 'x', 1);
  break;
  case this.rightKeyCode:
  found = this.getElementForKey (opt, 'x',-1);
  break;
  case this.escKeyCode:
  case 9:
  this.clearSelection ();
  this.hasFocus = false;
  default: return;
  }
  switch (found)
  {
  case 0: return End Function
  case 1:
  subopts
  this.mouseOver (listitem, e);
  break;
  case 2:
  parent
  this.mouseOut (opts [2], e);
  break;
  case 3:
  case 4:
  left - right
  this.removeClassName (link, hasSubMenu? this.subHoverClass: this.hoverClass);
  break;
  }
  var link is opts [found] .getElementsByTagName ('a') [0];.
  If (opts [found].nodeName.toLowerCase () is "ul")
  opts [found] = opts [found] .getElementsByTagName ('li') [0];

  this.addClassName (link, opts [found].getElementsByTagName('ul').length > 0? this.subHoverClass: this.hoverClass);
  this.lastOpen = link;
  OPTS [found]. GetElementsByTagName ('a') [0]. Focus();
  
  stop the new management of the events by the browser
  Return Spry.Widget.MenuBar.stopPropagation (e);
  };
  Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e As EventArgs)
  {
  link var = listitem.getElementsByTagName ('a') [0];
  submenus var = listitem.getElementsByTagName ('ul');
  var menu = (submenus.length > 0? submenus [0]: null);
  var hasSubMenu (menu) =? true: false;
  If (this.enableKeyboardNavigation)
  this.clearSelection (listitem);

  If (this.bubbledTextEvent ())
  {
  ignore the propagated events text
  return;
  }

  If (listitem.closetime)
  clearTimeout() (listitem.closetime);

  if(this.currMenu == ListItem)
  {
  this.currMenu = null;
  }

  move the focus too
  If (this.hasFocus)
  Link.Focus ();

  the menu highlighted
  this.addClassName (link, hasSubMenu? this.subHoverClass: this.hoverClass);
  this.lastOpen = link;
  If (menu & &! this.hasClassName (menu, this.subHoverClass))
  {
  var self = this;
  ListItem.OpenTime = window.setTimeout (function () {self.showSubmenu (menu)}; this.showDelay);
  }
  };
  Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e As EventArgs)
  {
  link var = listitem.getElementsByTagName ('a') [0];
  submenus var = listitem.getElementsByTagName ('ul');
  var menu = (submenus.length > 0? submenus [0]: null);
  var hasSubMenu (menu) =? true: false;
  If (this.bubbledTextEvent ())
  {
  ignore the propagated events text
  return;
  }

  var related = (typeof e.relatedTarget! = "undefined"? e.relatedTarget: e.toElement);
  If (!) ListItem.Contains (related))
  {
  If (listitem.opentime)
  clearTimeout() (listitem.opentime);
  this.currMenu = listitem;

  remove menu highlighting
  this.removeClassName (link, hasSubMenu? this.subHoverClass: this.hoverClass);
  If (menu)
  {
  var self = this;
  ListItem.closetime = window.setTimeout (function () {self.hideSubmenu (menu)}; this.hideDelay);
  }
  If (this.hasFocus)
  Link.Blur ();
  }
  };
  Spry.Widget.MenuBar.prototype.getSibling = function (element, siblings)
  {
  var = element [brother] child;
  While (child & & child.nodeName.toLowerCase ()! = "li")
  child = child [brother];

  return of child;
  };
  Spry.Widget.MenuBar.prototype.getElementForKey = function (SLE, prop, dir)
  {
  var found = 0;
  var Rect = Spry.Widget.MenuBar.getPosition;
  Var ref = rect (els [found]);

  var hideSubmenu = false;
  make the visible subitem to calculate the position
  If (els [1] & &! this.hasClassName (els [1], this.)) MenuBarSubmenuVisible))
  {
  . style.visibility Els [1] = "hidden";
  this.showSubmenu(els[1]);
  hideSubmenu = true;
  }

  var isVert = this.hasClassName (this.element, this.verticalClass);
  hasParent var = els [0].parentNode.parentNode.nodeName.toLowerCase () == 'li '? true: false;
  
  for (var i = 1; i < els.length; i ++) {}
  When you browse the y-axis in the menus vertical, ignore the children and parents
  If (prop == 'y' & & isVert & & (i == 1 | I == 2))
  {
  continue;
  }
  When navigationg on the x axis in the horizontal menu LEVEL FIRST, ignore the children and parents
  If (prop == 'x' & &! isVert & &! hasParent & & (i == 1 | I == 2))
  {
  continue;
  }
  
  If (els [i])
  {
  var tmp = rect (els [i]);
  If ((dir * tmp[prop]) < (dir * ref [prop]))
  {
  REF = tmp;
  found = i;
  }
  }
  }
  
  In return hide the submenu
  If (els [1] & & hideSubmenu) {}
  this.hideSubmenu(els[1]);
  . style.visibility Els [1] = ";
  }

  return found;
  };
  Spry.Widget.MenuBar.camelize = function (str)
  {
  If (str.indexOf('-') ==-1) {}
  return str;
  }
  var oStringList = str.split('-');
  var isFirstEntry = true;
  var camelizedString = ";

  for (var i = 0; i < oStringList.length; i ++)
  {
  If (oStringList [i] .length > 0)
  {
  If (isFirstEntry)
  {
  camelizedString = oStringList [i];
  isFirstEntry = false;
  }
  on the other
  {
  var s = oStringList [i];
  camelizedString += s.charAt (0) .toUpperCase () + s.substring (1);
  }
  }
  }

  Return camelizedString;
  };

  Spry.Widget.MenuBar.getStyleProp = function (element, prop)
  {
  var value;
  Try
  {
  If (element.style)
  value = element.style [Spry.Widget.MenuBar.camelize (prop)];

  If (! value)
  If (document.defaultView & & document.defaultView.getComputedStyle)
  {
  CSS var = document.defaultView.getComputedStyle (item, null);
  value = css? css.getPropertyValue (prop): null;
  }
  Else if (element.currentStyle)
  {
  value = element.currentStyle [Spry.Widget.MenuBar.camelize (prop)];
  }
  }
  catch (e) {}

  return value == 'auto '? NULL: value;
  };
  Spry.Widget.MenuBar.getIntProp = function (element, prop)
  {
  var a = parseInt (Spry.Widget.MenuBar.getStyleProp (item, prop), 10);
  If (isNaN (a))
  return 0;
  return a;
  };

  Spry.Widget.MenuBar.getPosition = function (el, doc)
  {
  doc = doc. document;
  If (typeof (el) == 'string') {}
  El = doc.getElementById (el);
  }

  If (! el) {}
  Returns false;
  }

  If (el.parentNode = null |) Spry.Widget.MenuBar.getStyleProp (el, 'display') == 'none') {}
  the element must be visible to have a box
  Returns false;
  }

  var ret = {x: 0, y: 0};
  var parent = null;
  var box;

  If (el.getBoundingClientRect) {/ / IE}
  box = el.getBoundingClientRect ();
  scrollTop var = doc.documentElement.scrollTop | doc.body.scrollTop;
  scrollLeft var = doc.documentElement.scrollLeft | doc.body.scrollLeft;
  RET.x = box.left + scrollLeft;
  RET.y = box.top + scrollTop;
  } Else if (doc.getBoxObjectFor) {/ / gecko}
  box = doc.getBoxObjectFor (el);
  RET.x = box.x;
  RET.y = box.y;
  } else {/ / safari/opera}
  RET.x = el.offsetLeft;
  RET.y = el.offsetTop;
  parent = el.offsetParent;
  If (parent! = el) {}
  While (parent) {}
  RET.x += parent.offsetLeft;
  RET.y += parent.offsetTop;
  parent = parent.offsetParent;
  }
  }
  Opera & (absolute safari) represent bad body offsetTop
  If (Spry.is.opera |) Spry.is.Safari & & Spry.Widget.MenuBar.getStyleProp (el, 'position') == 'absolute')
  RET.y = doc.body.offsetTop;
  }
  If (el.parentNode)
  parent = el.parentNode;
  on the other
  parent = null;
  If {(parent.nodeName)
  var No. case = parent.nodeName.toUpperCase ();
  While (parent & & case! = "BODY" & & case! = 'HTML') {}
  No case = parent.nodeName.toUpperCase ();
  RET.x = parent.scrollLeft;
  RET.y = parent.scrollTop;
  If (parent.parentNode)
  parent = parent.parentNode;
  on the other
  parent = null;
  }
  }
  return ret;
  };

  Spry.Widget.MenuBar.stopPropagation = function (ev)
  {
  If (ev.stopPropagation)
  ev.stopPropagation ();
  on the other
  ev.cancelBubble = true;
  If (ev.preventDefault)
  ev.preventDefault ();
  on the other
  ev.returnValue = false;
  };

  Spry.Widget.MenuBar.setOptions = function (obj, optionsObj, ignoreUndefinedProps)
  {
  If (! optionsObj)
  return;
  for (var optionName in optionsObj)
  {
  If (ignoreUndefinedProps & & optionsObj [Optionname] == undefined)
  continue;
  obj [Optionname] = optionsObj [Optionname];
  }
  };

  It may be an idea to enable active scripting in your browser on

• Using CSS - positioning horizontal spry menu

  I built a menu horizontal Spry amounting to 800 px of width and horizontally centered in a div.

  But I put the height of the menu bar to 2 ems to try to force the div parent having the same height as the menu bar. I don't think it's the right approach:

  (1) I read somewhere that it is not advisable to adjust the height of the menu items. and

  (2) to the opera (only tested in Opera, Safari, Firefox), I see a little extra high enough (in the gray area) under the Spry menu - I want the heights to exactly match, and actual size when a user resizes the text and the menu bar grows.

  2 EXAMPLES:

  http://stephencoren.com/SpryMenu/index.htm -I put height: 2ems; in the Spry ul menu rule. MenuBarHorizontal

  http://stephencoren.com/SpryMenu/index_2.htm , I removed the 2 height adjustment ems. In addition to losing the color of gray background to the left and right of the menu, the content area moves upward - I guess the distance 2 em I deleted

  QUESTIONS RELATING TO THE:

  (1) what I'm doing wrong? I think it's probably some basic CSS stuff that I'm not understand.

  (2) what should I do?

  You mean that you run Windows in a virtual machine or Parallels?

  http://www.VMware.com/products/fusion/

  http://www.parallels.com/products/desktop/

  You can't out-bug for IE without IE.

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB

• partially hidden dropdowns Spry menu bar

  I created a menu bar horizontal spry with subitems which dropdown. This menu bar is in a separate div at the header level.
  
  However, when there is another div below that (in my case appears, and it contains a flash slideshow) in the drop-down list that extends below the div is not visible. Is there a way to force it to be "at the top"? I am testing with Firefox. With IE, the div with the slide show is just down - also not really what I want.

  Joe.

  You must set one of the settings of the flash file - I think that winmode to be transparent.

  I hope this helps. If you search on questions I asked - if possible - you will see that someone has answered this exact question for me. They provided more details.

• Breaks horizontal Spry Menu in IE6

  I created a menu horizontal spry using the spry widget in DreamWeaver CS3. I would like to than the width of each menu item to adjust the text (width: auto ;) and that works very well in current browsers (FireFox, IE7, Opera, Netscape), but in IE6, menu items are displayed vertically and not horizontally.) As soon as I give them a width, it appears correctly in IE6, but changes the appearance. You can see the page in question to
  
  http://www.inachordwebdesign.com/CCC/test.html
  
  Is there a way around this problem with older versions of IE?
  
  Any help would be greatly appreciated! Please let me know if I need to download any code. It's one of my first posts, so I don't know what I need to show all.
  
  Thank you!

  I was finally able to operate properly in IE6. I had been putting a height for the anchor tags in the bar menu (ul. MenuBarHorizontal a). When I removed the height and padding to give the spacing that I needed, he began to work in IE6, but also other browsers.

  I understand why it makes a difference. If anyone knows, please let me know.

  Thank you.

• Size of menu bar Spry set correctly for mobile layout when using fluid grid

  I use the horizontal spry menu bar and the checkerboard to fluid. Works fine until it is used in mobile size. The size of the navigation bar set correctly, but the text is too large for each area of the spry menu bar. Is it possible to have the text to set for the mobile structure only? Is there a way for the spry menu bar to stack vertically?

  Spry is neither sensitive nor touch the screen of the environment.  It has been discontinued & removed DW in 2013.

  Inherited liquid grid layouts will be soon abandoned as well (see press release public Beta).

  If you have a budget to work with, look at menus adapted the seven project.

  PVII Pop Menu Magic 3: the constructor only sensitive Menu for Dreamweaver

  Nancy O.

• Spry menu bar is not properly displayed in Internet Explorer.

  Hello. I just got a new computer at work, and so I had to reinstall Dreamweaver CS6. Now my spry menu bar I have in a model is all disfigured. Instead of "horizontal", it's categories listed vertically and with no style. I tried messing around with turn styles, but the problem is that the spry menu bar seems well in Dreamweaver. I can provide the code if necessary. Let me know how you want to display. Thank you very kindly in advance.

  Hi Nancy,.

  I thought about it. The error was in my site definition. I had a mistake in "web URL".
  What can make a difference of two points.

  Thank you.

• Drop-down list ADD Spry menu bar

  Hello futuristic Creative costume! It is a voice of CS3 on the past, written with a recent issue that comes to develop with our Horizontal Spry Menu. The drop-down list feature has stopped working, even if the bearings are still in tact.

  A site below is the problem child uses the same layout and menu that found on Site B, yet Site B seems to be a healthy child and active, attending the playground and kisses from girls under the Monkey bars.

  Website - www.soliusa.com

  Site B - www.solistonecommercial.com

  The two sites are in HTML and are modified with Dreamweaver CS3 v. If someone can help a diagnosis and a possible solution, I would be eternally grateful.

  Thank you for reading this far.

  Change the position of the constructor of

  TO

  In addition, be a little more critical on your markup. In the light of the foregoing, you SCRIPT, in the rest of the document, you script

  This may be nitpicking, but it does not help establish a standard. I use lowercase everywhere with the exception of defined constants.