Spry Menubar-background problem

Hi,
I have tried to search for this problem, and though I have
found others with the same problem, there have been no answers
(probably so obvious I missed it and they figured it out.) And I
did update the Spry Menubar to the latest version.
The Spry Horizontal menubar works fine on Firefox, but on IE
7 the background is white as well as the submenus, not the intent.
The alignment and size is fine, just the designed background colors
don't work (on the menu itself, I want a transparent background, on
the submenus it is #777079.)
Website:
September
Entertainment Website
Style Sheet spry:
Spry
CSS
Thank you in advance for any help you can give me.
Cheers,
Janell

Hi,
Just found the problem for anyone that is having the same
thing happen. It is the hack at the bottom of
"SpryMenuBarHorizontal.css":
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;
Where it says: "background:fff;" change it to whatever you
need, in my case, "background: transparent;"
Voila!!
Cheers,
Janell

Similar Messages

Spry Menubar background color help?

How does one go about making the background color of your submenus different from the main menu bar?
Here's a site I have found with basically the submenu I want, notice the submenus have a background color and the menubar has a background image.
http://thecreatureconservancy.org/
(I am running CS5.5)
Thank you!

Have a look at the following where I have used an untouched SpryMenuBarHorizontal.css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
</head>
<style>
body {
    width: 980px;
    margin: auto;
#header {
    height: 200px;
#nav { /* USE YOUR OWN BACKGROUND IMAGE */
    background-image: url(http://www.copperleafcrossing.com/thecreatureconservancy/images/topnav_bkgd.jpg);
    height: 35px;
ul.MenuBarHorizontal a {
    color: #FFF;
    background-color: transparent;
ul.MenuBarHorizontal ul a {
    background-color: #436D9C;
ul.MenuBarHorizontal li.MenuBarItemIE {
    background: transparent;
</style>
<body>
<div id="header"></div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
          <ul>
            <li><a href="#">Item 3.1.1</a></li>
            <li><a href="#">Item 3.1.2</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a></li>
</ul>
</div>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps

Problems to add a background-image to the widget Spry MenuBar!

With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
In the Application Page of Dreamweaver I have this screenshot:
But in the Preview Window of InternetExplorer 7 I have this strange behavior:
The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
In the IE7 MenuBar doesn't appears as expected, without the transparent background!
1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
2) What is the correct CSS Style Rule to apply the "background-image" property?
(Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
I have uploaded my little local WebSite to Rapidshare (100KB):
http://rapidshare.com/files/370735082/Test_Spry.zip.html
Please download it to inspect my problem.
Please response me!
Horsepower0171.

For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
/* 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: 116px;
    float: left;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
/* 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: 116px;
    position: absolute;
    left: -1000em;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
Then when you apply style rules to
/* 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: #333;
    text-decoration: none;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
this will be overridden by the following rules. They replace your image with an arrow image.
/* 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%;
There are one of two solutions
If you do not want and arrow, simply set background to none in the above four instances.
If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
I hope this helps.
Ben

Formatting problem with Vertical Spry Menubar with Frameset

I have a frameset, which includes a Top Frame, with a nested
Left Frame, and a nested bottom frame after that. I also have a
vertical spry menubar in this left frame. When I click on an item
to view it's submenu, the center frame of the page cuts of a
significant portion of the submenu. I want the page to appear, so
that when you click on an item to view it's submenu, the submenu
appears past the frame's border, without having to set it up so
that the frame width is relevant to the use of the spry menubar
within it.
I talked to a Tech Support person today over the phone, and
he told me to post here and ask for someone to post custom code for
this.
If anyone can help, it would save me so much grief, and I
would be very greatful!

There is no practical way to make a positioned page element
as you have in
the Spry menus cross the boundary between two separate frames
(i.e., two
unique HTML pages).
It is true. Your choices are limited now -
1. DUMP THE FRAMES - you would not be having this problem in
a non-framed
site.
2. Redesign your menus so that they do not need to span a
frame boundary.
3. Redesign the frameset so that you leave enough room for
the largest
popup.
4. DUMP THE FRAMES - you would not be having this problem in
a non-framed
site.
I recommend either #1 or #4, depending on what your needs
are. You just
have no idea the horrors that await you if you continue with
the frames.....
8)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"DMMaestro2009" <[email protected]> wrote in
message
news:gbdvir$a8i$[email protected]..
>I have a frameset, which includes a Top Frame, with a
nested Left Frame,
>and a
> nested bottom frame after that. I also have a vertical
spry menubar in
> this
> left frame. When I click on an item to view it's
submenu, the center frame
> of
> the page cuts of a significant portion of the submenu. I
want the page to
> appear, so that when you click on an item to view it's
submenu, the
> submenu
> appears past the frame's border, without having to set
it up so that the
> frame
> width is relevant to the use of the spry menubar within
it.
>
> I talked to a Tech Support person today over the phone,
and he told me to
> post
> here and ask for someone to post custom code for this.
>
> If anyone can help, it would save me so much grief, and
I woulde be very
> greatful!
>
> Here's the link to the page...
>
>
http://www.vrd.ca/713/index2.htm
>

Spry Menubar in table -problem in IE

I'm a newbie to web design and this software...having said
that here is my issue:
I inserted a horizontal Spry menu bar in a cell of a table.
When viewed in Firefox, all is well. When viewed in IE, the Spry
menubar is no longer in the cell but dropped well below and to the
right of the entire table.
Any idea where to correct this?

I'm a newbie to web design and this software...having said
that here is my issue:
I inserted a horizontal Spry menu bar in a cell of a table.
When viewed in Firefox, all is well. When viewed in IE, the Spry
menubar is no longer in the cell but dropped well below and to the
right of the entire table.
Any idea where to correct this?

Spry menubar IE6

I am working on this page
http://www.spinsister.nl/TV3/index.htm
which has a
spry menubar at the top. Both FF and IE7 show the menu's as
intented. In IE6
all looks well when the page is first opened, but when a menu
link in the
navbar or in the left sidebar (which has ordinary links, no
spry) is clicked,
all text disappears from the navbar at the top, plus visited
links become
invisible. I experimented with adding a:visited to
ul.MenuBarHorizontal li a
so that it read
ul.MenuBarHorizontal li a:link, ul.MenuBarHorizontal li
a:visited
but that is no good either.
Two questions:
Am I on the right track thinking the problem is with the link
css?
Does someone know how to solve the problem in IE6?
Thank you.
Regards,
Adriana.
[ put out the rubbish if you need to reach me by e-mail ]
www.spinsister.nl

> I am working on this page
http://www.spinsister.nl/TV3/index.htm
which has a
> spry menubar at the top. Both FF and IE7 show the menu's
as intented. In IE6
> all looks well when the page is first opened, but when a
menu link in the
> navbar or in the left sidebar (which has ordinary links,
no spry) is clicked,
> all text disappears from the navbar at the top, plus
visited links become
> invisible. I experimented with adding a:visited to
> ul.MenuBarHorizontal li a
> so that it read
> ul.MenuBarHorizontal li a:link, ul.MenuBarHorizontal li
a:visited
> but that is no good either.
> Two questions:
> Am I on the right track thinking the problem is with the
link css?
> Does someone know how to solve the problem in IE6?
I have redone the whole css from scratch, modifying the Spry
Assets style sheet
and checking in IE6 as I went along, and found that "all is
well" in IE6 until
I change the background colour for the menu items {
display: block;
cursor: pointer;
background-color: #666699;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
the moment I change that bg colour, IE6 shows no text in the
menu's as though
I'd set the *color* to #669999. But I haven't.
I have been going over and over this thing now for two days.
Can someone please
help me?
Regards,
Adriana.
[ put out the rubbish if you need to reach me by e-mail ]
www.spinsister.nl

Spry menubar does not work in IE

I made a spry menubar to my website using dreamweaver cs3 on
mac. Everything works fine with Opera, Firefox and Safari, but the
menubar won't show on Internet Explorer. I've been trying to find
out how to fix the problem but it still won't work properly.
Can anyone here help me?
Thanks!
You can have a look at the page at
http://www.skls.fi/jasenalue.html

I have the same problem. Looks great in FF, Safari, Opera,
but in IE the dropdowns are dancing all over the place. Suspect
it's something in the hover classification, but can't figure out
where the problem is:
http://www.kirkaubry.com

SPry menubar floating submenu's

I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
Here is my website www.nathanielmcmahon.com
I had it working in one browser before but not others. Now firefox and iexplorer push content below and chrome pushes content to the side.
I want the menu to display over content with an opaque background
Below is the modified sprymenubar css.
@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
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    z-index: 1200;
/* 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
/* 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%;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    height: inherit;
    position: relative;
Submenus should appear below their parent (top: 0) with a higher
z-index, but they are initially off the left side of the screen
(-1000em) */
ul.MenuBarHorizontal ul
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 10em;
    position: relative;
    left: -1000em;
    z-index: 1300;
    visibility: visible;
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: 115px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 13em;
    z-index: 2000;
    height: 35px;
    background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
/transparent-png.png', sizingMethod='fixed');
    background-color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    margin: -27% 0 0 75%;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: .5em;
    color: #999999;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #999999;
/* 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: #999999;
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(../SpryAssets/SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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
    z-index: 1010;
    position: absolute;
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
Here is my website www.nathanielmcmahon.com
I had it working in one browser before but not others. Now firefox and iexplorer push content below and chrome pushes content to the side.
I want the menu to display over content with an opaque background
Below is the modified sprymenubar css.
@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
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    z-index: 1200;
/* 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
/* 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%;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    height: inherit;
    position: relative;
Submenus should appear below their parent (top: 0) with a higher
z-index, but they are initially off the left side of the screen
(-1000em) */
ul.MenuBarHorizontal ul
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 10em;
    position: relative;
    left: -1000em;
    z-index: 1300;
    visibility: visible;
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: 115px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 13em;
    z-index: 2000;
    height: 35px;
    background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
/transparent-png.png', sizingMethod='fixed');
    background-color: #FFF;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    margin: -27% 0 0 75%;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: .5em;
    color: #999999;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #999999;
/* 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: #999999;
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(../SpryAssets/SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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(../SpryAssets/SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 94% 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
    z-index: 1010;
    position: absolute;
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Spry MenuBar F. Fox fine, IE Explorer displays off

Hello Friends,
I am having an issue with my Horizontal SpryMenubar.
In Firefox all seems fine. However when I load my website in IE Explorer, a black bar, (same length as my Spry Menubar) appears below the actual Menubar. It almost seems like it is part of the Menubar and but is pushed down out of position.
I have included my CSS and a screen shot to illustrate the issue.
If anyone can shed some light on this I would be very grateful hearing from you. Many thanks in advance for your assistance!
@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: 600px;
    margin:auto;
    background-color: #000000;
/* 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
    list-style-type: none;
    font-size: 100%;
    position: relative;
    cursor: pointer;
    top: -55px;
    width: 9em;
    padding: 2px;
    float: right;
    background-color: #000000;
/* 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;
    top: 10px;
/* 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: 10px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    background-color: #000000;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    cursor: pointer;
    background-color: #000000;
    color: #FFFFFF;
    font-family: "Century Gothic";
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    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.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #33FF66;
/* 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: #FF0000;
    font-family: "Century Gothic";
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background-color: #000000;

Hi,
The following code will give you a nice black line as you described:
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 600px;
    margin:auto;
    background-color: #000000;
My advice, keep the original CSS and create a myStyles.css which is loaded after the Spry CSS. myStyles.css will then contain your mods. This makes it much easier to keep track of when something goes wrong.
Hope this helps,
Ben

How to make spry menubar first button different colour?

Hi
When making spry menubar how do you make the first button or whatever page you are on a different colour to show that you are on that page?
thanks
alix

1. Add a helper script called SpryDOMUtils.js as per
<script src="SpryAssets/SpryDOMUtils.js"></script>
2. Add a function called InitPage or similar that inspects each of the menu items and compares the link with the current URL as per
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
3. Add a listener for when the page is loaded. The listener will be the trigger for the function
Spry.Utils.addLoadListener(InitPage);
4. Add a style rule for the activeMenuItem that we, in our function, addedto the current menu item.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
The !important bit is to override the JS
Your complete document should look similar to
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="untitled.php">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
</script>
</body>
</html>
Gramps

How can I tweak my Spry Menubar? What are the limitations

Hi guys, bit of a beginner here but I am getting on with Dreamweaver. I'm completely competent with computers as long as it's in a GUI, but I do know some basic HTML, know how the .css works and how the program works generally.
I've made a really nice website in Photoshop, though of course it's just a .psd file. I'm really pleased with it, and am in the process of turning it into a website in Dreamweaver CS5.5. Already hit a bit of a snag unfortunately.
See, I need to make a menubar across the top of the page, and a Spry Menu Bar seems to be the best solution. After seeing the amount of code it generates, I was really glad that the Dreamweaver GUI seemed able to handle it!
Sadly though, I'm already having huge problems with it.
Here's how it currently looks
www.reviewfreak.net
Ignore the awful font - I know how to fix that. My main problems are that I can't seem to centre the thing (It's absolutley positioned?) and when a viewer shrinks their browser window down it makes the menu shrink into collumns (infruating!). I also hate the way it has put each menu into a solid block of colour.
Using rollover images, I've simulated how I'd like it to appear:
www.reviewfreak.net
Please guys, could you give me some some pointers on making
www.reviewfreak.com look like www.reviewfreak.net ? Or is there a better way? Can I somehow integrate rasterized text into a rollover image, put hyperlinks on a rollover? If you could do rollovers within rollovers that would be incredible!
Thanks so much, I know I've rambled a bit!

Have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Gramps

Spry Menubar, Vertical not showing in IE

Hi,
I am using the vertical Spry menubar, and i have three levels of submenus... Main Menu->SubMenu->Sub-SubMenu
IE show only the first two levels (Main Menu->SubMenu) but the third level is not being displayed.
How can i fix this?

The original SpryMenuBar files do not have a problem with modern browsers.
This means that either
you have fiddled with the original Spry files
you have other markup that stops the menu from displaying properly
you have both of the above
If you need further assistance, you will need to supply an online URL so that we can see your code
Ben

Spry menu IE Problems, shifting submenu to the right

ok haveing trubble with the menu shifting to the right of the drop down, it works in all other but IE... any ideas ?
code:
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
          list-style-type: none;
          font-size: 105%;
          cursor: default;
          width: auto;
          margin-top: -32px;
          margin-right: 0%;
          margin-bottom: 0px;
          margin-left: 5em;
          height: auto;
          float: left;
          border-bottom-style: none;
          font-weight: normal;
          line-height: normal;
          font-style: normal;
          color: #000;
          padding-top: 0px;
          padding-right: 0%;
          padding-bottom: 0px;
          padding-left: 0%;
          text-align: center;
          border-top-style: none;
          border-right-style: none;
          border-left-style: none;
/* 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
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: center;
          cursor: pointer;
          width: auto;
          float: left;
          margin-top: 10px;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 0;
          visibility: inherit;
/* 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: 110%;
          z-index: 1020;
          cursor: default;
          width: 12em;
          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;
          -khtml-opacity: 0.9;
          background-color: #666;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 11em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin-right: 0;
          margin-bottom: 0;
          width: 12em;
          margin-left: 12em;
/* 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;
          background-color: #666;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          border: 1.5px solid #fff;
          font-size: 12px;
          padding-top: 0px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: auto;
          background-color: opacity
:0.4;
          color: #FFFFFF;
          text-decoration: none;
          font-size: 100%;
          padding-top: 0em;
          padding-right: 2em;
          padding-bottom: 0em;
          padding-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          color: #F69;
          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: #FF6699;
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 */
ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background-color: #FFF;
          filter:alpha(opacity=0);
          /* [disabled]-moz-opacity:0.; */
          -khtml-opacity: 0.;
          opacity: 0.;

There are so many (unnecessary) changes made to the SpryMenuBarHorizontal.css that I have given up.
Please have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and start again.
Gramps

Spry Horizontal Menu Problem

I switched to version 2 of the Spry Menubar due to sub-menu problems associated with iPads. Now I am having problems with sub-menus within IE8. It is not possible to *quickly* scroll down the menu without the sub-menu disappearing. Here is an example:
http://gerberanalytics.com/tennis/tennis_header_test.php
It works ok with CS6 in the design view, but not on the local test server or on the production server. Any ideas?
Thanks in advance for your help.

Gramps,
I appreciate you providing this. I took a closer look at the errors and I made a few changes but this validator service continued to kick out errors. In fact if you put Adobe's own web site into this application (http://www.adobe.com), it comes up with 44 errors. As I mentioned before, the Adobe Widget Browser application for Spry Menubar 2 is essentially creating my code so I doubted that this was an actual problem.
While I have been interacting with you, I have also been awaiting an update from Adobe's senior technology staff for a solution. I heard from them today. Here is what Adobe said: Spry Menubar 2 has problems with IE 8 and IE 9 (which I already knew). The first person with whom I spoke at Adobe suggested that my customers running the IE 8 and IE 9 browsers should switch to a different browser, such as Chrome. I explained that asking users to switch was not a solution -- that's about 35% of my users. I then asked to speak with a manager / supervisor.
My conversation with the supervisor went a bit better. He told me that those running IE 8 and IE 9 on a Windows XP machine are ok. Vista is a problem. Windows 7 is also iffy. My machine is a Vista and my wife's machine is a Windows 7. It does not work on either machine for us.
I told him that Spry Menubar 2 should be withdrawn from their site or there should be a warning to insure that people are aware of the problems. He didn't say that they would do that. He suggested that I should check back with him in a couple of weeks. I did not get a warm and fuzzy feeling that this was a priority item for them.
At this point, I'm bailing on Spry Menubar 2. I may return to Spry Menubar 1.6 which requires a "double tap" on the nav buttons to work on an iPad. I may also check out jQuery.
Thanks for the suggestions but it looks like Adobe has some serious issues. If your customers are using iPads (and they are), Spry Menubar 2 is not a solution to fix the problems encountered in Spry 1.4 and Spry 1.6.
Scott

Dreamweaver spry menubar vertical doesn't work properly in firefox 3.6.3 for windows

The links in the menu items in the left hand sidebar (a Spry menubar vertical) do NOT work properly in Firefox 3.6.3 for Windows. They work when the home page is first loaded, but when you go to another page using the menu links and return to the home page via the BACK ARROW, the links no longer work. You have to reload the page to get the links to reappear.This bug is only manifested in Firefox 3.6.3 for Windows. The menus work as expected in IE 8 for Windows, Google Chrome 4.1.249.1064 (45376) for Windows, Safari 4.0.5 for the Mac, Google Chrome 5.0.375.38 beta for the Mac and Firefox 2.0.0.17 for the Mac.
== URL of affected sites ==
http://elkview.zxq.net/

Your above posted system details show multiple Java Console extensions.
You can uninstall (remove) the Java Console extensions and disable the Java Quick Starter extension, you do not need them to run Java applets.
See http://kb.mozillazine.org/Java#Multiple_Java_Console_extensions
See also http://www.java.com/en/download/help/quickstarter.xml - What is Java Quick Starter (JQS)? What is the benefit of running JQS? - 6.0
Disable the Java Quick Starter extension: Tools -> Addons -> Extensions
Control Panel -> Java -> Advanced tab -> Miscellaneous -> Java Quick Starter (disable)
You can try a direct connection: <br />
Control Panel > Java > General tab > "Network Settings...": "Direct Connection" (enable)

Spry Menubar-background problem

Similar Messages

Maybe you are looking for