Using CS3 Dreamweaver Menu Spry Widget

Only in Internet Explorer when one selects the menu drop down, instead of menu dropping down it goes up. I have tested in other browsers, and no problem, I also noticed it seems to work in IE8 but not in IE 6 or 7. How can I fix this..??
Thank You for any help.
nfcsrg

I have updated the Spry Assets as suggested, but still have
the same results. Removing the float:left for the menu bar doesn't
help with the item alignment in IE6 and actually introduces a
problem in the current version of Firefox, so that isn't the
problem either.
Any other thoughts? The only thing that seems to force the
menu bar to display horizontally in IE is to have fixed widths for
the list items in the unordered list (ul.MenuBarHorizontal li). As
soon as I change that from a defined width to auto, or remove the
width designation altogether, it falls back to a vertical
arrangement in IE6, though it works in all the more recent browsers
just fine. We'd rally prefer to let the list items size
automatically, but if there is no way around it, I'll have to try
to replicate that effect by assigning a different width to each
item. That will add a lot of extra code, unfortunately.
Thanks.

Similar Messages

Can someone help with insertion of Flash actionscript 3.0 swf into Dreamweaver spry widget panel?

Working on a thesis project due soon... Created flash actionscript 3.0 swf for home page, text plus image, previews beautifully in Flash Publish, stored in my root folder, previews great when I open it in the root folder, dragged and dropped it into my dreamweaver code page, within a spry widget framework, size is perfect. and upon view in design or browsers or browser lab, I just get a nice empty white box. In design view, I see the F symbol and when I click play in properties, I get a message that says "Unable to find the plug in that handles this media type. Dreamweaver looks in both the "config/Plugins folder and the plug in folder for each o your installed browsers". I have Flash Professional CS 5. Reinstalled it just in case that was the issue with the plug in and didn't resolve the problem. Dreamweaver version is CS5. Using a template with spry widget panels. Before I inserted the swf, the preview in browsers and browser lab was fine on the spry widget and background. PC is windows, 32 bit, with ms office suite 2010 upgrade on it. Appreciate any advice.

my first trace on the hz position and vt position outputs but the trace for "scroll positions" and "new scroll positions" is not outputting.
i recieve this output when i click the 'next' and 'back' buttons within the menu9.SWF.
[Event type="iwannaresetscrolling" bubbles=true cancelable=false eventPhase=2]
does this seem right?
import fl.events.ScrollEvent;
aSp.setSize(600, 350);
function scrollListener(event:ScrollEvent):void {
trace("horizontalScPosition: " + aSp.horizontalScrollPosition +
       ", verticalScrollPosition = " + aSp.verticalScrollPosition);
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener);
function completeListener(event:Event):void {
trace(event.target.source + " has completed loading.");
// Add listener.
aSp.addEventListener(Event.COMPLETE, completeListener);
aSp.addEventListener("main swf", scrollResetListener);
function scrollResetListener(event:Event):void {
     trace("Scroll positions", aSp.horizontalScrollPosition,aSp.verticalScrollPosition)
     aSp.horizontalScrollPosition = aSp.verticalScrollPosition = 0;
     trace("New scroll positions", aSp.horizontalScrollPosition,aSp.verticalScrollPosition)
aSp.source = "menu9.swf";

Spry Widgets...

What is the overall impression of using spry widgets for web design. I've used it to create a very nice menu/nav bar but with .css seeming so popular I was wondering from a developers and designers preference... Is it a good choice to use?

One should always try to use less scripts and more CSS because some users are paranoid about allowing any scripts to run on their system.
JavaScript is relatively safe, have a look here from a Microsoft programming engineer.
Also, in IE, the default configuration is not to allow any scripts to run and if a page contains such scripts, you normally get a frightening warning. this alerts your users not to continue with your site unless you are some big boys like M$, Amazon, Adobe, Yahoo, Google etc.
With the exception of browsing a website local to my system, I have not heard of IE blocking or warning of JavaScripts running in a program. After all DW makes grateful use of JavaScript to make it user friendly.
Now you know this, Spry Widget is a nothing more than scripts pinched from open source distributors and put together by Adobe.
The JavaScript that is used by Adobe's Spry widgets, has been compiled by some very smart, Donald Booth to name one, people. Spry is marketed as a JavaScript library.
If it is true that JavaScript is dangerous, why does my bank choose to use JavaScript in their website? Why do Governments all over the world choose to use JavaScript? Why do widgets from Extend Studio, DMXZone, PVII, Webassist, Linecraft etc choose to use JavaScript? In fact this very page that you are viewing shows
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <title>Adobe Forums: Spry Widgets...</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript">
    if (top != self) {
        var isSafeTopUrl = false;
        try {
            var topUrl = top.location.href;
            var topUrlQsIdx = topUrl.indexOf('?');
            if (topUrlQsIdx > 0) {
                topUrl = topUrl.substring(0, topUrlQsIdx);
            topUrl = topUrl.toLowerCase();
            var safeTopUrls = new Array(
                'http://forums.adobe.com/skin-basic.jspa',
                'http://forums.adobe.com/skin-advanced.jspa',
                'http://forums.adobe.com/skin-advanced!UploadSkinZip.jspa',
                'http://forums.adobe.com/skin-palette.jspa',
                'http://forums.adobe.com/skin-palette!start.jspa'
            for (var i = 0; i < safeTopUrls.length; i++) {
                if (safeTopUrls[i].toLowerCase() == topUrl) {
                    isSafeTopUrl = true;
                    break;
        } catch (err) {
        if (!isSafeTopUrl) top.location = location;
</script>
as the first 20 or so lines. Why would they if it is dangerous?
Just a few ponderings and maybe to set the record straight.
Gramps

Menu Bar Widget works in IE not Firefox

I am using the horizontal menu bar widget on this Web page:
http://www.ucg.org/booklets/FM/new/
. The drop down under the TABLE OF CONTENTS works as intended in
IE, but in Firefox the drop down does not show at all. I am
wondering if Firefox is not able to properly view the constructor I
built as an include within my top navigation. Any help is
appreciated.

I am having a similar issue with the horizontal menu bar. It
works perfectly fine in IE 7, but when I tested it in Firefox only
the first and third, of four, menus actually drop down.
Unfortunately I can't actually show you the error since I this is
only a pre-release version and as such it hasn't been uploaded to
the web, but I have posted images of the issue
Firefox working on the first :
http://www.flickr.com/photos/80733324@N00/2343834946/
Firefox not working on the second :
http://www.flickr.com/photos/80733324@N00/2343834840/
IE 7 working on the second :
http://www.flickr.com/photos/80733324@N00/2343005261/

Dreamweaver Help | Working with the Spry Menu Bar widget

This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html

Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Editing CS3 Spry widget

Hi,
I have created a accordion menu using a spry widget built
into Dreamweaver CS3. However I want to amend this so that the menu
is collapsed until the user clicks on a category.
Do I have to amend the CSS or the javascript to make it
collapsed to begin with?
Any help would be appericated.
Thanks
Gary

When you hover your mouse over the spry collapsible panel you
will get a blue tab, click it. The properties panel will give you
the widget controls. There you can set the default state as
closed.

Add Spry Widgets to Dreamweaver Insert Bar Spry Group

Hi. I'm trying to work out how to add Spry widgets to
Dreamweaver's
Insert bar.
I downloaded Spry for Ajax 1.6 and copied the the contents of
the
SpryTooltip Folder.
I did a search in Adobe Dreamweaver's program folder for
everything Spry.
I pasted SpryTooltip everywhere in Dreamweaver that Spry
references
exist. I even created a .png icon for Spry ToolTip in:
Adobe Dreamweaver CS3\configuration\Objects\Spry
I opened Dreamweaver and there it was in my insert bar! My
icon for Spry
tooltip!
I tried to insert it into a blank age and got the message:
"Trigger
event missing" or something like that.
I'm sure there must be a way to add these new widgets to
Dreamweaver's
insert bar in the Spry group.
Can someone please tell me how to do it. Starting with
SpryTooltip.
and...
I might as well go ahead and ask how to add new Spry Effects
to
Dreamweaver's behavior panel as well. Let's say "Pulsate" for
an example.
PS. I've already asked this at the Spry Forum. No one has
replied yet.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1312010&enterthread=y
Thank you!
Dameon

hey,
I am a newbie to Spry too. I asked a similar question in the
Spry Forum.
It seems that you can not get the widgets into the Insert Bar
or on theBehavioral Panel.
To get the widgets to work, you only have the option to link
to them from your spry folder.
Spry is exciting, yet, it is still a new method, so the
WYSIWYG interface thing is still developing. Unfortunaly, if you
want to use Spry, you need to get dirty with the code stufff.
So, I too, use Spry sparingly.....
Hope that helps.

Spry widget menu bar as a library item - problems

I created a spry vertical menu bar and made it a library item. The original works great, however when I insert the library item into its own div tag on another page, the submenus will not pop out, either in DW or the browser view. The div tag is the correct size and I made the z index high enough. Here is the code of the page that works properly:
<!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>DM Consulting Dry Dock Training</title>
<link href="css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
    <div id="content">
      <p><span class="bolder1">D</span><span class="bolder1">M Consulting </span><span class="lineheight">provides Dry Dock Training, Dry Dock Conferences,<br />
        Dry Dock Software and Dry Dock Consulting      for:</span></p>
      <ul>
        <li class="lineheight"> Dock Masters</li>
        <li class="lineheight">Docking Officers</li>
        <li class="lineheight">Dry Dock Crews</li>
        <li class="lineheight">Engineers</li>
        <li class="lineheight">Naval Architects </li>
        <li class="lineheight"> Port Engineers</li>
        <li class="lineheight">Program/Project Managers</li>
        <li class="lineheight">Marine Surveyors</li>
        <li class="lineheight">Owners' Representatives</li>
        <li class="lineheight">On-site Representatives</li>
        <li class="lineheight">Consultants</li>
        <li class="lineheight">Others Involved or Interested in
          the <br />
          Dry Docking of Ships and Vessels</li>
      </ul>
      <div id="testimonials">"The course was excellent, straight forward and comprehensive. Instruction was great, expected <br />
        "death-by-power point" but was pleasantly surprised.
        I am better acquainted w/dry dock basics after the
        course and can trust the accuracy of the training
        based on the extensive experience of the instructors. Thank you!
        Very informative, very thorough."
          - David, Australia<br />
      </div>
      <div id="movie">
        <object width="560" height="340">
          <param name="movie" value="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" />
          <param name="allowFullScreen" value="true" />
          <param name="allowscriptaccess" value="always" />
          <embed src="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed>
        </object>
      </div>
      <div id="moreTestimonials">»»» click here for more testimonials «««</div>
      <div id="footer">© COPYRIGHT 2010 DM CONSULTING</div>
    </div>
    <div id="navbar">
      
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
        <li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
          <ul>
            <li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
            <li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
            <li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
            <li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
          </ul>
        </li>
        <li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
        <li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
        <li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
        <li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
        <li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
        <li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
      </ul>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Here is the code for the page that DOESN'T work:
<!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>Training Course Schedule</title>
<link href="../css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header"><img src="../images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="../images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
    <div id="content">
      <h2><span class="bolder1">Training Course Schedule</span><span class="bolder1"></span></h2>
      <p><br />
      Class sizes are limited so please register early. Early registration and payment provides the best value.<br />
<br />
      </p>
<p class="underline"><strong>4-7 October 2010 •   Honolulu, HI, USA </strong></p>
      <div id="schedulephoto"><img src="../images/conference-rm_train_s.jpg" width="250" height="123" alt="image" /></div>
      <p>The training will be held in Pearl Harbor, Hawaii, USA. <br />
        <a href="Registration_Hawaii.html">Registration form</a><br />
        <br />
      </p>
      <p class="underline"><strong>15-18 November 2010   •   Virginia Beach VA, USA</strong></p>
      <p>The training will be held in Virginia Beach, Virginia, USA. <br />
        <a href="Registration_Virginia.html">Registration form</a><br />
        <br />
      </p>
      <p class="underline"><strong>11-14 May 2011 •   London, United Kingdom</strong></p>
        The training is held in conjunction with the Royal Institution of Naval Architects (RINA). Registration and payment will be made directly to RINA. <br />
        Visit RINA's <a href="http://www.RINA.org.uk" target="_blank">website</a> and go to "Events" or call +44 (0) 20 7201 2401.<br />
<br />
      </p>
      <p><strong>Your Location</strong></p>
      <p>Training tailored to your organization's needs, including training at your facilities, <br />
        is also available.    </p>
    </div>
    <div id="nav3">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
        <ul>
          <li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
          <li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
          <li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
          <li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
      <li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
      <li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
      <li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
      <li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
      <li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
    </ul>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
I understand about having the script and link element that connect my page to the dependent files in the SpryAssets folder in the header and the JavaScript function cal at the bottom on each page. I don't know what else to do - HELP!

Welcome to the Dreamweaver world!
Well, having your index.html page at the top/root level is important, as that is the default page by which people will enter your site.
Having other pages in folders is fine...I do it all the time in order to keep departments or categories of information sorted.
One characteristic of having pages in folders is that the hierarchy of files in folders (perforce) puts them at different depths in the site.
This is not inherently a bad thing! Just one to remain aware of. When you look at your site files in the Files Panel, you can see a graphical representation of those different levels.
But the nature of a library item is that it is identical in all its instances, which is what makes it useful...change it in the library, and it changes site-wide. The down-side of that identity is that when your files are at different depths in the hierarchy, their links back to, say, home (or any other same file) will change depending on the depth. You can see this if you make a link on a page, then drag the page (in the Files Panel) to a different depth...say, into a folder when it started at root level, or vice versa. Check the link, and you will see that it automatically adapted to the new path.
Library items do not do that; they do not change, so some of your links will be 'wrong' when you refer to pages that have different paths than the ones originally set up in the library item... because of the change in hierarchy.
All this is, of course, reliant on your creation of the site in the first place, as defining the root folder's location on your computer gives Dreamweaver a starting point for handling (juggling?) all the location-information for your site's files.
Beth

Adobe recommends: Customizing a Spry Menu Bar widget

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Our second recommendation is a piece by David Powers:
Customizing a Spry Menu Bar widget
The tutorial takes you through some of the most common styling tasks for the difficult-to-style Spry Menu Bar widget in Dreamweaver.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices

Customizing a Spry Menu Bar widget
The tutorial takes you through some of the most common styling tasks for the difficult-to-style Spry Menu Bar widget in Dreamweaver.
Why is such an important article posted on David's private website instead of on Adobe's own website? What is the guarantee that the article will remain on David's website for some years to come! Such an important article should remain online for at least 5 years before it is deleted to create room for new articles.

Spry Widget Horizontal Menu IE Issue

Hi,
I am new to spry widgets. I am building this site in dreamweaver and am using the spry widgetfor my nav bar.
The issue is, in Firefox the menu looks the way it is supposed to, but in IE it has a black box. I have tried a few things,
but no luck. I am sure this is simple but I couldnt figure it out.
http://prorecllc.com/home.html
Any help will be appreciated, thanks in advance.

I've been having problems with the horizontal menu in IE as
well. I have discovered that to center the main menu items without
having the submenu begin at the center of the parent item, put the
"text-align:center" under "ul.MenuBarHorizontal a" rather than the
"ul.MenuBarHorizontal li". I'm still working on making the submenu
items look nice - I don't like them centered but if they are
text-aligned left then they end up beginning far to the right of
the parent item (because the parent is centered with respect to
it's container).

Dreamweaver CS6 - Spry Menu for iPhone

Hi
Seems that spry menu in CS6 doesn't work on iphone/pad?
Can't open the submenu
Greetings
Philipp

@c-studio.eu
I have used all of the Spry framework, partially because they come free of charge with DW and partially because there are very strong components. All this despite their age.
The strongest of these are the various dataset variations (XML, HTML, JSON, CSV and YQL) and Spry validation widgets.
The weakest one is the menubar, mainly because it does not support touch screens, or conversely, touch screens do not have a hover event. Spry UI Menubar, also known as version 2.0, does have the ability to be used with touch screens, but because it is not integrated with DW, it is harder to modify once it has left the Widget Browser.
The original menubar can still be used for touch screens if it is single level, i.e. there are no sub-menus or when a submenu is used, the main menu item does not link to another page as in
<li><a class="MenuBarItemSubmenu" href="#">About Us</a>
<ul>
    <li><a href="about.html">Our Company</a></li>
    <li><a href="history.html">Company History</a></li>
    <li><a href="mission.html">Mission Satement</a></li>
</ul>
</li>
The above will work in touch screen devices.
As David has suggested, no real effort has been made by Adobe to further develop the framework, giving a strong impression that they will not support it in future versions of DW. Much is the pity.
I tend to use jQuery substitutes, not because they are easier to use, but because they are free of charge and are kept up to date. Adobe has also invested in jQuery, particularly the mobile stuff.
As far as commercial alternatives are concerned, there are a number of well-formed widgets out there, one that is used by a number of prominent forum users. Other available widgets come from Webassist, DMXZone and CodeCanyon or if you Google the subject, your sure to find a few others.
And to join others who have shown their preference, lately I have been using Webassist's CSS Menu Writer, http://www.webassist.com/dreamweaver-extensions/css-menu-writer/
Gramps

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

Dreamweaver CS4 Errors, Spry widget not working. Please Help!

I am redesigning a website and downloaded an html file from the present contact page. I opened it in Dreamweaver and I started to have this errors. The html file I opened has some JavaScripts in it and I believe, the the scripts got a conflict with Dreamweaver CS4. I already deleted these files I tried to open and still I'm encountering these errors.
These are the errors I'm getting:
1. When I open the Dreamweaver, this message pop-ups:
   "While executing onLoad in RecordsetFind.htm, the following JavaScript error(s) occured:
    In file "RecordsetFind"
    findRs is not defined."
2. I click OK. Then I'm getting this message:
   "While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
    In file "Design Notes_onOpen"
    onOpen is not defined."
3. I just click OK. Then, when I open an html file to edit or create a new one, this error pops up again:
   "While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
    In file "Design Notes_onOpen"
    onOpen is not defined."
4. I will again just click OK, then this error appears:
   "The following translators were not loaded due to errors:
    Coldfusion.htm: has configuration information that is invalid.
    SpryWidget.htm: has configuration information that is invalid."
5. Then, I will just click OK again. Then, when I'm working with the projects or creating a new project with Spry, it is not working properly anymore. I have to go the code and update the Spry list or content manually.
6. When I close Dreamweaver, I'm always having this error:
   "While executing onLoad in TeamAdminTempDelete.html, the following JavaScript error(s) occured:
    In file "TeamAdminTempDelete"
    delTempFile is not defined"
I tried uninstalling the Dreamweaver and installing it again, but it did not work.
What should I do to make the spry working again and to remove all these annoying errors? By the way, all my Spry widgets are not working and these errors I'm encountering in all of the Sites I'm working on. How can I make it work again? I tried looking for troubleshoot in CS4, but I could not see one, only in CS3.
Please help.

See if the following helps (found in Dreamweaver FAQ)
JavaScript and other unexpected errors
Mark A. Boyd
Keep-On-Learnin' :-)
This message was processed and edited by Jive.
It shall not be considered an accurate representation of my words.
It might not even have been intended as a reply to your message.

Add Spry Widgets to Dreamweaver Insert Bar

Hi. I'm trying to work out how to add Spry widgets to
Dreamweaver's Insert bar.
I downloaded Spry for Ajax 1.6 and copied the the contents of
the SpryTooltip Folder.
I did a search in Adobe Dreamweaver's program folder for
everything Spry.
I pasted SpryTooltip everywhere in Dreamweaver that Spry
references exist. I even created a .png icon for Spry ToolTip in:
Adobe Dreamweaver CS3\configuration\Objects\Spry
I opened Dreamweaver and there it was in my insert bar! My
icon for Spry tooltip!
I tried to insert it into a blank age and got the message:
"Trigger event missing" or something like that.
I'm sure there must be a way to add these new widgets to
Dreamweaver's insert bar in the Spry group.
Can someone please tell me how to do it. Starting with
SpryTooltip.
Thank you!
Dameon

For the dreamweaver related questions, i think u have more
luck ( & faster awnser) asking it in the Dreamweaver forum
selection that can be found here;
http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=12

CS3 Fix for Spry Horizontal Menu bar/drop boxes positioning bug in IE?

I have searched threads to see if there is an "easy" solution for the incorrect positioning of horizontal menu bar drop boxes in IE browser older versions(mine showed up at the top of the screen and mysteriously included the word "false" in older IE ONLY). Is there a downloadable patch or quick fix for this problem at this point in time? I saw an available download for a newer version of Spry but seems like overkill for this small issue. I am not an experienced web designer or computer geek, but can follow specific directions I am given. The horz bar with drop boxes showed correctly in Firefox and other browsers but not in older(?) IE. For now, I've simply removed the drop boxes to make the page look respectable, but boy did it look good with those boxes. I am hoping somebody can talk to me without lots of teckkie terms. Though I appreciate and love all of you tecs out there.

You really should install the Spry update as it fixes some IE issues that the earlier versions of Spry had. Then use the Dreamweaver Command menu to update your Spry files within your site and you should have the latest and be ready to go. If you're still having issues you may want to also check out the Spry forum: http://forums.adobe.com/community/labs/spry
Let us know if the update doesn't solve your particular problem.

Using CS3 Dreamweaver Menu Spry Widget

Similar Messages

Maybe you are looking for