Spry menu bar changed since I tried to split cells in a table! Help!
I am VERY new to web design, so I apologize in advance for being ignorant. I am trying to learn!
I had inserted a spry menu bar that looked fine and even tested fine!
I subsequently tried to split a section of my table in the web page in order to have 3 columns of centered text. The first time I did this, the spry menu bar became vertical even though it is listed as horizontal. I looked up a forum answer, copied the code from the suggestion, and that seemed to fix the problem (although I still don't know what EXACTLY happened)
I tried to split the table again (I had undone everything prior to this), only this time, the spry menu bar is located outside the page in the left hand corner where my background (I have a wrapper) is. I tried opening another page where I already had a nice spry menu bar, and it did the same thing!! This makes me think it is the CSS sheet for the menu bar that was modified somehow when I split the table. I'm pasting the CSS here below, so if anyone sees any issues that might cause this problem, please let me know!! I have been working for the most part in design view, and haven't really modified the code other than to put a wrapper in and a facebook like button, which I've now lost in the slitting cells catastrophe. Thanks in advance!!!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
list-style-type: none;
font-size: 12pt;
cursor: default;
width: 60%;
float: left;
/* 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: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-color: #99CC66;
/* 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: auto;
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: auto;
/* 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: #99CC66;
padding: 0.5em 0.75em;
color: #333;
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: #336600;
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: #33C;
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;
/* 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;
Well, I took a picture of my dreamweaver screen, so you can see what I am looking at...
You can see that the spry menu bar shows up in the top left corner in my design view, but on the website, it is located in the correct place! Maybe it is a Dreamweaver problem??? This happened when I tried to split the cell underneath the section that says "Let NOLA Scribes help you!" into 5 cells so that I could insert 5 differnet pictures and captions. Now, when I open the other linked pages in Dreamweaver, it does the same thing! I'm using an older version of Dreamweaver, but from what I read, that shouldn't be an issue. Thanks in advance for your help!
Similar Messages
-
Trying to Center a Spry Menu bar.
Hi
I must be a bit stupid as I really can't work this out.... How do I center a Spry menu bar?
I have tried putting the code in the head of the document page as follows, but it is not working.
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Give the menu bar a width and set the margins to "auto"
* so that the browser does the centering.
ul.MenuBarHorizontal {
width: 32.2em;
margin: auto;
-->
</style>
What am I doing wrong?
Also, If my page is a fixed width of 850px how wide should I make the width of the menu bar?
Many thanks
PiupiutooHave a look here: http://foundationphp.com/tutorials/sprymenu/centering.php
I hope it helps.
Ben -
I do not have the 'Advanced' tab on the menu bar. I am trying to change ringtone on my iphone 4s. Have done the following: Right cick on song, entered the start and stop times, but unable to proceed as need 'Advanced' tab in order to change to option.
You don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O. -
Is it possible to change the height of Spry Menu Bar items?
I'm new to websites and have been trying to understand the CSS of the Spry menu bar. I've managed to put a horizontal menu bar in place and with the help of some previous discussions in this forum, have changed the colours of the menu items and have even managed to centre the text - Thanks!
However, I really would like to have a smaller menu bar - height wise.
I've tried reducing the default height of the menu bar items by adding a height and by reducing the font size and padding. The results have been varied. In Firefox and in Dreamweaver's 'live view' there is still a thin line showing underneath my horizontal menu which is the background colour of the div my menu sits in. In IE there is a similar 'chunk missing' from the bottom of the items.
Is this something that can be done? I've seen lots of help on how to change the width of the items, but have not found any which suggest that the height can be changed.
GillSure. You just need to be thorough. Keep in mind that in a Spry Menu Bar you are making the link-text in the list-items block elements, so you will want to change the line-height of the a element. Pick style selectors in the css stylesheet that end in a, with or without an additional class (a.classhere), and play with the line-height.
Another attribute you can consider is the difference in height between Cap and lower case and All caps. You can usually get away with a smaller line-height and a smaller font-size with all caps, because there are no descenders on the text to require more line-height. Keep in mind also that when you state a line-height, your text will center vertically in the line-height, as far as I know, so you might even get away without top and bottom padding.
Beth -
Thank you for viewing my post!
I am having trouble editing the default spry menu bar .css file
How do I edit the spry menu .css file to display two different roll over colors for the menu and submenu?
My goal is to have a blue menu bar with gray rollover color, gray drop down submenus with their own orange rollover color.
I tried giving ul.MenuBarHorizontal li its own style but I think something else in the .css is preventing this (or my own skill is).
Thank you ahead of time to the kind soul who can help me with this!Have a look at this David Powers tutorial http://foundationphp.com/tutorials/sprymenu/customize1.php
I hope this helps.
Ben -
Spry menu bar submenu disappears when cursor changes
Hello.
I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
Can anyone tell me how to prevent that from happening?LICAP Webmaster wrote:
Can anyone tell me how to prevent that from happening?
Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
If you put your test page and all dependent files online, and post a link here, we will gladly check that:
Your server is working
That all required HTML code is correct
That your folder hierarchy is correct
That all required dependent files (HTML, CSS, JS, Images etc.) are uploaded to proper folders
That Javascript Versions are correct
That link paths are all correct and case sensitive
Sounds like your submenus may be positioned with a small gap from your top-level links -
Trying to make spry menu bar work on iphone
I would prefer my horizontal spry menu bar to be centered at the top of the page, but to do this I have to make it a fixed width.
This width is too wide for an iphone so the outermost buttons are not accessable.
I have managed a workaround by making the width auto and aligning left.
This makes each menu item cascade under the next so they are all accessable, but it's not brilliant.
You can see this by resizing the browser on the about jill page.
I tried the spry menu bar 2 widget, but couldn't customise the colours to make it look like my existing menu.
What is the best way get this menu working normally on an iphone/android etc?
Cheers
Ps. if anyone answers with code suggestions, could you tell me exactly where that code goes and in what file.Earlier iDevices & Droids are going to have trouble with a position:fixed menu. Just thought you should know.
What is the best way get this menu working normally on an iphone/android etc?
With Spry Menu 2.0.
Before you tackle customizing Spry Menus, please read the following links. These articles will help you save time and avoid many common problems.
The Ten Commandments for Editing Dreamweaver’s Spry Menubars
http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php
Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/ -
Make changes to a spry menu bar
I have used a spry menu bar 2.0 widget with the adobe widget browser by David Powers in my web site, and its working really well but now I have found I need a new sub menu, off an existing sub menu, I have read the instructions to try and put it in, done what it said I type the name in then and done the out dent, but when I try to do the link it wont work, I type the link in the link box in properties and as soon as I move my curser away the text disappears. Can any one help please.
The following is what the markup for your menubar will look like if you want to do as you say
<ul id="MenuBar">
<li> <a href="index.html">Home</a></li>
<li> <a href="commercial-contract_carpet_and_flooring.html">Commercial</a></li>
<li> <a href="residential-domestic_carpet_and_flooring.html">Residential</a></li>
<li><a href="information.html">Information</a>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="photo_slideshows/picture_gallery.html">Products</a>
<ul>
<li><a href="Products_1.html">Products 1</a></li>
<li><a href="Products_1.html">Products 2</a></li>
</ul>
</li>
<li><a href="tips_and_tricks.html">Tips_and_Tricks</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
</ul>
</li>
<li><a href="inspections.html">Inspections</a></li>
</ul>
Gramps -
Spry menu bar woes (add submenu levels and edit width)
So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one. So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise: when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a> <ul> <li><a href="#">Digital Matrix Systems</a></li> <ul> <li><a href="#">R2 Digital Audio Matrix</a></li> </ul> <li><a href="#">pre-amplifiers & mixers</a></li> <ul> <li><a href="#">PMX124</a></li> </ul>
the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code? i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull. Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
HTML code for the menu:
<tr> <td><ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a> <ul> <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a> <ul> <li><a href="#">Digital Matrix Systems</a></li> <ul> <li><a href="#">R2 Digital Audio Matrix</a></li> </ul> <li><a href="#">pre-amplifiers & mixers</a></li> <ul> <li><a href="#">PMX124</a></li> </ul> <li><a href="#">music Sources</a></li> <li><a href="#">amplifiers</a></li> <li><a href="#">paging</a></li> <li><a href="#">speakers</a></li> <li><a href="#">microphones</a></li> </ul> </li> <li><a href="#">racks and stands</a></li> <li><a href="#">cables</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a> <ul> <li><a href="#">Who are we?</a></li> <li><a href="#">history</a></li> <li><a href="#">contact us</a></li> <li><a href="#">philosophy</a></li> <li><a href="#">careers</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a> <ul> <li><a href="#">catalogs</a> </li> <li><a href="#">manuals</a></li> <li><a href="#">software</a></li> <li><a href="#">documents</a></li> <li><a href="#">pricelists</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li> </ul></td>
sprymenuhorizontal.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: 14px; cursor: default; width: 1010px; font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ 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; 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 { list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 166px; position: absolute; left: -1000em; background-color: #6C6C6C; height: 0px; margin-top: 0px; margin-right: 0em; margin-bottom: 10px; margin-left: 0em; text-align: right; text-indent: 0em; padding-top: 0px; padding-right: 0em; padding-bottom: 0px; padding-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #666; border-right-color: #666; border-bottom-color: #666; border-left-color: #666; } /* 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; height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; height: 41px; margin-top: 0%; margin-right: 0%; margin-bottom: 0px; margin-left: 162px; float: right; } /* 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 #666; background-color: #6C6C6C; height: 0px; padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background-color: #6C6C6C; padding: 0em; color: #FC0; text-decoration: none; font-size: 14px; margin-left: 0em; } /* 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: #FC0; 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: #FC0; 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: 98% 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: 98% 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: 98% 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: 98% 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; } }[/SPOILER] any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...since the layout of the pasted text got all weird, here i'm trying it again.
sprymenubarhorizontal.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: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
/* 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;
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
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
/* 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;
height: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 166px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
/* 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 #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
/* 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: #FC0;
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: #FC0;
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: 98% 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: 98% 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: 98% 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: 98% 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; -
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> -
Trouble with Spry Menu Bar Not Opening on Hover
I have two Spry Menu Bars on this one page. They were both working fine. Now the menu bar on the top right is not opening on rollover. I have uploaded the Spry .JS and .CSSfiles to the server.Could it be that I added 2 to the names of the CSS styles, but not all of them? I just tested them all with 2 after the style name, and it didn't fix it.
I also noticed that the ability to edit these two navigation bars using the Property Inspector went away. I can't seem to click on them to edit. Now I edit them through the code only.
Rebuild it on another page, and paste in the code?
Suggestions?
ALso, getting an error message on line 2 of HTML below, which I don't remember editing.
I will paste the template page HTML, then the CSS, then the Javascript Spry file for Menu Bar Horizontal. I did not edit the JS file at all.
Link to the uploaded files: http://www.sproulcreative.com/filetest/panin_website/
Thanks for any help you can offer.
D
HTML for template page:
<!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>Press Reviews of Paninos Italian Restaurant Food in three Colorado Locations</title>
<!-- TemplateEndEditable -->
<link href="../styles_paninositalianrestaurant.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar_topnav.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal_topnav.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- TemplateParam name="LinksSidebar" type="boolean" value="true" -->
</head>
<body>
<div id="wrapper">
<a href="#skiptomaincontent">
<img src="../images/spacer.gif" alt="Skip to main page content" name="spacer" width="1"
height="1" class="invisible" id="spacer"> </a><!--ANCHOR FOR SCREEN READERS-->
<!--START TOP NAV DIV-->
<div id="topnav">
<!--START TWITTER/FACEBOOK MENU BAR -->
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("twittermenu", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<ul id="twittermenu" class="MenuBarHorizontal2">
<li><a href="../paninos_local_italian_restaurant_fort_collins_colorado_springs_minnesota.html">H ome</a></li>
<li><a href="../reviews_italian_restaurant_food.html">Reviews</a></li>
<li><a href="../history_of_paninos_local_italian_restaurant_coloradosprings_fortcollins_minnesot a.html">History</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Twitter</a>
<ul>
<li><a href="http://twitter.com/Paninosfc">Follow Fort Collins, CO, Paninos</a></li>
<li><a href="http://twitter.com/paninosmn">Follow Minnesota Paninos</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu2">Facebook</a>
<ul>
<li><a href="http://www.facebook.com/search/?q=Paninos&init=quick#/pages/North-Oaks-MN/Paninos/13234142 7180?v=wall&ref=search">Minnesota Twin Cities Four</a></li>
</ul>
</li>
</ul>
<!--END TWITTER/FACEBOOK MENU BAR-->
</div>
<!--ENDS TOP NAV DIV-->
<div id="pagebg">
<div id="centralpageborder"><!--FOR BORDER TRIM & BG color-->
<!--START OF HEADERBOX-->
<div id="headerbox">
<div align="left">
<img src="../images/web_logo_paninos_final.png" alt="Paninos Italian Restaurant Logo (black text with a tomato for the letter O), Your family's Italian restaurant for over 35 years, locally owned and operated." width="215" height="118" class="paddingbottom" />
<!--START OF MAIN FOUR NAVIGATION -->
<ul id="MainFourNav" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_mainnav_locations_contact.png" alt="Paninos Italian Restaurant Locations and Contact Information: Colorado Springs, Fort Collins, Minnesota" name="locationscontactbutton" width="167" height="24" border="0" id="locationscontactbutton" /></a> <ul>
<li><a href="../contact_info_italian_restaurant_fort_collins_colorado_paninos.html">Fort Collins, Colorado, by CSU</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_downtown_colorado_paninos.html" >Colorado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_8th_street_colorado_paninos.htm l">Colorado Springs: South Eighth St.</a></li>
<li><a href="http://paninos.com/minnesota/">Minnesota website</a></li>
</ul></li>
<li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_main4nav_download_menus.png" alt="Download Italian Restaurant Menus in PDF format for restaurants in Fort Collins, Colorado; Colorado Springs, Colorado; and Minnesota" name="menudownloadbutton" width="142" height="24" border="0" id="menudownloadbutton" /></a>
<ul>
<li><a href="#"><em>Please pick your favorite Paninos:</em></a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Downtown.pdf">Color ado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Eighth_Street.pdf"> Colorado Springs: South Eighth St.</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_Fort_Collins_Colorado.pdf">Fort Collins, Colorado, by CSU</a></li>
<li><a href="http://paninos.com/minnesota/">Minnesota (go to website)</a></li>
</ul>
</li>
<li><a href="../photo_gallery_pasta_dishes_pizza_italian_food.html"><img src="../images/img_main4nav_photo_gallery.png" alt="Photo Gallery of Local Italian Food including pizza and pasta" name="photogallery" width="56" height="24" border="0" id="photogallery" /></a> </li>
<li><a href="../pizza_coupons_and_special_deals_italian_food.html"><img src="../images/img_main4nav_specials.png" alt="Pizza Coupons and Specials" name="pizzacouponsandspecials" width="71" height="24" border="0" id="pizzacouponsandspecials" /></a> </li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MainFourNav", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<!-- TemplateBeginEditable name="HeaderPhotos" -->
<p class="headerphotos"><img src="../images/imgheader_lasagna_beef_hot_cheesey_coloradosprings_fortcollins_italian_res taurant.png" width="263" height="133" /><img src="../images/imgheader_spinach_salad_with_chicken.png" width="263" height="133" /><img src="../images/imgheader_big-t-pizza2.png" width="263" height="133" /></p>
<!-- TemplateEndEditable --></div>
</div><!--ENDS HEADERBOX DIV-->
<div id="bodybox"><!--BOX AROUND MAIN PAGE TEXT, FOR WHOLE PAGE BELOW HEADER AREA-->
<div id="pagetitle"><!-- TemplateBeginEditable name="MainPageHeader" --><img src="../images/img_title_press_reviews_italian_restaurant.png" width="307" height="38" /><!-- TemplateEndEditable --></div><!--ENDS PAGE TITLE-->
<div id="innerbdybox"><!--WRAPS ALL MAIN CONTENT BELOW BODYBOX TITLE, all 3 columns -->
<div id="content"><!--WRAPS MAINTEXT AND PHOTO SIDEBAR COLUMNS-->
<div id="maintext"><!--MAINTEXT OR BODY CONTENT OF P-->
<!-- TemplateBeginEditable name="BodyTextSection" -->
<a name="skiptomaincontent" id="skiptomaincontent"></a><!--ANCHOR FOR SCREENREADERS-->
<h1>A Tradition Food And Sports: <br />
CC & Panino’s Love of Hockey Runs From Colorado to Minnesota</h1>
<h4>Byline: By Jim Bainbridge, The Gazette</h4>
<p>No Colorado Springs business has had a deeper bond with the Colorado College hockey program during the past three decades than Panino’s Restaurant, a connection seen on its walls, in its clientele and in its bloodlines.<br />
Panino’s has been tied to the school’s hockey program since the restaurant was bought in 1974 by former CC All-America hockey player Tony Frasca. It’s still the place to be on game day a generation later with his son Mike running things. <a href="http://daily.gazette.com/Repository/ml.asp?Ref=VGhlR2F6ZXR0ZS8yMDA1LzAzLzI5I0FyMDMzMDI=&Mo de=HTML&Locale=english-skin-custom"><span class="smalltext">Click here to view entire article.</span></a><br />
<span class="smalltext">(Reprinted with permission of The Gazette)</span></p>
<!-- TemplateEndEditable --> </div>
<!--ENDS MAINTEXT DIV-->
<div id="photosidebar">
<!--STARTS PHOTO SIDEBAR DIV-->
<!-- TemplateBeginEditable name="PhotoSidebar" --><img src="../images/img_waiter1_pizza_lasagna.png" alt="Happy waiter serving Pizza and Lasagna" width="190" height="158" /> <br />
<img src="../images/img_panino_italian_grinder_sandwich.png" alt="Grinder Hot Italian Sandwich called a Panino" width="190" height="158" /><!-- TemplateEndEditable --></div>
<!--ENDS PHOTOSIDEBAR DIV-->
</div><!--ENDS #CONTENT DIV THAT ENCLOSES 2 COLUMNS- MAINTEXT AND PHOTOSIDEBAR-->
<!-- TemplateBeginIf cond="_document['LinksSidebar']" --><!-- TemplateBeginEditable name="EditRegion3" -->
<div id="linkssidebar"><!--START LEFT LINKSSIDEBAR DIV-->
<p>The Gazette<br />
The Coloradoan<br />
The North Forty News<br />
Colorado Springs Times</p>
</div><!--ENDS LINKSSIDEBAR DIV-->
<!-- TemplateEndEditable --><!-- TemplateEndIf -->
</div><!--ENDS INNERBODYBOX DIV THAT WRAPS ALL 3 COLUMNS BELOW THE HEADER -->
<div id="footer"> </div><!--CLEARS CONTENT BEFORE LOWER CONTENT BORDER-->
<br />
<br />
</div> <!--****ENDS BODYBOX DIV THAT ENCLOSES PAGE HEADER BELOW "HEADER" AREA,INNERBODYBOX (FOR ALL 3 COLUMNS OF CONTENT), and FOOTER DIV (TO CLEAR CONTENT) . MOVING THIS AFER THE LINKKSIDEBAR SEEMED TO MAKE IT ALGIN CORRECTLY. PUTTNG AFTER THE PHOTOSIDEBAR MADE THE MAINTEXT HAVE SCROLL BAR-->
</div><!--ENDS CENTRALPAGEBORDER DIV-->
</div><!--ENDS PAGEBG DIV-->
</div><!--ENDS WRAPPER TO MAKE PAGE LEFT JUSTIFY -->
</body>
</html>
CSS for Spry Menu Bar:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal2
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/*margin-top: -10px; */
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-bottom: 0;
/* 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.MenuBarHorizontal2 li
list-style-type: none;
font-size: 95%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
/* 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.MenuBarHorizontal2 ul
margin: 0;
padding: 0;
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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal2 ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal2 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal2 ul
border: 1px solid #9E2532;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal2 a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #F3E8CC;
text-decoration: none;
background-color: #663300;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal2 a:hover, ul.MenuBarHorizontal2 a:focus
color: #FFF;
background-color: #663300;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal2 a.MenuBarItemHover, ul.MenuBarHorizontal2 a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal2 a.MenuBarSubmenuVisible
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.MenuBarHorizontal2 a.MenuBarItemSubmenu2
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenu2
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal2 li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
JAVASCRIPT FILE FOR MENU BAR HORIZONTAL:
/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
// 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.
var Spry;
if(!Spry)
Spry = {};
if(!Spry.Widget)
Spry.Widget = {};
// 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;
var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// load hover images now
if(opts)
for(var k in opts)
var rollover = new Image;
rollover.src = opts[k];
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
this.initialize(items[i], element, isie);
if(isie)
this.addClassName(items[i], "MenuBarItemIE");
items[i].style.position = "static";
if(isie)
if(this.hasClassName(this.element, "MenuBarVertical"))
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.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:false;';
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.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, "MenuBarActive");
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return (navigator.vendor == 'Apple Computer, Inc.' && (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, "MenuBarSubmenuVisible");
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(typeof document.uniqueID != "undefined")
this.createIframeLayer(menu);
this.addClassName(this.element, "MenuBarActive");
// 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, "MenuBarSubmenuVisible");
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
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, isie)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = false;
if(menu)
this.addClassName(link, "MenuBarItemSubmenu");
hasSubMenu = true;
if(!isie)
// 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)
if(self.bubbledTextEvent())
// ignore bubbled text events
return;
clearTimeout(closetime);
if(self.currMenu == listitem)
self.currMenu = null;
// show menu highlighting
self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
}, false);
this.addEventListener(listitem, 'mouseout', function(e)
if(self.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
clearTimeout(opentime);
self.currMenu = listitem;
// remove menu highlighting
self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
if(menu)
closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
}, false);It has to do with all of your absolutely positioned elements. What's happening is that the menu is falling behind the absolutely positioned elements on your page. Since there is nothing there, it's like trying to click a link that is outside your home while you are staring through a window. Personally with that page setup you have now I really don't see a need for absolutely positioned elements. But if you feel you will require them as part of your design you need to ensure the z-index of your menu layer is greater than that of the body elements positioned below it.
-
Hi,
Since the site isn’t online yet I posted my project for downloading. I am using Dreamweaver CS4.
For the website I am creating I would like to have a spry menu bar. I have been trying to figure this out but I can’t do it. The main file I am working with is named “theme_02_design.html” which is found in the Publish folder inside of In Play by Heather Ashley Inc. As you can see there is a left navigation area with 3 items listed (Home, Products, and Contact Us). I would like to change this into a vertical spry menu bar. Every time I try to do this the page is distorted in some way or another. I would like the menu on the left of the screen to look the same but with the vertical spry menu bar functions.
When someone visits the page I would like them to hover over the word products and have a submenu with multiple items.
It would look something like this...
Home
Products - submenu - Warm Up Series (I would insert a submenu here as well)
Contact Us Lace Up Hooded Sweatshirt
Fleece Name Pants
Shorts
Accessories
Shell Colors
Trim Colors (I would insert a submenu here as well)
Can anyone help?
ThanksI fiddled around with your file. I will attach the zip of your files.
Take a look at your page. I commented out your original navigation and added a Vertical Spry Menu Bar.
You will have to do some more adjusting, but I copied portions of your own CSS file into the Spry Menu Bar CSS.
See what you can do with it.
Beth -
Spry Menu bar 2.0 from Widget Browser only works in Firefox, not other browsers
Hello,
I have downloaded and customized the Spry Menu Bar 2.0 from Adobe Widget Browser.
I have made a seemingly functionable horizonatl navigation bar that will be displayed on all of my website's pages.
While in live view in Dreamweaver and when I preview the page in FireFox the entire navigation bar works and displays perfectly.
However, when I preview the page in another browser, like Safari, the navation does not display and shows up as an ordered list. I have tried a couple of fixes with no success. I have also spent some time searching the forums for an asnwer, but more commonly I find that people have problems with the spry menu functioning in Firefox while I have the exact opposite problem.
Please help! I'm to have this website completed by the end of next week!
Thank you!!Hi John,
Thanks, however, my site is still only on my local computer and not live or on a testing server yet. I could copy and paste my code in, I thought that may be cumbersome, but here goes :
<!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>Pennsylvania Academy of Music, Welcome</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="NavigationDec2.html" rel="stylesheet" type="text/css" />
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<title>Spry Menu Bar - Basic : December 2</title>
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryMenu.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPl ugin.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPl ugin.js'></script>
<style type="text/css">
/* 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:#f9e440;
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: 14px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:12px;
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: 750px;
.MenuBarFixedCentered {
float: none;
width: 750px;
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: 4px 6px 4px 4px;
background-color:#f9e440;
border-width:0px;
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:center;
line-height:1.4em;
color:#003366;
background-color:#f9e440;
width:82px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 8px;
.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: lighter;
font-size: 13px;
font-style: normal;
background-color:#c82f6a;
padding:2px 2px 2px 2px;
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:#c82f6a;
color:#000000;
padding: 6px 10px 6px 5px;
width: 25em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #ffff99;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #ffff99; /* consider exposing this prop separately*/
color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #ffff99;
color: #000000;
#MenuBar .SubMenu .MenuItemHover {
background-color: #cc99ff;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #FFFDB8;
color: #333366;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #c82f6a;
min-width:100px; /* 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:10px; /* '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: #c82f6a;
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: #ffff99; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #cc99ff; /* consider exposing this prop separately*/
color: #333366;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -2px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
<style type="text/css">
</style>
</head>
<body class="oneColFixCtr">
<div id="container">
<div id="Header"> </div>
<div id="mainContent">
<div id="Nav"><ul id="MenuBar">
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About Us</a>
<ul>
<li> <a href="history.html">History and Mission</a> </li>
<li> <a href="admin.html">Administration</a>
<li> <a href="faculty.html">Faculty</a>
<li> <a href="artists-in-residence.html">Artists in Residence</a> </li>
</ul>
</li>
<li> <a href="#">Programs</a>
<ul>
<li> <a href="lessons.html">Lessons</a> </li>
<li> <a href="classes.html">Classes</a>
<li> <a href="ensembles.html">Ensembles</a>
<li> <a href="adultprograms.html">Adult Programs</a> </li>
</ul>
</li>
<li> <a href="#">Departments</a>
<ul>
<li> <a href="choir.html">Choir</a> </li>
<li> <a href="ealrydevelopment.html">Early Development</a> </li>
<li> <a href="guitar.html">Guitar</a> </li>
<li> <a href="jazz.html">Jazz</a></li>
<li> <a href="piano.html">Piano</a></li>
<li> <a href="strings.html">Strings</a></li>
<li> <a href="theory.html">Theory and Composition</a></li>
<li> <a href="voice.html">Voice</a></li>
<li> <a href="windsandpercussions.html">Winds and Percussion</a></li></ul></li>
<li> <a href="admissions.html">Admissions</a> </li>
<li> <a href="#">Events</a>
<ul>
<li> <a href="concertseries.html">Concert Series</a> </li>
<li> <a href="studentevents.html">Student Events</a>
<li> <a href="festivals.html">Festivals</a>
</ul></li>
<li> <a href="community.html">Community</a> </li>
<li> <a href="#">Support</a>
<ul>
<li> <a href="donate.html">Donate</a> </li>
<li> <a href="volunteer.html">Volunteer</a>
</li></ul></li>
<li> <a href="contact.html">Contact Us</a> </li>
</li>
</ul>
</li>
</ul></div>
<div id="connect"> <div id="connectbox">
<img src="emailus.jpg" width="55" height="52" alt="Email Us" /><p>
<img src="apply.jpg" width="55" height="52" alt="Apply" /><p>
<img src="newsletter.jpg" width="55" height="52" alt="Newsletter" /><p>
<img src="Facebook.jpg" width="52" height="53" alt="Facebook" /><p>
<img src="Twitter.jpg" width="55" height="55" alt="Twitter" /><p>
<p></div>
</div>
<div id="pageheader"><img src="adultprograms.gif" width="800" height="61" alt="adult programs" /></div>
<div id="MainCopy"> <div id="copywide">General Copy about Adult Programs
<div id="classbox"><img src="earlymusicensemblece.gif" width="770" height="42" />
<p>
Directed by Rainer Beckmann, the Pennsylvania Academy of Music's Early Music Program provides opportunities for students to learn more about historical performance practice. The program's current activities focus on the school's Early Music Ensemble, made up of enthusiastic amateur musicians performing on recorders and violas da gamba. The recent donation of a two-manual harpsichord will allow the program to include special Baroque ensemble lessons in the near future. In addition, individual Academy students will have the possibility to be accompanied on an instrument regularly used in music of the 17th and 18th centuries. The class meets 1 hour per week.
</div>
<div id="smallclassbox"><img src="grouppiano.gif" width="770" height="42" />
<p>
Learn to play the piano in a group setting of 4-6 students. Classes are offered for all beginner piano students. Our qualified teachers will teach you to read notes and make music with your family and peers!</div>
<div id="smallclassbox"> <img src="amateurchamber.gif" width="770" height="42" />
<p>
This course is designed for the adult amateur who would like to play his/her instrument in a chamber music setting with other amateurs of the same level. Groups meet once a week for a one-hour coaching and prepare a work to be performed at the end of the semester. Coachings address both individual needs and techniques of collaborative playing.
</div>
<div id="largeclassbox"><img src="rockandroll.gif" width="770" height="42" />
This course traces the American popular music from the work songs of enslaved Africans through the Beatles. The course focuses on the history, theory, and sociological implications of gospel, blues, bluegrass, rhythm and blues, rock and roll, and psychedelic rock. Class will include lecture, discussion, and demonstration. Students will give presentations on popular styles of the 1980s, 1990s, and beyond.
Course Objectives:
In this course, students will:<br/>
1. Understand the development of various styles/genres of popular music.
2. Understand the connectivity of the cultural, political and social, with the musical.<br/>
3. Become familiar with music terminology in order to discuss music with insight and authority.<br/>
4. Develop keen listening skills enabling them to discern such elements as instrumentation, stylistic characteristics, and beats/grooves.<br/>
5. Gain insight into the recording industry and its effects on American culture.
</div>
</div>
</div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
</script>
</body>
</html> -
Spry menu bar doesn't appear correctly in IE
Hi guys..
I created a spry menu bar in DW CS4. It looks fine in Firefox but in IE 8, the background image of the navigation bar appears white after allowing activecontrol to run. I didn't include any image for ul.MenuBarHorizontal a because I wanted to use the background image for the div containing the navigation bar.(Hope I didn't confuse you there).. I tried using the search box but couldn't find any solution to my problem. Here are my screen shots.
This is in firefox.
This is in IE 8 before allowing activex.
This is in IE 8 after allowing activex. (Part of the navigation bar is white)
Here's the code.Hope you can help me asap. Thanks!
@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: center;
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;
/* 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;
background-image: url(../images/single.jpg);
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
padding-top: 1.05em;
padding-right: 0.75em;
padding-bottom: 1.05em;
padding-left: 0.75em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
/* 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-image: url(../images/single.jpg);
/* 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: #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-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-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/single.jpg);
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-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;/* HACK FOR IE: to stabilize appearance of menu items; the slash in
float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display:
inline;
f\loat: left;
background: #FFF;
I hope this helps.
Ben -
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.
Maybe you are looking for
-
We are experiencing trouble opening Captivate. We have it installed on multiple computers and it will not open. We do have captivate installed on one computer that seems to be working. We have tried uninstalling and re-installing, hoping that woul
-
Sales Document configurator Customizing
Hi, I create sales document with va41 transaction. When I grab my material value, the configuration screen appeared. The aim is to modify one characteristic value of my configuration with data stored in a data file. For this I create a project ZCONF
-
I have this problem too. I unfortunately bought a PowerPC mac that I can not be updated past Tiger and my drummer has a new mac with updated Garageband. After recording one day, I tried to open the .band files on my mac and my mac said the file was
-
Quickest way to change speed but not clip duration
I'm trying to determine the fastest method for changing the speed of a clip already in the timeline, but not the clips duration. Primarily, slowing a clip down. The best I've come up with so far is to put the timeline playhead over the clip and hit X
-
Ipod touch 4g, music isnt working through headphones
This problem just recently started happening. I would plug my headphones into my ipod touch, and the music plays outloud. I have tried many things, and it still doesnt work. I have tried: ~restoring ~restarting ~new headphones ~plugging headphones in