Spry Menu Bar Mac Issue

Hello,
Link:
http://www.therockchurch.tv/about_trc.html#welcome
Issue: Mac Safari doesn't like the spry menu bar. The sub
menus disappear and flicker. Everything works fine on all browsers
using widows including safari for windows. The menu just doesn't
like mac. Any help?
-R

"kinblas" <[email protected]> wrote in
message
news:f7rdd2$7ri$[email protected]..
> Hmm, I'm not seing any flashing on that page on my Mac
with Safari. It
> looks
> pretty good.
>
> I am seeing it on your homepage:
>
>
http://www.throckchurch.tv
>
> but it looks like it is due to the fact that Safari is
struggling to keep
> up
> with rendering all that Flash animation on your page.
>
> On windows with FireFox, the homepage is starving the
browser and pegging
> my
> CPU at 100%.
In IE7 Vista, my CPU is pegged at 22%. I do not run flash in
Firefox because
of its rendering engine issues, so that might be an issue
there. Safari has
known issues rendering CSS hovers on top of flash. The
workaround is to
remove hovers or live with it.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Similar Messages

Spry Menu Bar display issue - please help.

Everything works accept for IE for PC. I want the backgrounds
of the menu to be transparent but they are coming up white in IE.
Please help. Thank you.
http://www.pjhaarsma.com/techmark/docs/main.html

Found it:
In the hack on the CSS sheet - change background from #FFF to
transparent:
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: transparent;
}

Spry Menu Bar display problem on the MAC

Hello!
I'm having issues with spry menu bar not displaying properly
on the mac browser.
i474.photobucket.com/albums/rr104/nastasia_20/DSC02618.jpg
it should look like this
s3.amazonaws.com/sitevista/c356ba1e-7f66-4cec-9b41-bc90b86455ee1773886_IE7.png
You can find the page here : www.
siia-design.com/eco_totes/modern_mums.html
Any ideas what is wrong?
Thank you

Not an issue any more. I re-loaded the site w/o the menu bar
after I made the original post (as you saw) because of the
incompatibility issue I was having between Spry and IE6 & 7.
Before that, I first updated Spry, re-loaded the page with Spry
menu and still had the same IE 6 & 7 issue. Frankly, I simply
gave up on Spry, due to time constraints in getting a new site
layout operational (today was my deadline). From what I've read on
these and and other forums, Spry does not play well with IE,
especially IE7. Unfortunately for me, I don't use IE at all, so
rely on Dreamweaver's compatibility check to tell me if all is
well. Why Spry works so well on Safari, Firefox and Netscape, and
not on IE, is beyond me. Thanks, anyway for your comment. Much
appreciated.

Spry menu bar 2 IE9 issue

Hi,
I have a slight problem with a spry menu bar when viewed in IE9beta, when you hover over a menu item the hover background does not always complety fill the area immediately, eventualy it does. This problem only affects IE9beta, I have tested it in the latest versions of safari, opera, firefox, and chrome.
Any help with this would be appreciated,
Richard.
You can view the menu at www.eandhbaxendale.com and I have included the css and widget script below
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #BaxMenuBar
var BaxMenuBar = new Spry.Widget.MenuBar2("#BaxMenuBar", {
      widgetID: "BaxMenuBar",
   widgetClass: "MenuBar BaxMenuBarFixedLeft",
   insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
/*menu bar start*/
#BaxMenuBar {
background-color:#000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
font-style: normal;
padding:0;
border: #fff solid 1px;
.MenuBar br {
display:none;
.BaxMenuBarLeftShrink {
float: left;
width: auto;
.BaxMenuBarRightShrink {
float: right;
width: auto;
.BaxMenuBarFixedLeft {
float: left;
width: 882px;
.BaxMenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.BaxMenuBarFixedCentered br {
clear:both;
display:block;
.BaxMenuBarFixedCentered .SubMenu br {
display:none;
.BaxMenuBarFullwidth {
float: left;
width: 100%;
#BaxMenuBar .MenuItemContainer {
padding: 0px;
margin: 0;
#BaxMenuBar .MenuItem {
padding: 0px 14px 0px 0px;
background-color:#000000;
border-width:1px;
border-color: #fff;
border-style: none solid none none;
#BaxMenuBar .MenuItemFirst {
border-style: none solid none none;
#BaxMenuBar .MenuItemLast {
border-style: none solid none none;
#BaxMenuBar .MenuItem .MenuItemLabel {
text-align:center;
line-height:1.4em;
color:#fff;
background-color:#000;
padding: 6px 15px 6px 29px;
width: 10em;
width:auto;
.SpryIsIE6 #BaxMenuBar .MenuItem .MenuItemLabel {
width:1em;
#BaxMenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
font-style: normal;
background-color:#666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #fff;
border-style: solid solid none solid;
#BaxMenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#BaxMenuBar .SubMenu .MenuItemFirst .MenuItemLabel {
padding-top: 6px;
#BaxMenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#BaxMenuBar .SubMenu .MenuItemLast .MenuItemLabel {
padding-bottom: 6px;
#BaxMenuBar .SubMenu .MenuItem .MenuItemLabel {
text-align:left;
line-height:1em;
background-color:#666;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
#BaxMenuBar .MenuItemHover {
background-color: #666;
border-color: #fff;
#BaxMenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel {
background-color: #666;
color: #fff;
#BaxMenuBar .MenuItemHover .MenuItemLabel {
background-color: #666;
color: #fff;
#BaxMenuBar .SubMenu .MenuItemHover {
background-color: #999;
border-color: #fff;
#BaxMenuBar .SubMenu .MenuItemHover .MenuItemLabel {
background-color: #999;
color: #fff;
#BaxMenuBar .SubMenuVisible {
background-color: #666;
min-width:100%;
border: #fff 0px none;
#BaxMenuBar.MenuBar .SubMenuVisible {
top: 100%;
left:0px;
z-index:10;
#BaxMenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px;
#BaxMenuBar .MenuLevel1 .SubMenuVisible {
background-color: #666;
min-width:0px;
top: 0px;
left:100%;
.SpryIsIE6 #BaxMenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel {
background-color: #666;
color: #fff;
.SpryIsIE6 #BaxMenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel {
background-color: #999;
    color: #fff;
.SpryIsIE6 #BaxMenuBar .SubMenu .SubMenu {
margin-left: -0px;
/*menu bar end*/

I must have looked at it in another browser, sorry.
Had another look at it and indeed it may become an issue in IE9, but because IE9 is still in beta, anything can change.
Watch this space.
Gramps.
Oh, you could always add <meta http-equiv="X-UA-Compatible" content="IE=7" /> to your document.

Spry Menu Bar 2.0 auto-width issues for sub items

I am testing the spry menu bar 2.0 and it displays perfectly in IE 9.0/8.0 but the auto width is not working for Firefox (testing 3.6.16), Chrome (testing 10.0.648.205), or Safari for windows. Content is being driven by PHP and MySQL. This is the first time I have come across something working better in IE than the other browsers. Great job on the IE patch script. How do I get the other browsers to cooperate? I moved the in page CSS generated by the widget browser to it's own CSS (called spry_menubar2_horizontal_sample_layout.css) and am including the files below in the head. The links below point to an exact copy of the files as the working copy of the files is located elsewhere.
SpryMenuBasic.css - link
SpryMenuBasicSkin.css - link
spry_menubar2_horizontal_sample_layout.css - link
SpryDOMUtils.js - link
SpryDOMEffects.js - link
SpryWidget.js - link
SpryMenu.js - link
SpryMenuBarKeyNavigationPlugin.js - link
SpryMenuBarIEWorkaroundsPlugin.js - link
the in page script is loacated directly under the <ul> lists.
Similar example with php removed:
<div id="navigation">
    <ul id="MenuBar">
      <li> <a href="http://www.videoonpointe.com/">Home</a> </li>
      <li> <a href="#">Gallery</a>
      <ul>
        <li> <a href="#">View Gallery</a></li>
        <li> <a href="#">Select Gallery</a>
          <ul>
        <li> <a href="#">Main Gallery</a>
          <ul>
            <li> <a href="#">a gallery</a></li>
        </ul>
        </li>
      </ul>
      </li>
        <li> <a href="#">Edit this Gallery</a></li>
        <li> <a href="#">Create Gallery</a> </li>
        <li> <a href="#" onClick="return confirm('This action cannot be undone. Are you sure?');">Delete this Gallery</a></li>
      </ul>
      </li>
            <li> <a href="#">Photo</a>
          <ul>
            <li> <a href="#">Edit Photo</a> </li>
            <li> <a href="#" onClick="return confirm('Deletion of this image cannot be undone. Are you sure?');">Delete Photo</a> </li>
            <li> <a href="#">Set as Gallery Thumbnail</a> </li>
            <li> <a href="#">Change Watermark</a> </li>
          </ul>
          </li>
      <li> <a href="#">Pricesheet</a>
        <ul>
          <li> <a href="#">Pricesheet Admin</a> </li>
    </ul>
      </li>
   </ul>
<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>
</div>
Has anyone encountered this issue before? Any thoughts on how it can be fixed? Thank you for your help.

I am surprised no one has responded yet. Surely someone has encountered this before. Any thoughts?

Having issues linking spry menu bar to my other pages

Hey everyone,
I am brand new to web development. I am currently using the trial of DW and I must say I love it. I am having issues with my spry menu bar though. I will click on a certain box in the menu bar and use the properties page at the bottom and insert a link to another one of my webpages that I have created. However when I test my webpage, it will not be linked to it. Instead it is linked to #, or my index page. Now my domain name is: thecampuscocktail.com. I have created two other pages "feedback.html" and "speedydrinks.html" and even when I enter those manually into my browser (i.e. "thecampuscocktail.com/feedback.html") it gives me a page not found error. So I may be doing something incorrectly with uploading my pages however I have used the "put" option with all of them and I have used the "sync site wide" option. I am also using a template though that shouldn't affect it. Being brand new I know very, very little about coding. But here is the code to my template:
<!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>The Campus Cocktail</title>

<link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div class="container">
<div class="header">
    <p><a href="../index.html"><img src="../images/newlogo.gif" alt="logo" width="331" height="189" class="logo" /></a></p>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Drinking Games</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Recipes</a>
        <ul>
          <li class="subsubmenu"><a href="#" class="MenuBarItemSubmenu">By Ingredient</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">By Type</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">By Form</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="../Pages/speedydrinks.html">Speedy Drinks</a>      </li>
      <li><a href="#">Drinks by Occasion</a></li>
      <li><a href="../index.html">Local Bars</a></li>
      <li><a href="../Pages/speedydrinks.html">Submit Your Own</a></li>
    </ul>
    <p> </p>
</div>
<div class="sidebar1">
    <ul class="nav">
    </ul>
    <p> Whats New:</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    
</div>
<div class="content"><span class="drinklabel">Drink Of The Day:</span>
      <p> </p>
      
</div>
<div class="footer">
    <p>                 © 2012 Brandon Hall</p>
    </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
any help will be appreciated! Sorry for the length of this post.

DW_Noobie wrote:
can anyone help
It depends. I can see your two pages as in this link:
<http://www.thecampuscocktail.com/speedydrinks.html>
<http://www.thecampuscocktail.com/feedback.html>
You need to describe what these issues are.

Alignment Issues with Spry Menu Bar in Safari

www.laurentambard.com
I am new to CS5 and currently building a site for a friend. Having issues with aligning then far right spry menu bar so that it is flush with the page. It only shows a problem on Safari (as far as I know). Also the second tab (About) is dropping down slightly when the drop down menu is selected and not sure how to fix it.

If you place the menubar in a container with an ID of nav or similar and a background color of #EEE so that it blends in with the background colour of the menu items, the centralise the menubar and menu items as per http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml, it should go a long way to meeting your requirements.
Gramps

How to fix Spry Menu bar and Firefox with a Mac

The spry menu bar does not properly display in Firefox (Version11&12) on a mac. Have looked at a number of different ways to fix this. Included is a copy of css for menu bar. Would appreciate any suggestions.
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 11em;
          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: 11em;
          left: -1000em;
          position: relative;
/* 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: 11em;
          float: none;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          /* [disabled]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: #FFFFCC;
          padding: 0.5em 0.75em;
          color: #4F8627;
          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: #FFFFCC;
          color: #4F8627;
/* 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: #FFFFCC;
          color: #4F8627;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;

Change
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: relative;
to
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: absolute;
Gramps

IE Browser Issue with Spry Menu Bar {screen-capture attached}

Hi there, my horizontal spry menu bar is messing up when viwed in Internet Eplorer, HTML shows no errors, after extensive testing still cant find a solution. As you will be aware IE is a popular browser so its imperative i resolve the issue. The site is http://www.theboxinghistorian.com/
View in Chrome and Firefox
View in Internet explorer (IE)
Here is the HTML code
Hope this is enough information for a solution.
Thank you for your time
Mark

I've never used Spry, so take this with a huge grain of salt.. looking at your html, I am kinda wondering how come the 2nd level of the nested list items making up your submenu items arent assigned a different css style - and therefore is your css file setup to handle this change in orientation properly..
You got a class=MenuBarSubItem" on your Championship History, but theres nothing in your html (other than the nested ul within #Menubar1) to indicate that Heavyweight, Cruiserweight, etc. are 2nd Level MenuItems which should be using a different css style.. therefore it would be up to your CSS to handle this change in how these 2nd level sub menu items gets displayed.. looks like this isn't happening for MSIE, as MSIE keeps floating your 2nd level/submenu items horizontally instead of stringing them up vertically.. You may be missing a style rule in your css, but how come FF gets it right?
If I were to recreate this menu myself, I would assign a new css class to make sure my submenu items dont end up floated next to each other.. But then again, i have no clue about Spry, so I might just be rambling nonsense here...

Spry vertical menu bar positioning issue in IE

I have been trying to fix a problem with my spry menu bar and have been looking for answers at several spry forums. I have modified my vertical spry menu to open submenus above and to the right of the main menu. It works in Opera, Firefox and Safari and opens below in IE. I tried changing the positioning from absolute to relative and that made it position itself below in all browsers. So, by deductive reasoning there seems to be something going on with IE when it reads the absolute positioning, is there a fix for this? You can see my website at raydlett.com the menubar is called STUDIO.
Here is my vertical menubar CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 6.75em;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 6.75em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: 0 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 9.2em;
    left: -1000em;
    bottom:-1%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 9.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #fff;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #fff;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.5em 0.75em;
    color: #666;
    text-decoration: none;
/* Menu items that have mouse over or focus have a white background and orange text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #fff;
    color: #FF4C00;
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and orange text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #fff;
    color: #FF4C00;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Here are the associated global.css components:
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 76%;
    padding: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    margin: 0;
    background: #fff;
    color: #666;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    line-height: 1em;
#container {
    width: 880px;
    text-align: left;/* this overrides the text-align: center on the body element. */
    margin-right: auto;/* the auto margins (in conjunction with a width) center the page */
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    font-family: Verdana, Geneva, sans-serif;
#header {
    font-size: 1em;
    padding-left: 17px;
    height: 26px;
    position: relative;
ul {
    padding:0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px; /* used for both menubar 1 and 2 */
    margin-left: 20px;/* used for both menubar 1 and 2 */
li {
    margin:0;
    padding:0 0 0 5px;/* used for both menubar 1 and 2 */
I have also attached the index.html file that uses the modified "STUDIO" Spry MenuBar2
Any help on this would be greatly appreciated. Thanks in advance.
ribit10

That makes sense, tooltips are tooltips, and appear at the tip of the mouse...But those "submenu triggers" can be simply styled links (as they are in a spry menu)...don't need to be swaps or images or image maps.
What about a using show/hide behavior? Click the STUDIO and the menu pops up adjacent in an apDiv. Click a link. Or click the x to close the apDiv.
You know this is just an exercise to run through all the Javascript and Spry that is in Dreamweaver, eh?
By the way, just providing a link to your page is quite all you need to do. You don't need to attach your files or show pictures of them...by providing a link, I can save a web page in its entirety and open it in Dreamweaver.
Beth

Spry vertical menu bar size issue

hello world,
i've got a beautiful layout with a lefthand menu section that i would love to behave with pop-out menus.
the entire design was crafted lovingly in fireworks and then exported as html with images, then opened in dreamweaver - looks great!
remove the image that was in the slice where the menu will go, check.
place cursor and select insert>spry>menu bar, select orientation, check.
remove extraneous menu items in the properties inspector, check.
and then, the problem...the box where "Item 1" (which will become my first button) is too big and shifts the entire table out of shape.
i've edited the box sizes in the following CSS items:
ul.MenuBarVertical
ul.MenuBarVertical li
ul.MenuBarVertical a
sometimes i can get it close to it being in-shape with no shifting if i make the menu box smaller than the image that will go in it, looks great in DW but it is then shifted down by a considerable amount when previewing in browers. any pointers will be greatly appreciated.

hi hans
i can't upload at the moment, don't have the password to the site at the moment.
for now the best i can do is post the CSS, and let you know that the size of the image i'd like to place in the parent spry menu is 168w x 32h (in px)
i hope this isn't too much text....here goes:
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 150px;
    height: 25px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 150px;
    height: 25px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    color: #333;
    text-decoration: none;
    height: 25px;
    width: 150px;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #33C;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
ul.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;

Pulling my hair out over IE8 issues with spry menu bar

Its a classic story, but for the life of me, I can't figure this out. I've seen it in a hundred different forums (all slightly different versions of the same problem) . I've put together a horizontal spry menu bar (version 1.6.1). It works fine in Chrome, Safari, Firefox, etc..., but goes nuts in IE.
layout and positioning of the submenus cascades horizontally, goes far right, etc.
A sample of the menu sits at http://www.alaskanrafting.com/mockup/newindex.html
I'm sure it's just a line or two in my CSS, but I sure can't find it.
the CSS sheet would be at http://www.alaskanrafting.com/mockup/SpryAssets/SpryMenuBarHorizontal.css
If anyone has any pointers, I would greatly appreciate it.
Thanks

Try adding/modifying the following
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
There needs to be an !important for the float so that it overrides the JS.
Gramps

SPRY MENU BAR ISSUE

Why does my spry menu bar look fine on my computer/my browser, but co-workers browsers show the menu and it's all messed up? Below is my code.
<ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">ADULTS</a>
          <ul>
            <li><a href="/SIDE BAR OPTIONS/ADULT REC/ADULT REC.html">ADULT REC</a></li>
            <li><a href="/SIDE BAR OPTIONS/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">ADULT TRAINING FACILITIES</a></li>
            <li><a href="/SIDE BAR OPTIONS/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
            <li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">FAMILY LIVING</a></li>
            <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">YOUTH</a>
          <ul>
            <li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">AFTER SCHOOL PROGRAM</a></li>
            <li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">AKTION CLUB</a></li>
            <li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">CHALLENGER BASEBALL</a></li>
            <li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">EARLY INTERVENTION</a></li>
            <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
            <li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-BALL</a></li>
            <li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">TEEN CLUB</a></li>
            <li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">TRAINING & TRANSITION</a></li>
          </ul>
        </li>
          <li><a class="MenuBarItemSubmenu" href="#">EVENTS</a>
          <ul>
           <li><a href="/SUBNAVMENU/EVENTS/LipSync.html">LIP SYNC</a></li>
            <li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">TOURING FRIENDS</a></li>
            <li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">ANNUAL PICNIC</a></li>
          </ul>
          <li><a class="MenuBarItemSubmenu" href="#">OTHER</a>
              <ul>
                <li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">EDUCATION & THERAPY</a></li>
                <li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">EQUIPMENT LOAN</a></li>
                <li><a href="/NAVBAR/VOLUNTEER/Volunteer.html">VOLUNTEER</a></li>
            </ul>
        <li><a class="MenuBarItemSubmenu" a href="#">EMPLOYEES</a>
             <ul>
             <li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
                <li><a href="/SUBNAVMENU/MEET OUR STAFF/MeetOurStaff.html">MEET OUR STAFF</a></li>
                 <li><a href="/SUBNAVMENU/EMPLOYEE ACCESS/AccessPage.html">EMPLOYEE ACCESS</a></li>
          </UL>
      </ul>

Have a look at lines 212 and 213 which read as follows
<script src="file://///SNCentral/Home/akaniecki/My Documents/Web Site Root Folder/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file://///SNCentral/Home/akaniecki/My Documents/Web Site Root Folder/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
The red part shows the URL to the files. However, these files point to your locahost.
In your template, The links should look like
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
Also make sure that the files do exist in the remote SpryAssets folder.

Spry Menu Bar acting weird in IE

Hello,
I am relativley new to Dreamweaver and I built a website using CS4. I never did a spry menu bar and I have one on my site. The menu bar works fine in firefox, in safari it seems to work as it is aligned right, but my flash player doesn't. But the main problem is in IE. The grey background I have for the spry bar is in the right spot but the actual links are offset, and when you role over them the submenus are on the left and also offset. I tried messing around with the hack IE in the spry css but not really sure what I am doing as I don't know code too much. I also am Mac based and the problem in IE is on the PC. Also I built all the pages in Illustrator and inserted them in and used hot spots. I am not sure if that may have something to do with it.   If any one can help I would really appreciate it. The website I created is http://www.menaceaudio.com.
Also if this helps here is my SpryMenuBarHorizontal.css
@charset "UTF-8";
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
/* 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: auto;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 41.25em;
    padding: 0px;
/* 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;
    list-style-type: none;
    font-size: 14pt;
    position: relative;
    text-align: center;
    cursor: pointer;
    float: left;
    padding: 0;
    color: #FFF;
    background-color:#ccc;
    width: 8.23em;
/* 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;
    float: left;
    left: -1000px;
    width: 8.23em;
    position: absolute;
    background-color: #CCC;
/* 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: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.23em;
    background-color: #CCC;
    position: relative;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
/* 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: repeat-y;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal a
    left: -20px;
    top: 30px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    cursor: pointer;
    text-decoration: none;
    font-family: eurostile;
    font-size: 14px;
    background-repeat: no-repeat;
    padding: 0.5em;
    margin: 0.5px;
    display: block;
    color: #036;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
    border-left-color: #333;
    border-right-style: solid;
/* 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;
/* 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
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: repeat-x;
    font-family: eurostile;
/* 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
/* 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
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);
    ul.MenuBarHorizontal li.MenuBarItemIE
    ßfloat: left;
    position: relative;
    display: inline;

I'm using IE8, and I don't see the offset errors of which you speak. I do recommend restoring the IE hacks at the bottom of the stylesheet to the original, however.
I also notice that the width of the individual menu items (top level) is forcing "CONTACT" to a second line. You can safely remove the pixel width on the containing div, returning to 100%. But your paddings and widths of top level menu items may be the forcing issue here.
Beth

Spry menu bar in firefox not telescoping main li horizontally

I am having trouble with my spry menu bar in firefox and chrome not telescoping horizontally. In IE8 they tile horizontally but in firefox(3.6.10) and chrome(6.0.472.63) they stay tiled vertically.
Example:
IE8
[menu1][menu2][menu3][menu4][menu5]
FF and Chrome
[menu1]
[menu2]
[menu3]
[menu4]
[menu5]
I do not think that it is the css due to it not telescoping when I view it in live view in dreamweaver cs4. SO I am thinking it is someting in the javascript that is just for IE.
ANy help or a push in the right direction would be great.
here is the css
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 100%;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
/*    text-align: left;*/
    cursor: pointer;
    width: 19.8%;
    float: center;
    z-index: 100;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    float: none;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    text-align: left;
ul.MenuBarHorizontal a.NoPadding
    padding: 0.39em 0.75em;
*//* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-color:transparent;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color:transparent;
    color:#2A0000;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    z-index:100;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    z-index:100;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    z-index:100;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    z-index:100;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        float: left;
        background: #FFF;
        z-index:100;
#MenuBar1{
    position:relative;
    margin-top:-10px;
    margin-bottom:0px;
    z-index:1010;
***And the javascript***
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
    var b = navigator.appName.toString();
    var up = navigator.platform.toString();
    var ua = navigator.userAgent.toString();
    this.mozilla = this.ie = this.opera = this.safari = false;
    var re_opera = /Opera.([0-9\.]*)/i;
    var re_msie = /MSIE.([0-9\.]*)/i;
    var re_gecko = /gecko/i;
    var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
    var r = false;
    if ( (r = ua.match(re_opera))) {
        this.opera = true;
        this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_msie))) {
        this.ie = true;
        this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_safari))) {
        this.safari = true;
        this.version = parseFloat(r[2]);
    } else if (ua.match(re_gecko)) {
        var re_gecko_version = /rv:\s*([0-9\.]+)/i;
        r = ua.match(re_gecko_version);
        this.mozilla = true;
        this.version = parseFloat(r[1]);
    this.windows = this.mac = this.linux = false;
    this.Platform = ua.match(/windows/i) ? "windows" :
                    (ua.match(/linux/i) ? "linux" :
                    (ua.match(/mac/i) ? "mac" :
                    ua.match(/unix/i)? "unix" : "unknown"));
    this[this.Platform] = true;
    this.v = this.version;
    if (this.safari && this.mac && this.mozilla) {
        this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
    this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
    this.element = this.getElement(element);
    // represents the current (sub)menu we are operating on
    this.currMenu = null;
    this.showDelay = 250;
    this.hideDelay = 600;
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
        // bail on older unsupported browsers
        return;
    // Fix IE6 CSS images flicker
    if (Spry.is.ie && Spry.is.version < 7){
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch(err) {}
    this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
    this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
    this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
    this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
    this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
    this.hoverClass = 'MenuBarItemHover';
    this.subHoverClass = 'MenuBarItemSubmenuHover';
    this.subVisibleClass ='MenuBarSubmenuVisible';
    this.hasSubClass = 'MenuBarItemSubmenu';
    this.activeClass = 'MenuBarActive';
    this.isieClass = 'MenuBarItemIE';
    this.verticalClass = 'MenuBarVertical';
    this.horizontalClass = 'MenuBarHorizontal';
    this.enableKeyboardNavigation = true;
    this.hasFocus = false;
    // load hover images now
    if(opts)
        for(var k in opts)
            if (typeof this[k] == 'undefined')
                var rollover = new Image;
                rollover.src = opts[k];
        Spry.Widget.MenuBar.setOptions(this, opts);
    // safari doesn't support tabindex
    if (Spry.is.safari)
        this.enableKeyboardNavigation = false;
    if(this.element)
        this.currMenu = this.element;
        var items = this.element.getElementsByTagName('li');
        for(var i=0; i<items.length; i++)
            if (i > 0 && this.enableKeyboardNavigation)
                items[i].getElementsByTagName('a')[0].tabIndex='-1';
            this.initialize(items[i], element);
            if(Spry.is.ie)
                this.addClassName(items[i], this.isieClass);
                items[i].style.position = "static";
        if (this.enableKeyboardNavigation)
            var self = this;
            this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
        if(Spry.is.ie)
            if(this.hasClassName(this.element, this.verticalClass))
                this.element.style.position = "relative";
            var linkitems = this.element.getElementsByTagName('a');
            for(var i=0; i<linkitems.length; i++)
                linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
        return false;
    return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
    if (!ele || !className || this.hasClassName(ele, className))
        return;
    ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
    if (!ele || !className || !this.hasClassName(ele, className))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
    try
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent('on' + eventType, handler);
    catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
    var layer = document.createElement('iframe');
    layer.tabIndex = '-1';
    layer.src = 'javascript:""';
    layer.frameBorder = '0';
    layer.scrolling = 'no';
    menu.parentNode.appendChild(layer);
    layer.style.left = menu.offsetLeft + 'px';
    layer.style.top = menu.offsetTop + 'px';
    layer.style.width = menu.offsetWidth + 'px';
    layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
    var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
    while(layers.length > 0)
        layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    var menus = root.getElementsByTagName('ul');
    for(var i=0; i<menus.length; i++)
        this.hideSubmenu(menus[i]);
    this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
    if(this.currMenu)
        this.clearMenus(this.currMenu);
        this.currMenu = null;
    if(menu)
        this.addClassName(menu, this.subVisibleClass);
        if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
            if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
                menu.style.top = menu.parentNode.offsetTop + 'px';
        if(Spry.is.ie && Spry.is.version < 7)
            this.createIframeLayer(menu);
    this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
    if(menu)
        this.removeClassName(menu, this.subVisibleClass);
        if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
            menu.style.top = '';
            menu.style.left = '';
        if(Spry.is.ie && Spry.is.version < 7)
            this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
    var opentime, closetime;
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    if(menu)
        this.addClassName(link, this.hasSubClass);
    if(!Spry.is.ie)
        // define a simple function that comes standard in IE to determine
        // if a node is within another node
        listitem.contains = function(testNode)
            // this refers to the list item
            if(testNode == null)
                return false;
            if(testNode == this)
                return true;
            else
                return this.contains(testNode.parentNode);
    // need to save this for scope further down
    var self = this;
    this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
    this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
    if (this.enableKeyboardNavigation)
        this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
        this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
    this.lastOpen = listitem.getElementsByTagName('a')[0];
    this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
    this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
    this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
    //search any intersection with the current open element
    if (!this.lastOpen)
        return;
    if (el)
        el = el.getElementsByTagName('a')[0];
        // check children
        var item = this.lastOpen;
        while (item != this.element)
            var tmp = el;
            while (tmp != this.element)
                if (tmp == item)
                    return;
                try{
                    tmp = tmp.parentNode;
                }catch(err){break;}
            item = item.parentNode;
    var item = this.lastOpen;
    while (item != this.element)
        this.hideSubmenu(item.parentNode);
        var link = item.getElementsByTagName('a')[0];
        this.removeClassName(link, this.hoverClass);
        this.removeClassName(link, this.subHoverClass);
        item = item.parentNode;
    this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
    if (!this.hasFocus)
        return;
    if (!this.lastOpen)
        this.hasFocus = false;
        return;
            else if (element.currentStyle)
                    value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
    catch (e) {}
    return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
    var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
    if (isNaN(a))
        return 0;
    return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
    doc = doc || document;
    if (typeof(el) == 'string') {
        el = doc.getElementById(el);
    if (!el) {
        return false;
    if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
        //element must be visible to have a box
        return false;
    var ret = {x:0, y:0};
    var parent = null;
    var box;
    if (el.getBoundingClientRect) { // IE
        box = el.getBoundingClientRect();
        var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
        var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
        ret.x = box.left + scrollLeft;
        ret.y = box.top + scrollTop;
    } else if (doc.getBoxObjectFor) { // gecko
        box = doc.getBoxObjectFor(el);
        ret.x = box.x;
        ret.y = box.y;
    } else { // safari/opera
        ret.x = el.offsetLeft;
        ret.y = el.offsetTop;
        parent = el.offsetParent;
        if (parent != el) {
            while (parent) {
                ret.x += parent.offsetLeft;
                ret.y += parent.offsetTop;
                parent = parent.offsetParent;
        // opera & (safari absolute) incorrectly account for body offsetTop
        if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
            ret.y -= doc.body.offsetTop;
    if (el.parentNode)
            parent = el.parentNode;
    else
        parent = null;
    if (parent.nodeName){
        var cas = parent.nodeName.toUpperCase();
        while (parent && cas != 'BODY' && cas != 'HTML') {
            cas = parent.nodeName.toUpperCase();
            ret.x -= parent.scrollLeft;
            ret.y -= parent.scrollTop;
            if (parent.parentNode)
                parent = parent.parentNode;
            else
                parent = null;
    return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
    if (ev.stopPropagation)
        ev.stopPropagation();
    else
        ev.cancelBubble = true;
    if (ev.preventDefault)
        ev.preventDefault();
    else
        ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
        return;
    for (var optionName in optionsObj)
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
            continue;
        obj[optionName] = optionsObj[optionName];
Any help would be appreciated
Ray

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

Spry Menu Bar Mac Issue

Similar Messages

Maybe you are looking for