Spry Menu Bar vs Properties Window

Dreamweaver CS4, Mac OSX 10.6.4
Not sure how I did it, but when I add a Spry Menu Bar from the Insert>Spry>Spry Menu Bar, I first get the correct dialog, asking Horizontal or Vertical (I choose Horizontal), but it comes up with a Menu Bar with Item 1, Item 2, Item 3, and Item 4. (No further dialog shows up, and Properties Window does NOT change)
How does one add a Item 5, or sub-menus???
Every video/help doc refers going to Window>Properties and adding it there. The only problem is, my Properties window looks nothing like the tutorials!!!
Again, once I choose Horizontal or Vertical, the menu appears, but the Properties window does not change.
If I click in the same Frameset pane as the menu I just created, it looks like:
And if I click on a Menu item it looks like:
It is supposed to look something like:
Where the Properties window shows the Menu Bar. How do you get to that?
I've tried reseting Dreamweaver by following the support docs, even resetting the site, and still no luck. The very first time I tried this, the Properties window did show the correct window, but I messed that doc up and trashed it. I tried starting over, and now I have the problem listed above.
Any help would be greatly appreciated! Thanks!

vw2ureg wrote:
I assume that you are working in design view in which case you should click the blue part of the menu to get the correct properties window
I hope this helps.
Ben
Ben, I would be fine if I just could see that blue area! For some reason it will not come up, and that is my problem!  -Bill

Similar Messages

  • Spry menu bar properties panel info compressed into left-hand corner

    problem viewing spry menu bar properties panel information is condensed into the lefthand side of the panel, where it overlaps itself, becoming illegible and impossible to select 

    Ben, I think the Gary is referencing a DW interface problem, not a display issue on a web page.
    It looks like the actual Properties window is corrupt.
    Gary, if this worked in the past, you might try clearing the program cache...
    http://forums.adobe.com/thread/494811
    Resetting Preferences...
    http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
    Or the nuclear option, uninstalling, cleaning and reinstalling...
    http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html

  • Spry menu bar hidden behind embedded windows media player in IE but Not Firefox

    Hi ppl.. My spry menu bar submenus are hidden below my embedded windows media player when I go over the menu. Is there anything I can do to solve this. This doesn't happen in Firefox.(The submenu appear on top of the embedded player) Pls help.. Thank you!
    Here's my spry menu bar css code:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        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: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 9em;
        float: left;
    /* 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: 9em;
        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: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 9em;
        border-bottom-width: thin;
        border-bottom-style: solid;
        border-bottom-color: #CCC;
    /* 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
        background-color: #333;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        color: #FFF;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        padding-top: 1.1em;
        padding-right: 0.75em;
        padding-bottom: 1.1em;
        padding-left: 0.75em;
        text-align: center;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #000;
        background-image: url(../images/navimg2.gif);
    /* 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
        color: #000;
    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(SpryMenuBarDown.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(../images/navimg2.gif);
        background-repeat: repeat-x;
        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;
    Here's my embedded windows media player code.
    <OBJECT ID="MediaPlayer" WIDTH="425" HEIGHT="344" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
    STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
              <PARAM NAME="FileName" VALUE="aqeedah1v7.wmv">
              <PARAM name="autostart" VALUE="true">
              <PARAM name="ShowControls" VALUE="true">
              <param name="ShowStatusBar" value="true">
              <PARAM name="ShowDisplay" VALUE="false">
              <EMBED TYPE="application/x-mplayer2" SRC="aqeedah1v7.wmv" NAME="MediaPlayer"
    WIDTH="425" HEIGHT="344" ShowControls="1" ShowStatusBar="1" ShowDisplay="0" autostart="1"> </EMBED>
    </OBJECT>

    Add
    <param name="WindowlessVideo" value="-1">

  • Spry Menu Bar hides behind embedded windows media player

    Hi guys. My Spry Menu Bar hides behind my embedded windows media player when I go over the menu with my mouse. Below is the code I used to embed my player. How can I make it transparent? Thank you!

    To the Params in your object tag, add this:
    To the attributes in your embed tag, add this:
    wmode="opaque"
    Note that z-index is totally irrelevant to Flash. also note that the Adobe Flash Player is wildly inconsistent from browser to
    browser and from OS to OS, which is one of the more valid reasons for Apple abandoning the technology's support on its touch
    devices.
    Al Sparber - PVII
    http://www.projectseven.com
    Dreamweaver Menus | Galleries | Widgets
    http://www.projectseven.com/go/hgm
    The Ultimate Web 2.0 Carousel

  • Spry Menu Bar 2.0 (1.0) - Handling of widget generated CSS, placement and rendering problems in CSS

    Hello:
    I wanted to repost my question to re-frame the issue based on what I have learned thus far.
    I am working on a website that has been developed using the Spry Menu Bar Framework UI (2.0) I.0, that has some peculiar rendering problems that affect IE 6 in particular.  The CSS is reprinted below.
    In particular, when I post the widget generated CSS in the head as it is orginally situated by the framework, the menu bar works fine.  However, it seemed to me that I should be able to reduce page weight (an important consideration considering my target population) by placing it in the general style sheet governing the entire site.
    When I place the styles at the beginning of the style sheet the menu doesn't render at all in any of the browsers (IE 6+, Firefox, Opera, Safari, Netscape, etc.) as it conflicts with the general rules governing links that appear later in the style sheet.  When I place the styles specific to the Menu bar at the end of the style sheet, then the menu bar renders properly in all browsers except IE 6.
    The odd thing is that the only way to ensure that the menu bar works in IE 6 is to keep the menu related styles in the head of each page.  This raises problems related to page weight (not an insurmountable consideration if no other solution can be found) but still an issue.  Likewise I need to support IE 6, again given the target audience/population.  The issue obviously has something to do with specificity, but I am not certain that is the only consideration at work here.  I have not tried the !important selector in regard to the menu, as IE 6 seems to only partially support this.
    Thanks in advance for any advice or insight that can be provided.  Thanks in particular to Martin for his contributions to my earlier question related to this issue.
    Steve Webster.
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
       these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
       .MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
       You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
       with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
       font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 17px;
        font-style: normal;
        padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        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 menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none 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 submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none 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, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop 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;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
       min-width:0%;  /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                       0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with 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 width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
    * all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
    * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>
    The CSS governing the site generally is reproduced below:  (my belief is that it is the a:link, a:visited,  a:hover, a:active styles that may be in conflict).
    @charset "utf-8";
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
       min-height: 0; /* This is necessary to overcome the "haslayout" bugthat is found in Windows 7 in conjuction with IE8.  For Moreinformation see: URL -- http://reference.sitepoint.com/css/haslayout.html */
        margin: 0; /* 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 allows for the centering of the container and overcomes a bug inherent in IE 5 */
        color: #000000;
        list-style-image: none;
        background-color: #FCFCFC;
    h1,h2,h3,h4,h5,h6 {
    color:#000066;
    a:link {
        color: #151A96;
        text-decoration: underline;
    a:visited {
        text-decoration: underline;
        color: #1B8DCD;
    a:hover {
        text-decoration: none;
        color: #F30A0A;
    a:active {
        text-decoration: underline;
        color: #151A96;
    #container {
        width: 960px;   
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        text-align: left; /* this 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 padding matches the left alignment of the elementsin the divs that appear beneath it. If an image is used in the #headerinstead of text, you may want to remove the padding. */
            width:960px;
            height:332px;
            background-image:
            url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960 .png);
            background-repeat:no-repeat;
    #header h1 {
        margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        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;/* the right margin on this div element creates the columndown the right side of the page - no matter how much content thesidebar1 div contains, the column space will remain. You can removethis margin if you want the #mainContent div's text to fill the#sidebar1 space when the content in #sidebar1 ends. */
        padding-left:30px;
        padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
        width: 600px;
        float: left;
    .sidebar_right {
        float: right; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 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; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 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/Por trait%20Textbox%20Header.png);
    .sidebar_textbox_background_middle {
         width: 255px;   
        padding-top: 12px;   
        padding-bottom: 10px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Middle.png);
        background-repeat: repeat-y;
    .sidebar_textbox_content {
       /* The width and padding are set as follows to accomodate quirks inbrowser rendering and to ensure that text is contained within thebackground 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/Port rait%20Textbox%20Footer.png);
    #issues_menu a:link {
        color: #151A96;
        text-decoration: none;
        font-weight:bold;
    #issues_menu a:visited {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #issues_menu a:hover {   
        color: #F30A0A;
        font-weight:bold;
        font-style: oblique;
        text-decoration: none;
    #issues_menu a:active {
        color: #151A96;
        font-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;
        font-style: normal;
        font-weight: normal;
    .landscape_textbox_hdr {
        width:500px;
        height:38px;
        margin:auto;
        padding:0;
        background-image:
    url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%2 0Header.png);
    .landscape_textbox_middle {
        width:auto;
        margin:auto;
        padding-top: 12px;
        padding-bottom: 12px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/lan dscapte%20Textbox%20Middle.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/Lan dscape%20Textbox%20Footer.png);
    #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        width: 960px;
        height: 222px;
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_ 960.png);
        background-repeat:no-repeat;
    #footer p {
       margin: 0px; /* zeroing the margins of the first element in the footerwill avoid the possibility of margin collapse - a space between divs */
        padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align:center;
        margin-left: 50px;
        margin-right: 50px;
        padding: 10px;
        font-size: small;
    #footer h5 {
    text-align:center;
    .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;
    .clearfloat { /* 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;
    .dropcap {
        display: block;
        float: left;
        line-height: 80%;
        font-size: 250%;
        font-weight: bolder;
        color: #000066;   
        padding: .03em .1em 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%20Fu ll.png);   
    .attention {
        color: #F30A0A;
        font-size:x-large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .attention_small {
        color: #F30A0A;
        font-size:large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .table {
        table-layout:fixed;
    .blue {
        color: #00F;
    #container .mainContent_left p .blue {
        color: #0303A0;

    Hi Nancy:
    The specific code that I am referring to is the CSS code governing the styling of the spry menu widget that only works in IE 6 if, and only if, it remains in the head of the web page.  If removed and placed in a stylesheet, the IE plugins fail to compensate for the IE 6 "gap" bug.  As I said, it doesn't make sense to me that, assuming specificity is addressed, that these can not be included in an external style sheet.  I am looking for a) an explanation why they must remain embedded in the web page; and 2) any means by which I might be able to export them.
    I will reproduce the specific css style (code) below:  it should also be visable through reveal source --
    Thanks again, Steve Webster.
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
       these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
       .MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
       You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
       with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
       font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 17px;
        font-style: normal;
        padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        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 menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none 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 submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none 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, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop 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;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
       min-width:0%;  /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                       0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with 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 width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
    * all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
    * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>

  • Problem with Spry Menu Bar 2.0 (1.0) re - CSS

    Hello:
    I am having some difficulty with a Spry Menu Bar (horizontal) 2.0 (1.0)  that I have created.  Initially I thought the problem was with regard to rendering issues on IE 6.0, however the problem seems to be more general than that and I have come to believe that it has to do with the CSS created by the Widget Browser and modified once imported into the webpage.  Hence I have elected to post my issue here rather than on the spry page.
    I have relied on the tutorial provided by David Powers (Bayside.css) and in addition other documentation regarding the Spry menu bar UI.  The problem appeared to be one of IE 6 rendering the page with a gap that is created when the drop down menus appear, thus pushing down any divs that appear below the page.
    However, through a painstaking process of trial and error my problem now seems to be that when I export the CSS generated by the widget browser to an external style sheet (the general style sheet governing the whole site), it conflicts with other CSS styles regarding links etc.  The end result is that all the padding, background colours, background images, and text colours are lost.  So long as the CSS remains within the head this doesn't happen.
    My thinking is that this must have to do with issues of specificity, inheritence, etc.
    The site can be viewed at the following URL: http://www.aclco.org/testing/index.html.  In its current form all CSS related to the menu bar is found in the head of each page.  (see CSS below).
    My question is can I establish a separate style sheet for the horizontal menu bar and have those styles applied specifically (and only) to the menu bar.  My only other alternative is to work through the remainder of the general style sheet and work through any issues of specificity/inheritance -- which may be the "best" practice, but it risks causing other "cascading" [sic] problems elsewhere.
    Any advice or suggestions or directed reading (that would point to a solution) that could be offered would be greatly appreciated.
    Steve Webster
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
        font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 17px;
        font-style: normal;
        padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        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 menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #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 none none;
    #MenuBar .MenuItemLast {
        border-style: none none none 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 submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none 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, items 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; /* consider exposing this prop 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;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with 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 width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * 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 necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>
    The CSS governing the site generally is reproduced below:  (my belief is that it is the a:link, a:visited,  a:hover, a:active styles that may be in conflict).
    @charset "utf-8";
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        min-height: 0; /* This is necessary to overcome the "haslayout" bug that is found in Windows 7 in conjuction with IE8.  For More information see: URL -- http://reference.sitepoint.com/css/haslayout.html */
        margin: 0; /* 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 allows for the centering of the container and overcomes a bug inherent in IE 5 */
        color: #000000;
        list-style-image: none;
        background-color: #FCFCFC;
    h1,h2,h3,h4,h5,h6 {
    color:#000066;
    a:link {
        color: #151A96;
        text-decoration: underline;
    a:visited {
        text-decoration: underline;
        color: #1B8DCD;
    a:hover {
        text-decoration: none;
        color: #F30A0A;
    a:active {
        text-decoration: underline;
        color: #151A96;
    #container {
        width: 960px;   
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        text-align: left; /* this 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 padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
            width:960px;
            height:332px;
            background-image:
            url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
            background-repeat:no-repeat;
    #header h1 {
        margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        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;/* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
        padding-left:30px;
        padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
        width: 600px;
        float: left;
    .sidebar_right {
        float: right; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 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; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 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 padding are set as follows to accomodate quirks in browser rendering and to ensure that text is contained within 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: #151A96;
        text-decoration: none;
        font-weight:bold;
    #issues_menu a:visited {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #issues_menu a:hover {   
        color: #F30A0A;
        font-weight:bold;
        font-style: oblique;
        text-decoration: none;
    #issues_menu a:active {
        color: #151A96;
        font-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;
        font-style: normal;
        font-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 padding matches the left alignment of the elements in the divs that appear above it. */
        width: 960px;
        height: 222px;
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
        background-repeat:no-repeat;
    #footer p {
        margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align:center;
        margin-left: 50px;
        margin-right: 50px;
        padding: 10px;
        font-size: small;
    #footer h5 {
    text-align:center;
    .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;
    .clearfloat { /* 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;
    .dropcap {
        display: block;
        float: left;
        line-height: 80%;
        font-size: 250%;
        font-weight: bolder;
        color: #000066;   
        padding: .03em .1em 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;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .attention_small {
        color: #F30A0A;
        font-size:large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .table {
        table-layout:fixed;
    .blue {
        color: #00F;
    #container .mainContent_left p .blue {
        color: #0303A0;

    Hello Martin:
    Thanks for your input.  However I am not certain we have resolved this issue adequately, or understand the principles governing the css as regards this spry menu framework 2.0 (1.0).
    For example, the menu only works in IE 6.0 if the css remains in the head.  I agree with your original post that it shouldn't make any difference whether the css is posted in the head or in a separate style sheet (so long as specificity issues are addressed).  Both should work -- and yet it doesn't.
    If the CSS is placed in the separate style sheet governing the total site, it doesn't work for 6.0.  If placed at the top of the style sheet, conflicts of specificity prevent the menu from rendering properly in any of the browsers causing the rules for general links to govern the menu.   This has been verified using a cross browser testing.  If the styles are placed at the bottom of the style sheet to help them take precedence, they work in all the browsers except for IE 6.
    The website I am building needs to support IE 6 for a variety of reasons, and because it is catering to the non-profit community and to low income persons, I am mindful of even small differences in page weight.
    So for me, at least, the issue remains baffling.
    I appreciate your input, but also would appreciate the input from others, and especially Adobe Community Professionals and employees.  The spry framework in this regard is not well documented.  I am not certain if this is exclusively a CSS problem, if it might also be complicated by the architecture of the spry framework, or if indeed other variables are at play.
    I would be my hope that in resolving the problem, other users of the this particular spry framework might also benefit.
    Thanks,
    Steve.

  • Help with a Spry Menu Bar

    I'm having trouble with a Spry Menu Bar not displaying
    correctly in Internet Explorer, while it displays fine in every
    other browser I have available. I've done some searching on these
    boards, but the queries I've found with the same type of problem
    each has a knowledgeable person editing the code for the
    poster...and I can't seem to make heads or tails of it.
    So, below is my link. What you'll see if viewed in Explorer
    is that the "Clinics" listing and the "Services & Specialties"
    listing are each on the same horizontal line, rather than vertical
    like the rest of the menu. If anyone can help me in correcting this
    problem, I'd be very appreciative.
    Thanks in advance.
    http://www.chambershospital.com/temp/about.html

    Hello,
    You might try removing all of the <div> tags you
    inserted in the menu.
    This can happen if you select text in design view and use the
    "align" icons
    in the properties window instead of using CSS to align
    things.
    For example:
    <li>
    <div align="left"><<****REMOVE THIS
    <a href="clinics.html"
    class="MenuBarItemSubmenu">Clinics</a>
    <ul>
    <li><a href="clinic.html">Chambers
    Clinic</a></li>
    <li><a href="clinic7.html">Scenic 7
    Clinic</a></li>
    </ul>
    </div><<*** REMOVE THIS
    </li>
    So it looks like this:
    <li><a href="clinics.html"
    class="MenuBarItemSubmenu">Clinics</a>
    <ul>
    <li><a href="clinic.html">Chambers
    Clinic</a></li>
    <li><a href="clinic7.html">Scenic 7
    Clinic</a></li>
    </ul>
    </li>
    Repeat for all the other <div align="left"> and
    </div> tags in the menu.
    Take care,
    Tim
    "Zim74" <[email protected]> wrote in message
    news:fv4vc0$r0t$[email protected]..
    > I'm having trouble with a Spry Menu Bar not displaying
    correctly in
    > Internet
    > Explorer, while it displays fine in every other browser
    I have available.
    > I've
    > done some searching on these boards, but the queries
    I've found with the
    > same
    > type of problem each has a knowledgeable person editing
    the code for the
    > poster...and I can't seem to make heads or tails of it.
    >
    > So, below is my link. What you'll see if viewed in
    Explorer is that the
    > "Clinics" listing and the "Services & Specialties"
    listing are each on the
    > same
    > horizontal line, rather than vertical like the rest of
    the menu. If
    > anyone can
    > help me in correcting this problem, I'd be very
    appreciative.
    >
    > Thanks in advance.
    >
    >
    http://www.chambershospital.com/temp/about.html
    >
    >

  • Question: My spry menu bar is not displaying correctly in Dreamweaver

    Hello,
    I am  new to Dreamweaver CS5, so coding isn't my area of expertise. My problem with my spry menu bar is that it does not display the tabs on the menu bar correctly. When I try to apply new changes to the CSS of the horizontal menu bar, half of the tabs will change and the other half will not. Also, I am unable to drag and move the menu bar itself around, a function that I was once able to do before. At times, only one tab of the menu bar will display itself, without any of the other tabs as well.
    I have a hunch that my problems stem from some coding errors in the SpryMenuBarHorizontal.css, and possibly in the SpryMenuBar.js. On the CSS Styles panel, my SpryMenuBarHorizontal.CSS list reads as follows:
    I also have a hunch that something about this line-up is also incorrect, but I don't exactly know what the problem is.
    Here is what my coding for my SpryMenuBarHorizontal.css looks like right now:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        text-align: center;
    /* 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: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 8em;
        float: left;
        left: 10;
        top: 10;
        height: 10;
    /* 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: 8.2em;
        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: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 8.2em;
    /* 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;
        text-align: left;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #000;
        padding: 0.5em 0.75em;
        color: #FFF;
        text-decoration: none;
        font-family: Futura;
        float: none;
    /* 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: #C00;
        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: #C00;
        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(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        text-align: center;
    /* 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(SpryMenuBarDownHover.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: block;
        f\loat: left;
        background: #FFF;
    And here is what my SpryMenuBar.js coding looks like right now too:
    SpryMenuBar.js
    This file handles the JavaScript for Spry Menu Bar.  You should have no need
    to edit this file.  Some highlights of the MenuBar object is that timers are
    used to keep submenus from showing up until the user has hovered over the parent
    menu item for some time, as well as a timer for when they leave a submenu to keep
    showing that submenu until the timer fires.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.BrowserSniff = function()
        var b = navigator.appName.toString();
        var up = navigator.platform.toString();
        var ua = 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[this.Platform] = true;
        this.v = this.version;
        if (this.safari && this.mac && this.mozilla) {
            this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a 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 current (sub)menu we are operating on
        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'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        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 hover images now
        if(opts)
            for(var k in opts)
                if (typeof this[k] == 'undefined')
                    var rollover = new Image;
                    rollover.src = opts[k];
            Spry.Widget.MenuBar.setOptions(this, opts);
        // safari doesn't support 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)
                    items[i].getElementsByTagName('a')[0].tabIndex='-1';
                this.initialize(items[i], element);
                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++)
                    linkitems[i].style.position = "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)
            return false;
        return 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 Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent('on' + eventType, handler);
        catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above 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';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    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]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (<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);
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    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);
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    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);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = 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 that comes standard in IE to determine
            // if a node is within another node
            listitem.contains = function(testNode)
                // this refers to the list item
                if(testNode == null)
                    return false;
                if(testNode == this)
                    return true;
                else
                    return this.contains(testNode.parentNode);
        // need to save this for scope further down
        var self = this;
        this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
        this.addEventListener(listitem, 'mouseout', function(e){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(e){self.keyFocus(listitem, e);}, false);
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
        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 current open element
        if (!this.lastOpen)
            return;
        if (el)
            el = el.getElementsByTagName('a')[0];
            // check children
            var item = this.lastOpen;
            while (item != this.element)
                var tmp = el;
                while (tmp != this.element)
                    if (tmp == item)
                        return;
                    try{
                        tmp = tmp.parentNode;
                    }catch(err){break;}
                item = item.parentNode;
        var item = this.lastOpen;
        while (item != this.element)
            this.hideSubmenu(item.parentNode);
            var link = 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;
        var listitem = this.lastOpen.parentNode;
        var link = this.lastOpen;
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        var opts = [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(opts, 'y', 1);
                break;
            case this.downKeyCode:
                found = this.getElementForKey(opts, 'y', -1);
                break;
            case this.leftKeyCode:
                found = this.getElementForKey(opts, 'x', 1);
                break;
            case this.rightKeyCode:
                found = this.getElementForKey(opts, 'x', -1);
                break;
            case this.escKeyCode:
            case 9:
                this.clearSelection();
                this.hasFocus = false;
            default: return;
        switch (found)
            case 0: return;
            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 = opts[found].getElementsByTagName('a')[0];
        if (opts[found].nodeName.toLowerCase() == '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 further event handling by the browser
        return Spry.Widget.MenuBar.stopPropagation(e);
    Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = 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 bubbled text events
            return;
        if (listitem.closetime)
            clearTimeout(listitem.closetime);
        if(this.currMenu == listitem)
            this.currMenu = null;
        // move the focus too
        if (this.hasFocus)
            link.focus();
        // show menu highlighting
        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)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            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, sibling)
        var child = element[sibling];
        while (child && child.nodeName.toLowerCase() !='li')
            child = child[sibling];
        return child;
    Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
        var found = 0;
        var rect = Spry.Widget.MenuBar.getPosition;
        var ref = rect(els[found]);
        var hideSubmenu = false;
        //make the subelement visible to compute the position
        if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
            els[1].style.visibility = 'hidden';
            this.showSubmenu(els[1]);
            hideSubmenu = true;
        var isVert = this.hasClassName(this.element, this.verticalClass);
        var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
        for (var i = 1; i < els.length; i++){
            //when navigating on the y axis in vertical menus, ignore children and parents
            if(prop=='y' && isVert && (i==1 || i==2))
                continue;
            //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore 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;
        // hide back the submenu
        if (els[1] && hideSubmenu){
            this.hideSubmenu(els[1]);
            els[1].style.visibility =  '';
        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;
                else
                    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)
                    var css = document.defaultView.getComputedStyle(element, 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(element, 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) {
            return false;
        if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
            //element must be visible to have a box
            return false;
        var ret = {x:0, y:0};
        var parent = null;
        var box;
        if (el.getBoundingClientRect) { // IE
            box = el.getBoundingClientRect();
            var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
            var scrollLeft = 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 & (safari absolute) incorrectly account for 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;
        else
            parent = null;
        if (parent.nodeName){
            var cas = parent.nodeName.toUpperCase();
            while (parent && cas != 'BODY' && cas != 'HTML') {
                cas = parent.nodeName.toUpperCase();
                ret.x -= parent.scrollLeft;
                ret.y -= parent.scrollTop;
                if (parent.parentNode)
                    parent = parent.parentNode;
                else
                    parent = null;
        return ret;
    Spry.Widget.MenuBar.stopPropagation = function(ev)
        if (ev.stopPropagation)
            ev.stopPropagation();
        else
            ev.cancelBubble = true;
        if (ev.preventDefault)
            ev.preventDefault();
        else
            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];
    })(); // EndSpryComponent
    If anyone could possibly steer me on the right direction with this, I'd be very grateful! I've been struggling with this for about a month now and I feel like I may have only made the situation worse.
    I'm not sure if I have to keep making a new spry assets folder in my website or not or if I have to drag and drop the spry assets into the root folder. I have restarted my website over at least a dozen times by now. I have tried changing folders, dragging and dropping various spry assets folders everywhere and I have also uninstalled and reinstalled my copy of Dreamweaver CS5 in the hopes of getting my spry horizontal menu bar to act normal. I am completely new at Dreamweaver and I really, really need some help with this.
    Thanks!

    I haven't been able to get my site posted up yet. Here is a link to it anyway:andrearosales.com
    I will be working on connecting my files up to my server. At the moment, here are some screen shots of some messages that I am getting when I am saving my file.
    I'm not sure what to make of these messages. I tried to put a new spry horizontal menu bar on my main page, and when it appeared, it displayed as a spry vertical menu bar.
    Here is a picture of what it looks like:
    I"m going to refer to the links that were suggested to me though. I'm not sure if pictures of the code will help to solve my problem. I'm going to try again to connect my files to my server though.

  • I was working on my spry menu bar and now my sidebar1 photo moves with the menu bar?

    I was working on my spry menu bar, and getting really far with it thanks to GRAMPS, and all of a sudden I wanted to put padding of 30px top and 30 px bottom on the sidebar1 photo in the container and now all of a sudden the home.jpg photo in the sidebar moves when you hover over the menu bar. 
    I can noit for the life of me figure out what changed and somehow was so excited about my spry menu bar working that I did not save the most recent working page.    Can anybody look at this with me and let me know what changed to mess the page up on me.
    Thanks a million.
    Ted
    site is located here http://www.subzerorefrigeration.com 
    None of the links are working I have just been playing with the spy menu for weeks.  I finally figured it out and do not belive the error is in the spry style sheets. 
    Here is the code for my page.  I know I am working with a template.  I really do not want to start over if a <div> tag is missing.
    Any other suggestions would be appreciated.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>Sub Zero Refrigeration Heating and Air Conditioning in Midlothian Illinois</title>
    <style type="text/css">
    <!--
    body {
        margin: 0;
        padding: 20;
        color: #000;
        background-color: #b7e3ea;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 100%;
        line-height: 1.4;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
        color: #000099;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color: #42413C;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
        color: #000099;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
        width: 960px;
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        background-color: #b7e3ea;
        padding: 0px;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 180px;
        padding-bottom: 10px;
        background-color: #FFFFFF;
        padding-top: 30px;
    .content {
        padding: 10px 0;
        width: 780px;
        float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this removes the list marker */
        border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul.nav li {
        border-bottom: 1px solid #666; /* this creates the button separation */
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        padding: 5px 5px 5px 15px;
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
        text-decoration: none;
        background: #C6D580;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        background: #ADB96E;
        color: #FFF;
    /* ~~ The footer ~~ */
    .footer {
        padding: 0px;
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        background-color: #B7E3EA;
        color: #000099;
        width: 960px;
    verybottomfooter {
        padding: 10px;
    .footerlightblue {
        background-color: #B7E3EA;
    .container .footer table tr th {
        background-color: #FFF;
        color: #000099;
    /* ~~ miscellaneous float/clear classes ~~ */
    .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. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .container .footer2 #footer3 .footer p {
        text-align: center;
    .container .footer2 #footer3 .footer p {
        font-size: medium;
    .container .footer2 #footer3 .footer p {
        font-size: small;
        background-color: #B7E3EA;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->   
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="190" align="left" id="FlashID" title="Sub Zero Refrigeration &quot;Subby&quot; Logo">
          <param name="movie" value="Images/SubbyMovie.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="7.0.70.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object data="Images/SubbyMovie.swf" type="application/x-shockwave-flash" width="125" height="190" align="left">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="7.0.70.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
        <img src="Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Condtioning Header Photo" width="834" height="190" align="left" /><br />
      </div>
      <div class="container" id="navbar"> </div>
    <div class="namephoto">
    <ul id="MenuBar" class="MenuBarHorizontal">
       <li><a class="MenuBarItem" href="#">Home</a></li>
       <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
         <ul>
           <li><a href="#" class="MenuBarItemSubmenu">Our Staff</a>
             <ul>
               <li><a href="#">Bud Wagner</a></li>
               <li><a href="#">Tim Wagner</a></li>
               <li><a href="#">Dave Allen</a></li>
               <li><a href="#">Terry Burke</a></li>
               <li><a href="#">Larry Skarr</a></li>
               <li><a href="#">Niko Opla</a></li>
               <li><a href="#">Gina Ames</a></li>
               <li><a href="#">Laura Kane</a></li>
             </ul>
           </li>
           <li><a href="#">Our Service Area</a></li>
           <li><a href="#">Our Mission Statement</a></li>
           <li><a href="#" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
             <ul>
               <li><a href="#">Our Review's</a></li>
               <li><a href="#">Our Competition's Reviews</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Careers</a>
             <ul>
    <li><a href="#">HVAC Technician</a></li>
    <li><a href="#">HVAC/R Installer</a></li>
    <li><a href="#">Commercial Refrigeration Technician</a></li>
             </ul>
           </li>
           <li><a href="#">Testimonials</a></li>
           <li><a href="#" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
             <ul>
               <li><a href="#">On &quot;YAHOO&quot;</a></li>
               <li><a href="#">On &quot;YELP&quot;</a></li>
               <li><a href="#">On &quot;MERCHANT CIRCLE&quot;</a></li>
               <li><a href="#">On &quot;GOOGLE PLACES&quot;</a></li>
             </ul>
           </li>
    </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Repair</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning </a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace</a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
    <li><a href="#">Schedule A Service Call</a></li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Sales</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning</a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace </a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
    <li><a href="#">Financing</a></li>
           <li><a href="#">Schedule a &quot;FREE&quot; Computerized ACCA MJ8 Equipment Replacement Estimate </a></li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
         <ul>
    <li><a href="#">Commercial Refrigeration Service Agreements</a></li>
    <li><a href="#">Commercial Rooftop Service Agreements</a></li>
    <li><a href="#">Commercial Ice Machine Service Agreements</a></li>
    <li><a href="#">Residential Air Conditioning Service Agreements</a></li>
    <li><a href="#">Residential Boiler Service Agreements</a></li>
    <li><a href="#">Residential Furnace and IAQ Service Agreements</a></li>
    <li><a href="#">Heat Pump Service Agreements</a></li>
    </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Products</a>
         <ul>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Refrigeration</a>
             <ul>
               <li><a href="#">Beverage Air</a></li>
               <li><a href="#">Beacon Smart Controller</a></li>
               <li><a href="#">Continental</a></li>
               <li><a href="#">Crown Tonka Walk Ins</a></li>
               <li><a href="#">Delfield</a></li>
               <li><a href="#">Heatcraft Refrigeration</a></li>
               <li><a href="#">Hoshizaki Refrigeration</a></li>
    <li><a href="#">International Cold Storage</a></li>
    <li><a href="#">Kelvinator</a></li>
    <li><a href="#">Kolpak</a></li>
    <li><a href="#">Larkin Refrigeration</a></li>
    <li><a href="#">Perlik Bar and Beverage Equipment</a></li>
    <li><a href="#">True Refrigeration</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Rooftop</a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Ice Machine</a>
             <ul>
               <li><a href="#">Hoshizaki Ice Machines</a></li>
               <li><a href="#">Manitowoc Ice Machines</a></li>
               <li><a href="#">Scotsman Ice Machines</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Air Conditioning</a>
             <ul>
               <li><a href="html/subzero/arcoaireaircondioning.html">Arcoaire</a></li>
               <li><a href="html/subzero/americanstandardairconditioning.html">American Standard</a></li>
               <li><a href="html/subzero/mitsubishiairconditioners.html">Mitsubishi</a></li>
             </ul>
         </li>
           <li><a href="#" class="MenuBarItemSubmenu">Boiler </a>
             <ul>
               <li><a href="#">Weil McLain Residential</a></li>
               <li><a href="#">Weil McLain Commercial</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Furnace </a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
               <li><a href="#">Mitsubishi</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Heat Pump </a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
               <li><a href="#">Mitsubishi</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Indoor Air Quality</a>
             <ul>
               <li><a href="#">Aprilaire Humidifiers</a></li>
               <li><a href="#">Honeywell Electronic Air Cleaners</a></li>
               <li><a href="#">Honeywell Thermostats</a></li>
             </ul>
       </li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Job Photos</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning</a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace</a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
         </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Cool Savings</a>
         <ul>
           <li><a href="#">Monthly Specials</a></li>
           <li><a href="#">Manufacturers Rebates</a></li>
           <li><a href="#">Utility Rebates</a></li>
           <li><a href="#">Website Coupons</a></li>
    <li><a href="#">Customer Referral Program</a></li>
         </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Social</a>
         <ul>
           <li><a href="#">&quot;LIKE&quot; Us on Facebook</a></li>
           <li><a href="#">&quot;FOLLOW&quot; Us on Twitter</a></li>
    <li><a href="#">Facebook Disclaimer</a></li>
         </ul>
    </li>
    <li><a class="MenuBarItem" href="#">Contact Us</a>  </li>
    </ul>
    <p><br />
    </p>
    <div class="sidebar1"><img src="Images/home.jpg" alt="Home Page Photo" width="105" height="240" /></div></div>
      <div class="content">
        <h1>Instructions</h1>
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
        <h1>Clearing Method</h1>
        <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule.  This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
        <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
        <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
        <h4>Backgrounds</h4>
        <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
        <!-- end .content --></div>
      <div class="footer">
        <table width="960" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="102" scope="col"> </th>
            <th width="101" scope="col"> </th>
            <th width="106" scope="col"> </th>
            <th width="120" scope="col"> </th>
            <th width="172" scope="col"> </th>
            <th width="120" scope="col"> </th>
            <th width="103" scope="col"> </th>
            <th width="136" scope="col"> </th>
          </tr>
          <tr>
            <td colspan="2"><img src="Images/van.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Service Van" width="243" height="109" align="left" /></td>
            <td colspan="6"><img src="Images/footer_right.jpg" width="717" height="109" alt="Footer" /></td>
          </tr>
        </table>
      </div>
      <div class="footer2">
        <div class="footer">
        <table width="960" height="62" border="1" align="center" cellspacing="8">
          <tr valign="middle">
            <th width="234" scope="col">Schedule a Service Call</th>
            <th width="247" scope="col"><p>Schedule Free New Equipment Replacement Estimate</p></th>
            <th width="99" scope="col"><a href="https://www.acca.org/consumer/find-a-contractor" target="_blank"><img src="Images/acca.gif" width="85" height="48" alt="ACCA Sub Zero Refrigeration" /></a></th>
            <th width="94" scope="col"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-and-a-c-in-midlothian-il-7695" target="_blank"><img src="Images/BBB.png" width="87" height="48" alt="Sub Zero Refrigeration BBB A+ Rating" /></a></th>
            <th width="84" scope="col"><a href="http://www.natex.org/" target="_blank"><img src="Images/nate.png" width="76" height="74" alt="NATE Sub Zero Refrigeration" /></a></th>
            <th width="83" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="Images/twitter_logo.jpg" width="69" height="69" alt="Follow us on Twitter" /></a></th>
            <th width="143" scope="col"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="Images/facebook.png" width="81" height="81" alt="" /></a></th>
          </tr>
        </table>
        </div>
        <div class="footer3" id="footer3">
          <div class="footer">
            <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <th width="960" style="background-color: #B7E3EA; font-size: 10px; font-family: Arial, Helvetica, sans-serif" scope="col">Home |  About Us | Repair | Sales | Maintenance | Products | Our Job Photos | Cool Savings | Social | Contact Us | Schedule Free New Equipment Estimate | Schedule Service | Site Map<br />
                Search Sub Zero Refrigeration Heating and Air Conditioning<br />            </th>
              </tr>
            </table>
            <p><!-- end .container -->      Copyright 1999-2013 | Last updated on
              <!-- #BeginDate format:Am1 -->February 19, 2012<!-- #EndDate --> | Web designer's - Ted Wagner and Cherie White Cachampis      </p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    swfobject.registerObject("FlashID");
    </script>
    </body>
    </html>

    I seem to have fixed it by putting <div  class="clearfloat"></div> after the navigation bar?

  • Spry menu bar in firefox not telescoping main li horizontally

    I am having trouble with my spry menu bar in firefox and chrome not telescoping horizontally. In IE8 they tile horizontally but in firefox(3.6.10) and chrome(6.0.472.63) they stay tiled vertically.
    Example:
    IE8
    [menu1][menu2][menu3][menu4][menu5]
    FF and Chrome
    [menu1]
    [menu2]
    [menu3]
    [menu4]
    [menu5]
    I do not think that it is the css due to it not telescoping when I view it in live view in dreamweaver cs4. SO I am thinking it is someting in the javascript that is just for IE.
    ANy help or a push in the right direction would be great.
    here is the css
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        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 a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
    /*    text-align: left;*/
        cursor: pointer;
        width: 19.8%;
        float: center;
        z-index: 100;
    /* 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: 8.2em;
        position: absolute;
        left: -1000em;
        float: none;
    /* 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: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 8.2em;
    /* 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;
    /* Menu items are a light gray 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;
        text-align: left;
    ul.MenuBarHorizontal a.NoPadding
        padding: 0.39em 0.75em;
    *//* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #FFF;
        background-color:transparent;
    /* 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:transparent;
        color:#2A0000;
    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(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 100% 50%;
        z-index:100;
    /* 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%;
        z-index:100;
    /* 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(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        z-index:100;
    /* 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%;
        z-index:100;
    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;
            float: left;
            background: #FFF;
            z-index:100;
    #MenuBar1{
        position:relative;
        margin-top:-10px;
        margin-bottom:0px;
        z-index:1010;
    ***And the javascript***
    var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.BrowserSniff = function()
        var b = navigator.appName.toString();
        var up = navigator.platform.toString();
        var ua = 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[this.Platform] = true;
        this.v = this.version;
        if (this.safari && this.mac && this.mozilla) {
            this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a 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 current (sub)menu we are operating on
        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'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        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 hover images now
        if(opts)
            for(var k in opts)
                if (typeof this[k] == 'undefined')
                    var rollover = new Image;
                    rollover.src = opts[k];
            Spry.Widget.MenuBar.setOptions(this, opts);
        // safari doesn't support 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)
                    items[i].getElementsByTagName('a')[0].tabIndex='-1';
                this.initialize(items[i], element);
                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++)
                    linkitems[i].style.position = "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)
            return false;
        return 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 Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent('on' + eventType, handler);
        catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above 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';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    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]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (<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);
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    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);
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    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);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = 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 that comes standard in IE to determine
            // if a node is within another node
            listitem.contains = function(testNode)
                // this refers to the list item
                if(testNode == null)
                    return false;
                if(testNode == this)
                    return true;
                else
                    return this.contains(testNode.parentNode);
        // need to save this for scope further down
        var self = this;
        this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
        this.addEventListener(listitem, 'mouseout', function(e){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(e){self.keyFocus(listitem, e);}, false);
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
        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 current open element
        if (!this.lastOpen)
            return;
        if (el)
            el = el.getElementsByTagName('a')[0];
            // check children
            var item = this.lastOpen;
            while (item != this.element)
                var tmp = el;
                while (tmp != this.element)
                    if (tmp == item)
                        return;
                    try{
                        tmp = tmp.parentNode;
                    }catch(err){break;}
                item = item.parentNode;
        var item = this.lastOpen;
        while (item != this.element)
            this.hideSubmenu(item.parentNode);
            var link = 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;
                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(element, 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) {
            return false;
        if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
            //element must be visible to have a box
            return false;
        var ret = {x:0, y:0};
        var parent = null;
        var box;
        if (el.getBoundingClientRect) { // IE
            box = el.getBoundingClientRect();
            var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
            var scrollLeft = 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 & (safari absolute) incorrectly account for 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;
        else
            parent = null;
        if (parent.nodeName){
            var cas = parent.nodeName.toUpperCase();
            while (parent && cas != 'BODY' && cas != 'HTML') {
                cas = parent.nodeName.toUpperCase();
                ret.x -= parent.scrollLeft;
                ret.y -= parent.scrollTop;
                if (parent.parentNode)
                    parent = parent.parentNode;
                else
                    parent = null;
        return ret;
    Spry.Widget.MenuBar.stopPropagation = function(ev)
        if (ev.stopPropagation)
            ev.stopPropagation();
        else
            ev.cancelBubble = true;
        if (ev.preventDefault)
            ev.preventDefault();
        else
            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];
    Any help would be appreciated
    Ray

    Uhh no, both issues are still occurring. Please look at the site http://appventurousllc.com in
    Firefox and IE and you will see that the issues are still present.

  • Spry Menu Bar Widget 2.0 (1.0) -- IE 6 Rendering Snag

    Hi:
    Once again I need to call on the aid of others with more detailed knowledge of the spry frameworks, particularly the Spry Menu Widget 2.0 (vers. 1.0) developed by Adobe labs.
    I have posted the site to http://www.aclco.org/testing/index.html.  You will see that it works beautifully, thanks to the help of many contributors, except in IE 6.0, where, when the sub menus become visible and drop down, it causes all page elements (divs) to be pushed down to create the necessary room to accommodate the drop down.  The natural overlap of the sub-menu over pre-existing content doesn't seem to overlay properly.
    It does this on all pages, and not just those which present flash sideshows.  And as I say it is peculiar to IE 6.
    I have followed the tutorial provided by David Powers in deploying the widget and have not altered the spry skin css or the basic css.  Any changes (affecting padding, etc. and adding of background images where created using the widget browser and supplemented in the css added to the template page.  The "add-on" css was then added to the general style sheet governing the whole site layout.
    I was wondering if anyone else has experienced this problem, if there are any work arounds or hacks that anyone is aware of, or any other suggestions that might help.
    I haven't been able to preview this on a free standing PC using IE6, but was able to reproduce the problem on 2 cross browser testing services employing a "live mode".  I renders properly until the sub-menus are called upon to become visible, and then the problem manifests.
    Your assistance will be greatly appreciated.
    Sincerely,
    Steve Webster
    Attach.
    Please note:  Attached are the relevant excerpts from the customized style sheet as amended from the spry widget browser:
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
    These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
    MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
    MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
    MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
    MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
    and centered in its parent container.
    MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
    background-color:transparent;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
    MenuItem, and MenuItemLabel
    at a given level all use same definition for ems.
    Note that this means the size is also inherited to child submenus,
    so use caution in using relative sizes other than
    100% on submenu fonts. */
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
    .MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
    .MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    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 menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0; /* Zero out margin  on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
    padding: 10px 10px 10px 4px;
    background-color:#000088;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt-Dark.png);
    background-repeat:repeat-x;
    #MenuBar  .MenuItemFirst {
    border-style: none none none none;
    #MenuBar .MenuItemLast {
    border-style: none none none 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 submenu items */
    #MenuBar .SubMenu  .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    font-style: normal;
    background-color:#000088;
    padding:0px 2px 0px 0px;
    border-width:0px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
    border-style: none;
    padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
    #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, items and labels */
    #MenuBar .MenuItemHover {
    background-color: #2E35A3;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt%20Light2.png);
    background-repeat:repeat-x;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
    background-color:2E35A3;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
    background-color: transparent;
    min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
    and your personal taste.
    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
    on MenuItemContainer and MenuItem on the parent
    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
    the dropdown with 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 width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: transparent;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * 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 necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */

    I have systematically reviewed the tutorial of David Powers on the Spry Menu bar 2.0, and recreated the process in a methodical process - making one change at a time, and then checking each step on a cross browser testing server, and have found, quite to my amazement that what seems to be causing the problem of the "gap" in IE 6 is by removing the customized styles from the head of the individual pages, and placing them in CSS stylesheet that governs the entire site.
    I find this quite inexplicable.  When the customized CSS rules governing the menu bar are situated in a separate stylesheet, the page renders well enough for any of the "modern" browsers, but won't render in IE 6.  All that I get is a horizontal menu with drop downs, but none of the styling (specifically background colours, background images, etc.) that are called for in the stylesheet and that otherwise appear when rendered by other browsers.
    I realize that this sounds strange, but I was wondering if anyone had experienced this phenomenon, or could offer any explanation.
    Any suggestions would be greatly appreciated.
    Steve Webster

  • Spry Menu Bar won't work correctly.

    This is an image of what the overall menu bar layout should be like-all of the links and sublinks.
    I have a few problems that I am having all relating to the spry menu bar.
    I ran my code through w3c validation service but it came up with alot of errors which when corrected didn't make sense or work either.
    I made this menu bar in a widget called spry menu bar 2.0.  I then edited it to place in the correct names and it doesn't work correctly and the w3c validation code seems to have 43 errors with the spry bar. I am been over it a dozen times and I can't seem to figure it out.  Here is the code.
    Also, have I made the links correctly?
    I would appreciate any help you could offer! thank you
    Dreamweaver cs 5.5
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    #container {
        width: 1000px;
    #header {
        width: 1000px;
    </style>
    <link href="../Stylesheet_Unicorn_main_layout_template.css" rel="stylesheet" type="text/css" />
    <link href="../Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <script src="../Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:#000000;   
        font-family: "Comic Sans MS", cursive; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 18px;
        font-style: normal;
        padding:0;   
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        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 menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 0px 10px 0px 0px;
        background-color:#000000;   
        border-width:1px;
        border-color: #cccccc #ffffff #cccccc #ffffff;
        border-style: none solid none solid;
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:left;
        line-height:1.4em;
        color:#ff00ff;
        background-color:#000000;
        padding: 3px 3px 3px 3px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 16px;
        font-style: normal;
        background-color:#000000;
        padding:0px 2px 0px 0px;
        border-width:1px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:#000033;
        color:#ff00ff;
        padding: 6px 12px 6px 5px;
        width: 7em;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #999999;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: #999999; /* consider exposing this prop separately*/
        color: #ff0000;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: #999999;
        color: #ff0000;
    #MenuBar .SubMenu .MenuItemHover {
        background-color: #cccccc;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: #cccccc;
        color: #ff0000;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: #000000;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer &amp; MenuItem padding-left will align
                        the dropdown with 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 width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: #000000;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * 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 necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: #999999; /* consider exposing this prop separately*/
        color: #ff0000;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: #cccccc; /* consider exposing this prop separately*/
        color: #ff0000;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="container"><!-- TemplateBeginEditable name="header_editable" -->
      <div id="header">Unicorn Writers Conference</div>
    <!-- TemplateEndEditable -->
      <div id="menubar_left">
        <ul id="MenuBar">
          <li> <a href= "../Pages/home.html">Home</a></li>
          <li> <a href="#">Events</a>
          <li> <a href="#">Mission Statement</a>
          <li> <a href="#">Resources</a>
            <ul>
              <li> <a href="#">Advanced networking</a></li>
              <li> <a href="#">Query Review</a>
              <li> <a href="#">Ms Review Sessions</a>
              <li> <a href="#">1-1 Sessions</a>
              <li> <a href="#">Workshops</a>
              <li> <a href="#">Genre Chart</a>
              <li> <a href="#">Writers Links</a>
                   </ul></li>
                      <li> <a href="#">Key Presenters</a>
                          <ul>
                            <li> <a href="#">Speakers</a>
                                <ul>
                                    <li> <a href="../Pages/2013_speakers_page.html">Speakers 2013</a></li>
                                    <li> <a href="#">Speakers 2012</a>
                                </ul>
                            <li> <a href="#">Editors</a>
                                <ul>
                                    <li> <a href="#">Editors 2013</a></li>
                                    <li> <a href="../Pages/2012_editors.html">Editors 2012</a>
                                </ul>
                            <li> <a href="#">Literary Agents</a>
                                <ul>
                                    <li> <a href="../Pages/2013_L_agents.html">Literary Agents 2013</a></li>
                                    <li> <a href="../Pages/2012_editors.html">Literary Agents 2012</a>
                              </ul>
                         </ul>
                      <li> <a href="#">Information</a>
                          <ul>
                            <li> <a href="#">St. Clements</a></li>
                            <li> <a href="#">Directions</a></li>
                            <li> <a href="#">Hotels</a></li>
                            <li> <a href="#">Menu</a></li>
                            <li> <a href="#">Unicorn Photo Gallery</a></li>
                            <li> <a href="#">Day Schedule</a></li>
                            <li> <a href="#">FAQ</a></li>
                            <li> <a href="#">Staff</a></li>
                            <li> <a href="#">Contact</a></li>
                          </ul>
                      <li> <a href="#">Registration</a></li>
                      <li> <a href="#">Acclaim</a>
                          <ul>
                              <li> <a href="#">Spotlights</a></li>
                              <li> <a href="#">Testamonials</a>
                            <li> <a href="#">Sponsorship</a>
                        </ul>   
                      <li> <a href="#">Classifieds</a>
                          <ul>
                            <li> <a href="#">View</a></li>
                            <li> <a href="#">Place</a></li>
                        </ul>
                      <li> <li> <a href="#">Merchandise</a></li>
                    </ul>
                  </li>
              </li>
            </ul>
          </li>
        </ul>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
          widgetClass: "MenuBar MenuBarVertical MenuBarMenuBarVerticalLeftShrink",
          insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
        </script>
      </div>
      <!-- TemplateBeginEditable name="main_content_editable" -->
      <div id="main_content">Content for New Div Tag Goes Here</div>
      <!-- TemplateEndEditable --></div>
    <div id="footer">Content for  id "footer" Goes Here</div>
    </body>
    </html>

    These Spry support files are all 404 Not found on server.
    <link href="../Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <script src="../Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="../Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    Nancy O.

  • SPRY menu bar not working in IE 9

    Hey! I recently just finished building my very first website using Dreamweaver CS5.5!  It looks really great and works perfectly in firefox and safari however the SPRY menu bar does not work in IE 8 or 9. Does anyone know what i can do to fix this without messing up how the website looks in firefox and safari?
    thanks,
    Toby
    here is a copy of my code:
    1
    @charset "UTF-8";
    /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* 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: 200px;
    /* 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;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 200px;
    /* 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: 50%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        width: 180px;
        left: -1000em;
        top: 0;
        background-color: #cccccc;
    /* 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: 8.2em;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
        border: 0px solid #CCC;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
        border: 0px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: ;
        text-decoration: none;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
        color: ;
        font-size: 100%;
    /* 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-color: ;
        color: ;
    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(home.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.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;
        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.MenuBarVertical li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    2
    // SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials 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 prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS 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)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    SpryMenuBar.js
    This file handles the JavaScript for Spry Menu Bar.  You should have no need
    to edit this file.  Some highlights of the MenuBar object is that timers are
    used to keep submenus from showing up until the user has hovered over the parent
    menu item for some time, as well as a timer for when they leave a submenu to keep
    showing that submenu until the timer fires.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.BrowserSniff = function()
        var b = navigator.appName.toString();
        var up = navigator.platform.toString();
        var ua = 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[this.Platform] = true;
        this.v = this.version;
        if (this.safari && this.mac && this.mozilla) {
            this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a 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 current (sub)menu we are operating on
        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'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        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 hover images now
        if(opts)
            for(var k in opts)
                if (typeof this[k] == 'undefined')
                    var rollover = new Image;
                    rollover.src = opts[k];
            Spry.Widget.MenuBar.setOptions(this, opts);
        // safari doesn't support 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)
                    items[i].getElementsByTagName('a')[0].tabIndex='-1';
                this.initialize(items[i], element);
                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++)
                    linkitems[i].style.position = "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)
            return false;
        return 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 Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent('on' + eventType, handler);
        catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above 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';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    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]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (<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);
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    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);
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    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);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = 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 that comes standard in IE to determine
            // if a node is within another node
            listitem.contains = function(testNode)
                // this refers to the list item
                if(testNode == null)
                    return false;
                if(testNode == this)
                    return true;
                else
                    return this.contains(testNode.parentNode);
        // need to save this for scope further down
        var self = this;
        this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
        this.addEventListener(listitem, 'mouseout', function(e){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(e){self.keyFocus(listitem, e);}, false);
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
        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 current open element
        if (!this.lastOpen)
            return;
        if (el)
            el = el.getElementsByTagName('a')[0];
            // check children
            var item = this.lastOpen;
            while (item != this.element)
                var tmp = el;
                while (tmp != this.element)
                    if (tmp == item)
                        return;
                    try{
                        tmp = tmp.parentNode;
                    }catch(err){break;}
                item = item.parentNode;
        var item = this.lastOpen;
        while (item != this.element)
            this.hideSubmenu(item.parentNode);
            var link = 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;
        var listitem = this.lastOpen.parentNode;
        var link = this.lastOpen;
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        var opts = [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(opts, 'y', 1);
                break;
            case this.downKeyCode:
                found = this.getElementForKey(opts, 'y', -1);
                break;
            case this.leftKeyCode:
                found = this.getElementForKey(opts, 'x', 1);
                break;
            case this.rightKeyCode:
                found = this.getElementForKey(opts, 'x', -1);
                break;
            case this.escKeyCode:
            case 9:
                this.clearSelection();
                this.hasFocus = false;
            default: return;
        switch (found)
            case 0: return;
            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 = opts[found].getElementsByTagName('a')[0];
        if (opts[found].nodeName.toLowerCase() == '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 further event handling by the browser
        return Spry.Widget.MenuBar.stopPropagation(e);
    Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = 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 bubbled text events
            return;
        if (listitem.closetime)
            clearTimeout(listitem.closetime);
        if(this.currMenu == listitem)
            this.currMenu = null;
        // move the focus too
        if (this.hasFocus)
            link.focus();
        // show menu highlighting
        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)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            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, sibling)
        var child = element[sibling];
        while (child && child.nodeName.toLowerCase() !='li')
            child = child[sibling];
        return child;
    Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
        var found = 0;
        var rect = Spry.Widget.MenuBar.getPosition;
        var ref = rect(els[found]);
        var hideSubmenu = false;
        //make the subelement visible to compute the position
        if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
            els[1].style.visibility = 'hidden';
            this.showSubmenu(els[1]);
            hideSubmenu = true;
        var isVert = this.hasClassName(this.element, this.verticalClass);
        var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
        for (var i = 1; i < els.length; i++){
            //when navigating on the y axis in vertical menus, ignore children and parents
            if(prop=='y' && isVert && (i==1 || i==2))
                continue;
            //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore 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;
        // hide back the submenu
        if (els[1] && hideSubmenu){
            this.hideSubmenu(els[1]);
            els[1].style.visibility =  '';
        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;
                else
                    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)
                    var css = document.defaultView.getComputedStyle(element, 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(element, 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) {
            return false;
        if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
            //element must be visible to have a box
            return false;
        var ret = {x:0, y:0};
        var parent = null;
        var box;
        if (el.getBoundingClientRect) { // IE
            box = el.getBoundingClientRect();
            var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
            var scrollLeft = 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 & (safari absolute) incorrectly account for 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;
        else
            parent = null;
        if (parent.nodeName){
            var cas = parent.nodeName.toUpperCase();
            while (parent && cas != 'BODY' && cas != 'HTML') {
                cas = parent.nodeName.toUpperCase();
                ret.x -= parent.scrollLeft;
                ret.y -= parent.scrollTop;
                if (parent.parentNode)
                    parent = parent.parentNode;
                else
                    parent = null;
        return ret;
    Spry.Widget.MenuBar.stopPropagation = function(ev)
        if (ev.stopPropagation)
            ev.stopPropagation();
        else
            ev.cancelBubble = true;
        if (ev.preventDefault)
            ev.preventDefault();
        else
            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];
    })(); // EndSpryComponent
    3
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>Integrated Sensors, LLC</title>
    <style type="text/css">
    body,td,th {
        font-family: "Arial Narrow", "Arial Narrow Bold", "Arial Narrow Bold Italic", "Arial Narrow Italic";
        font-size: medium;
        color: #000000;
    body {
        background-image: url(images/_jpg%20png/background.jpg);
    </style>
    <link rel="shortcut icon" href="images/favicon.ico" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    </script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    a:link {
        text-decoration: underline;
    a:visited {
        text-decoration: underline;
    a:hover {
        text-decoration: none;
    a:active {
        text-decoration: underline;
    h1 {
        font-size: large;
        color: #3165C9;
    </style>
    </head>
    <body>
    <table width="617" border="0" align="center" cellpadding="2" href="images/favicon.ico" rel="favicon">
      <tr>
        <td width="609"><table width="600" border="0" cellpadding="2">
          <tr>
            <td><img src="images/sensor2.gif" width="195" height="195" align="absmiddle" /></td>
            <td><img src="images/heading.gif" width="600" height="170" /></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><table width="817" border="0" cellpadding="0">
          <tr>
            <td width="200" height="35" valign="top"><ul id="MenuBar1" class="MenuBarVertical">
              <li><a href="index.html"><img src="images/b2_home.gif" alt="" onmouseover=" this.src='images/b2_home_ov.gif'" onmouseout=" this.src='images/b2_home.gif'"
    style="cursor:pointer;"></a>            </li>
              <li><a href="about_1.html" class="MenuBarItemSubmenu"><img src="images/b2_about.gif" alt="" onmouseover=" this.src='images/b2_about_ov.gif'" onmouseout=" this.src='images/b2_about.gif'"
    style="cursor:pointer;"></a>
                <ul>
                    <li><a href="about_1.html"><img src="images/bs_1.gif" alt="" onmouseover=" this.src='images/bs_1_ov.gif'" onmouseout=" this.src='images/bs_1.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="about_2.html"><img src="images/bs_2.gif" alt="" onmouseover=" this.src='images/bs_2_ov.gif'" onmouseout=" this.src='images/bs_2.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="about_3.html"><img src="images/bs_3.gif" alt="" onmouseover=" this.src='images/bs_3_ov.gif'" onmouseout=" this.src='images/bs_3.gif'"
    style="cursor:pointer;"></a></li>
                </ul>
              </li>
              <li><a href="technology_2.html" class="MenuBarItemSubmenu"><img src="images/b2_technology.gif" alt="" onmouseover=" this.src='images/b2_technology_ov.gif'" onmouseout=" this.src='images/b2_technology.gif'"
    style="cursor:pointer;"></a>
                <ul>
                    <li><a href="technology_2.html"><img src="images/bs_6.gif" alt="" onmouseover=" this.src='images/bs_6_ov.gif'" onmouseout=" this.src='images/bs_6.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="technology_3.html"><img src="images/bs_7.gif" alt="" onmouseover=" this.src='images/bs_7_ov.gif'" onmouseout=" this.src='images/bs_7.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="technology_4.html"><img src="images/bs_8.gif" alt="" onmouseover=" this.src='images/bs_8_ov.gif'" onmouseout=" this.src='images/bs_8.gif'"
    style="cursor:pointer;"></a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu"><img src="images/b2_applications.gif" alt="" onmouseover=" this.src='images/b2_applications_ov.gif'" onmouseout=" this.src='images/b2_applications.gif'"
    style="cursor:pointer;"></a>
                <ul>
                    <li><a href="applications_1.html"><img src="images/bs_10.gif" alt="" onmouseover=" this.src='images/bs_10_ov.gif'" onmouseout=" this.src='images/bs_10.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="applications_2.html"><img src="images/bs_11.gif" alt="" onmouseover=" this.src='images/bs_11_ov.gif'" onmouseout=" this.src='images/bs_11.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="applications_3.html"><img src="images/bs_12.gif" alt="" onmouseover=" this.src='images/bs_12_ov.gif'" onmouseout=" this.src='images/bs_12.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="applications_4.html"><img src="images/bs_13.gif" alt="" onmouseover=" this.src='images/bs_13_ov.gif'" onmouseout=" this.src='images/bs_13.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="applications_5.html"><img src="images/bs_14.gif" alt="" onmouseover=" this.src='images/bs_14_ov.gif'" onmouseout=" this.src='images/bs_14.gif'"
    style="cursor:pointer;"></a></li>
                    <li><a href="applications_6.html"><img src="images/bs_15.gif" alt="" onmouseover=" this.src='images/bs_15_ov.gif'" onmouseout=" this.src='images/bs_15.gif'"
    style="cursor:pointer;"></a></li>
                </ul>
              </li>
              <li><a href="publications.html" class="MenuBarItemSubmenu"><img src="images/b2_publications.gif" alt="" onmouseover=" this.src='images/b2_publications_ov.gif'" onmouseout=" this.src='images/b2_publications.gif'"
    style="cursor:pointer;"></a></li>
              <li><a href="contact.html"><img src="images/b2_contact.gif" alt="" onmouseover=" this.src='images/b2_contact_ov.gif'" onmouseout=" this.src='images/b2_contact.gif'"
    style="cursor:pointer;"></a></li>
            </ul></td>
            <td width="611" valign="top" bgcolor="#FFFFFF"><div align="justify">
              <blockquote>
                <h1 align="center">Background</h1>
                <p>Integrated Sensors is the first company in the world to apply the high gain, high-performance advantages of low cost PDP-TV (plasma display panel) technology to radiation detection.   This has resulted in the development of what is now known as the Plasma Panel Sensor (PPS), which has been called a <em>revolutionary</em> technology by U.S. government scientists. </p>
                <p>Integrated Sensors with seven issued patents holds all of the core intellectual property - which is seminal in scope - on the PPS radiation detector technology.  The PPS could well prove to be a transformational technology for a number of <em>multibillion</em> dollar industries, ranging from radiation therapeutics for the treatment of cancer, to medical imaging, to homeland security. </p>
                <p>With a secure IP and patent position established, and an international collaborative team involving over a dozen world-class scientists, and with substantial research investment by the U.S. government, Integration Sensors is now transitioning to the commercialization of its technology.</p>
              </blockquote>
              </div></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><p> </p>
        <p>Copyright 2007-2011. Integrated Sensors, LLC. All rights reserved.</p></td>
      </tr>
    </table>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    90% of browser rendering problems are caused by invalid code.   See details here:
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.i-sensors.com%2F
    You have a bunch of unclosed <img /> tags on your menus.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Spry Menu Bar jumps off screen-right in CS6

    Frustrating little glitch I'm experiencing.  When in a NON-LIVE mode in CS6, I have a Spry Menu Bar that I've placed, customized and is functioning properly.  It is precisely in the right location in BOTH live mode and in a browser preview, however, when I am editing the site the menu bar jumps off screen right to where I have to scroll right to locate it.  The only thing that pops it back in to place is by tweaking a setting like "Float" from right to left then back to right.  But once I begin to edit the site again it will jump off the screen.  This isn't a massive deal since it remains in place in live and preview modes, it's just annoying for layout purposes while I'm editing.  It sort of screws up the aesthetic of the layout.  Has anyone found the same problem?  Below is my layout.css and my Spry Menu css.
    @charset "utf-8";
    /* Simple fluid media
       Note: Fluid media requires that you remove the media's height and width attributes from the HTML
       http://www.alistapart.com/articles/fluid-images/
    img, object, embed, video {
        max-width: 100%;
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
        width:100%;
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:        6;
        dw-num-cols-tablet:        8;
        dw-num-cols-desktop:    12;
        dw-gutter-percentage:    15;
        Inspiration from "Responsive Web Design" by Ethan Marcotte
        http://www.alistapart.com/articles/responsive-web-design
        and Golden Grid System by Joni Korpi
        http://goldengridsystem.com/
    /* Mobile Layout: 480px and below. */
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 95.8695%;
        padding-left: 1.0652%;
        padding-right: 1.0652%;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #maincontent {
        clear: none;
        float: left;
        margin-left: 2.6785%;
        width: 100%;
        display: block;
    #navigation {
        clear: none;
        float: left;
        margin-left: auto;
        width: 100%;
        display: block;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: #300;
        height: 16px;
        top: 5px;
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        color: #FFF;
        background-attachment: fixed;
        background-image: url(../bkgdContent.png);
        background-repeat: repeat;
        margin-top: 20px;
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) {
    .gridContainer {
        width: 91.4836%;
        padding-left: 0.7581%;
        padding-right: 0.7581%;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        text-align: center;
    #maincontent {
        clear: none;
        float: left;
        margin-left: 1.6574%;
        width: 100%;
        display: block;
    #navigation {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        height: 16px;
    #whf-content {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #donatecontent {
        clear: none;
        float: left;
        margin-left: 1.6574%;
        width: 100%;
        display: block;
    #theride-content {
        clear: both;
        float: left;
        margin-left: 0;
        width: 49.1712%;
        display: block;
    #donate-content {
        clear: none;
        float: left;
        margin-left: 1.6574%;
        width: 49.1712%;
        display: block;
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    @media only screen and (min-width: 769px) {
    .gridContainer {
        width: 89.0217%;
        max-width: 1232px;
        padding-left: 0.4891%;
        padding-right: 0.4891%;
        margin: auto;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        color: #FFF;
    #maincontent {
        clear: both;
        float: left;
        margin-left: 0;
        width: 32.6007%;
        display: block;
    #navigation {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #whf-content {
        clear: both;
        float: left;
        margin-left: 0;
        width: 32.6007%;
        display: block;
    #donatecontent {
        clear: none;
        float: left;
        margin-left: 1.0989%;
        width: 100%;
        display: block;
    #donate-content {
        clear: none;
        float: left;
        margin-left: 1.0989%;
        width: 32.6007%;
        display: block;
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #theride-content {
        clear: none;
        float: left;
        margin-left: 1.0989%;
        width: 32.6007%;
        display: block;
    #whf-content {
        font-family: Georgia, "Times New Roman", Times, serif;
    SPRY CSS
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        float: right;
    /* 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: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 4.3em;
        float: left;
    /* 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: 4.3em;
        position: relative;
        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: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: relative;
        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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #300;
        color: #FFF;
        text-decoration: none;
        font-size: 12px;
        font-family: Georgia, "Times New Roman", Times, serif;
        text-align: center;
        height: 16px;
        padding: 0px;
    /* 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: #003;
        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: #003;
        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(SpryMenuBarDown.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(SpryMenuBarDownHover.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;

    Design view is not reliable.  Learn to work in Code View or Split View with Live View to check your layout.
    Spry menus are not responsive so they will not work well in a Fluid Grid Layout.  Find a better menu system.
    Project Seven Responsive Tabs
    http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/index.htm
    10 Responsive Menus
    http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
    In the meantime,
    It's often easier to work with an unstyled HTML page. 
    To disable CSS, go to  View > Style Rendering > untick Display Styles. 
    Or, use a Design-Time Style Sheet.
    http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.h tml
    Nancy O.

  • Spry Menu Bar Submenus Not Showing

    Hi!
    This is the first time I have ever used Spry .My Horizontal Spry Menu Bar Submenus are not working in ANY browsers whatsoever and I'm not sure whats wrong. My website is www.poor2chic.com. I have pasted a copy of my SpryMenuBarHorizontal.css as well as the .js code and the source code :
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    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: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8.55em;
    float: left;
    /* 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: 8.2em;
    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: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* 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;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #03C;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
    /* 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: #9D9DFD;
    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: #9D9DFD;
    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(SpryMenuBarDown.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(SpryMenuBarDownHover.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;
    .container .content h1 {
    font-family: Arial Black, Gadget, sans-serif;
    .container {
    font-family: Arial;
    .container .content blockquote blockquote blockquote blockquote h1 em {
    font-family: Arial;
    .container .content p em strong {
    color: #B62C0A;
    .container .content p em strong {
    color: #000;
    .JS CODE:
    // SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials 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 prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS 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)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    SpryMenuBar.js
    This file handles the JavaScript for Spry Menu Bar.  You should have no need
    to edit this file.  Some highlights of the MenuBar object is that timers are
    used to keep submenus from showing up until the user has hovered over the parent
    menu item for some time, as well as a timer for when they leave a submenu to keep
    showing that submenu until the timer fires.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.BrowserSniff = function()
    var b = navigator.appName.toString();
    var up = navigator.platform.toString();
    var ua = 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[this.Platform] = true;
    this.v = this.version;
    if (this.safari && this.mac && this.mozilla) {
      this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a 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 current (sub)menu we are operating on
    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'))
      // bail on older unsupported browsers
      return;
    // Fix IE6 CSS images flicker
    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 hover images now
    if(opts)
      for(var k in opts)
       if (typeof this[k] == 'undefined')
        var rollover = new Image;
        rollover.src = opts[k];
      Spry.Widget.MenuBar.setOptions(this, opts);
    // safari doesn't support 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)
        items[i].getElementsByTagName('a')[0].tabIndex='-1';
       this.initialize(items[i], element);
       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++)
        linkitems[i].style.position = "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)
      return false;
    return 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 Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
    try
      if (element.addEventListener)
       element.addEventListener(eventType, handler, capture);
      else if (element.attachEvent)
       element.attachEvent('on' + eventType, handler);
    catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above 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';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    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]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (<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);
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    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);
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    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);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
    var opentime, closetime;
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = 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 that comes standard in IE to determine
      // if a node is within another node
      listitem.contains = function(testNode)
       // this refers to the list item
       if(testNode == null)
        return false;
       if(testNode == this)
        return true;
       else
        return this.contains(testNode.parentNode);
    // need to save this for scope further down
    var self = this;
    this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
    this.addEventListener(listitem, 'mouseout', function(e){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(e){self.keyFocus(listitem, e);}, false);
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
    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 current open element
    if (!this.lastOpen)
      return;
    if (el)
      el = el.getElementsByTagName('a')[0];
      // check children
      var item = this.lastOpen;
      while (item != this.element)
       var tmp = el;
       while (tmp != this.element)
        if (tmp == item)
         return;
        try{
         tmp = tmp.parentNode;
        }catch(err){break;}
       item = item.parentNode;
    var item = this.lastOpen;
    while (item != this.element)
      this.hideSubmenu(item.parentNode);
      var link = 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;
    var listitem = this.lastOpen.parentNode;
    var link = this.lastOpen;
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    var opts = [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(opts, 'y', 1);
       break;
      case this.downKeyCode:
       found = this.getElementForKey(opts, 'y', -1);
       break;
      case this.leftKeyCode:
       found = this.getElementForKey(opts, 'x', 1);
       break;
      case this.rightKeyCode:
       found = this.getElementForKey(opts, 'x', -1);
       break;
      case this.escKeyCode:
      case 9:
       this.clearSelection();
       this.hasFocus = false;
      default: return;
    switch (found)
      case 0: return;
      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 = opts[found].getElementsByTagName('a')[0];
    if (opts[found].nodeName.toLowerCase() == '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 further event handling by the browser
    return Spry.Widget.MenuBar.stopPropagation(e);
    Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = 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 bubbled text events
      return;
    if (listitem.closetime)
      clearTimeout(listitem.closetime);
    if(this.currMenu == listitem)
      this.currMenu = null;
    // move the focus too
    if (this.hasFocus)
      link.focus();
    // show menu highlighting
    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)
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = (menu) ? true : false;
    if(this.bubbledTextEvent())
      // ignore bubbled text events
      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, sibling)
    var child = element[sibling];
    while (child && child.nodeName.toLowerCase() !='li')
      child = child[sibling];
    return child;
    Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
    var found = 0;
    var rect = Spry.Widget.MenuBar.getPosition;
    var ref = rect(els[found]);
    var hideSubmenu = false;
    //make the subelement visible to compute the position
    if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
      els[1].style.visibility = 'hidden';
      this.showSubmenu(els[1]);
      hideSubmenu = true;
    var isVert = this.hasClassName(this.element, this.verticalClass);
    var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
    for (var i = 1; i < els.length; i++){
      //when navigating on the y axis in vertical menus, ignore children and parents
      if(prop=='y' && isVert && (i==1 || i==2))
       continue;
      //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore 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;
    // hide back the submenu
    if (els[1] && hideSubmenu){
      this.hideSubmenu(els[1]);
      els[1].style.visibility =  '';
    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;
       else
        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)
        var css = document.defaultView.getComputedStyle(element, 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(element, 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) {
      return false;
    if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
      //element must be visible to have a box
      return false;
    var ret = {x:0, y:0};
    var parent = null;
    var box;
    if (el.getBoundingClientRect) { // IE
      box = el.getBoundingClientRect();
      var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
      var scrollLeft = 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 & (safari absolute) incorrectly account for 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;
    else
      parent = null;
    if (parent.nodeName){
      var cas = parent.nodeName.toUpperCase();
      while (parent && cas != 'BODY' && cas != 'HTML') {
       cas = parent.nodeName.toUpperCase();
       ret.x -= parent.scrollLeft;
       ret.y -= parent.scrollTop;
       if (parent.parentNode)
        parent = parent.parentNode;
       else
        parent = null;
    return ret;
    Spry.Widget.MenuBar.stopPropagation = function(ev)
    if (ev.stopPropagation)
      ev.stopPropagation();
    else
      ev.cancelBubble = true;
    if (ev.preventDefault)
      ev.preventDefault();
    else
      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];
    })(); // EndSpryComponent
    PORTION OF SOURCE CODE CONCERNING MENU BAR:
    <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">Home</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
            <ul>
              <li><a href="about_us_about_our_story.html">Our Story</a></li>
              <li><a href="about_us_about_our_mission.html">Our Mission</a></li>
              <li><a href="about_us_about_our_president.html">Our President</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">Products</a>
            <ul>
              <li><a href="in_production.html" class="MenuBarItemSubmenu">Bags</a>
                <ul>
                  <li><a href="in_production.html">Backpacks</a></li>
                  <li><a href="in_production.html">Purses</a></li>
                  <li><a href="in_production.html">Wallets</a></li>
                  <li><a href="in_production.html">Yoga Bags</a></li>
                </ul>
              </li>
              <li><a href="in_production.html">Hats</a></li>
              <li><a href="in_production.html">Hair Accessories</a></li>
              <li><a href="in_production.html">Necklaces</a></li>
            </ul>
          </li>
          <li><a href="in_production.html">Services</a></li>
          <li><a href="blog_page.html">Blog</a></li>
          <li><a href="policy_page.html">Policy</a></li>
          <li><a href="contact_us.html">Contact Us</a></li>
        </ul>

    I just solved myself. Thank you to anyone who spent time to look at my question though. I really appreciate it.

Maybe you are looking for

  • Portege M200 - Cannot access recovery console

    Hi, Yesterday my anti-virus software let me know a virus was trying to access my computer, had quarantined it and asked for a reboot of my Portege M200 to remove it completely. On rebooting, the notebook did not actually reboot and just hung. It gets

  • How to make AirPlay mirroring working on Mac mini mid 2011?

    Cannot figure out how to use AirPlay mirroring knowing That ii have: 1. Mac mini mid 2011 2. Apple Tv 3 5.0 3.osx 10.8 Please help

  • .swf won't load remotely...please help

    Ok, so I have been working with the FlipBook dreamweaver extension and once I upload to my server the .swf file won't load. However, everything works like a charm when tested locally. All corresponding xml and js files are in place and the code looks

  • Operating system call w2k and linux

    Hello: I am not a programmer but i nedd a routine to do an operating system call and execute a batch or shell set of commands, do anyone know how can i do it? thanks a lot in advance

  • Cover Flow on JavaFX in Swing GUI

    Speaking staff, all good? First I apologize for my bad English! Well, the question is as follows. I created a class in JavaFX, where this class requires some common parameters. This class creates a CoverFlow, like when you pick an album on the iPod.