Menu Bar Width Issues

Hi, everyone!
I recently inherited a website that I did not originally create that contains a menu bar created in Fireworks. To achieve the desired effects, I probably would have created a Spry menu (and made it a lot less complicated in terms of menu choices), so I'm not as familiar with this.
The client wants some items added to the menu, so I was able to procure the original Fireworks files instead of just the exported ones. (You can view the original site here.) I realize there are some design issues in addition to the site having been done in tables, but I still want to add the desired menu items quickly before doing a site re-design.
If you go to the link, under "Association Documents" there's a "Community Plats" section. I have new plats to add to that section. I added them in the appropriate place in the FW file and made sure the width was set to "auto". When I insert it into Dreamweaver and then preview, however, that area retains its original width (Section 1, Section 2, etc.). The new menu items are wider than the current ones, so the text bleeds out of the menu area. Like I said, I have checked the width for the menu and it is set to auto. Is there something else I need to do differently for the sub-menu? I think this was done in a previous version of FW (I'm in CS4)... could that make a difference?
I'd really appreciate any insight here. Thanks in advance!
Karen
GuppyFish Web Design

You can change the padding in the following
ul.MenuBarHorizontal a {
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
Gramps

Similar Messages

Horizontal Menu Bar Width Issues

Hey all,
I'm having some problems getting my menu bar to stretch all the way across the 1000px container it's in. Is there a way to alter the width of individual tabs? It is set to float left, and the width is currently set at auto under ul.MenuBarHorizontal li. I've put a screen shot in for reference. Thanks for any help in advance.
As you can see below, the last tab (gifts) is not quite reaching the edge of the container.

You can change the padding in the following
ul.MenuBarHorizontal a {
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
Gramps

Spry Vertical Menu Bar Styling Issues

Hello all,
I'm having CSS issues with a spry vertical menu bar. The Menu
is fairly basic but, it has some odd sizing requirements specified
by it's designer. The designer would like the sub menu items to all
have different widths that correspond to the actual content within
them. Here is sample.
http://staging.rm306.com/cycle/
The menu seen at the page above was not build with Spry. It
was build with another tool and has considerable problems with
consistent browser display.
Can anyone give me a short list of styles and where they
should be applied that might help me achieve this reletively simple
effect?
I've tried to use Spy menu bars in my projects in the past
but, there was always some sticking point. I'd like this time to be
the winner if possible.
Thanks for your time and patience in advance,
Kevin

The sample page I posted came after searching for an easy
"how to do it". The closest I found to a tutorial was this:
http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
The author designs and implements a spry menu with Fire Works
graphics. The last section describes how to modify the existing CSS
for multiple levels. Yet I found the sample page easier to follow.
I hope this helps though.

Horizontal Menu Bar - 2 issues

Hello, I have been here asking questions before and I still
have a couple more.
I am using the horizontal menu bar with the spry 1.5
pre-release files.
LINK
2 things, first:
I want the submenu text to be smaller than the menu text,
i.e. menu text should be 11px and submenu should be 10px, I just
cant seem to rustle it out of the css to make it happen.
ul.MenuBarHorizontal ul li
display: block;
float: none;
width: auto;
white-space: nowrap;
font-size:10px;
the bold addition does not seem to be working.
Secondly:
When this menu is viewed in IE7 it looks as if the border is
sunken/iframe is being used, and there is the text "
false" located inside the submenu.
I have commented out the hacks in the css for IE to no avail.
Wondering why the border looks so weird and the word false is being
imposed on my submenu
Thanks in advance

To change the font-size, try placing the font-size property
on the <a> element of the submenus.
The IE7 sunken/iframe problem is a hack that is necessary to
make the submenus appear above any native windows (Flash, Selects,
etc) that may be in the browser window. It's showing because you
removed the background color off of the <a> elements. Try
making the <li> or the <a> background color white and
it should hide the iframe.
ul.MenuBarHorizontal ul li {
background-color: white;
border-bottom: solid 1px white; /* Workaround IE Gap bug */
ul.MenuBarHorizontal ul a {
font-size:10px;
I also noticed that your menus were suffering from the
infamous link in list gap IE bug. You can either remove *all*
whitespace in your lists to get around the bug *or* use the bottom
border property like I did above.
--== Kin ==--

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%;

Problem with IE Vertical Menu Bar Widths

I currently have a Vertical Menu Bar with the width set to
auto. IE shows all of the top-level menu items as a single
word-wrapped line.
When you hover over any submenu item, the border that appears
on hover only spans the width of that submenu item's text rather
than the width of the actual submenu.
Is there a way to use auto widths in IE or will I just have
to use predetermined widths?
My URL is
http://www.plpimports.com/
Thanks!!

I changed the layout so that the menu is fixed width. I think
I like it better this way anyway.

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"

Vertical Spry Menu Bar width adjustment

How do you add a separate class to the list of "CSS Styles"
and use/apply that class? I'm asking this question because I'm
trying to create a new class to adjust the individual widths of my
menu bars (to accommodate their separate sizes). Thanks for your
input.

Thanks for the reply. After changing the code to your suggestion, now the submenu loads approximately 80px below the last menu item in all browsers except IE. In IE, the submenu looks the way it did straight out of the box. Any other ideas to try?
Sarah

Spry Horizontal Menu Bar width problem in IE and Safari

Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

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 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?

Spry menu Bar I.E. positioning issues?

Hi,
I, like many folks I've seen on various forums have the same problem with my spry menu appearing at the top of I.E browsers instead of under the menu bar. I've tried all sorts of fixes that I've found and have updated to the latest version of Spry. I am using CS3. Could anyone please, please help? I'm not sure where else to go as I've spent the last week on the web trying to resolve the issue. Everything works great on Safari and Firefox. My URL is http://www.visiongreeninvestments.org
Thanks in advance to anyone who can point me in the right direction.
My CSS is:
@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: 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: 130px;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
    background-image: none;
ul.MenuBarHorizontal ul li a
    width: 7.8em;
    background-image: none;
    background-color: #669933;
/* 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: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #669933;
    color: #000066;
    text-decoration: none;
    font-family: Times;
    font-size: 14px;
    font-weight: normal;
    background-image: url(../homepagelayout/greenbarbg.jpg);
    background-repeat: repeat;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: 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: #669933;
    color: #FFF;
    background-image: none;
/* 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: #669933;
    color: #FFF;
    background-image: none;
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(../homepagelayout/greenbarbg.jpg);
    background-repeat: repeat;
    background-color: #669933;
/* 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: none;
    background-position: 95% 50%;
    background-color: #669933;
/* 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: none;
    background-position: 95% 50%;
    background-color: #669933;
/* 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: none;
    background-repeat: repeat;
    background-position: 95% 50%;
    background-color: #669933;
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;
    /*insert this bracket/*

I see that the online version has already been upgraded to Spry 1.61 and that it now works.
Gramps
PS Before you change anything, have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one. This will ensure that you don't make a mess of it this time around.

Spry Menu Bar issue, NEED HELP...???

Here is the coding for a menu bar that i created with CS3, for some reason i am having an issue when i open the web page in IE, on firefox and safari it looks fine, the menu drops down to sub menu's fine, but for some reason when i open it in IE, the submenu's show on the very top of the page rather than right below the menu itself, please check my coding and see if there is an issue???
i ran compatability and there are no issues shown.
@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: 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: 10.4em;
    float: left;
    background-image: url(tab2.png);
/* 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;
    text-decoration: underline;
/* 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;
    background-image: url(../tab1.png);
/* 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: default;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    border-left-color: #0063bd;
    border-right-color: #0063bd;
    border-right-width: 3px;
    border-left-width: thin;
    font-family: Calibri;
    font-weight: bold;
    font-size: 19px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #000000;
/* 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: #000000;
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-block;
    f\loat: left;
    position: relative;

Hey gramps, thanks for the info, i have updated my spry framework to 1.6.1 but the problem is still the same, i recreated my menu with the new 1.6 and it still doing the same thing, the submenu's are like vertically reversed... ugh need help.
here the new code
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 10.4em;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    background-image: url(../tab1.png);
    line-height: 18px;
/* 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;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 19px;
    font-family: Calibri;
    font-weight: bolder;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #000000;
/* 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: #000000;
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-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;
/* 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;

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.

Menu Bar Width Issues

Similar Messages

Maybe you are looking for