Spry submenu placement issue

Hi all, here's the url:
http://davidcoshdesign.com/nea/
Look at Lighting. When I added a 2nd level submenu item, the 1st level item stopped being centred below 'Decorative'.
Also, the grey box associated with the 2nd level item appears to be above it!
I've tried altering the position in ul.MBH ul ul – but this doesn't seem to have any affect.
Any clues, greatly appreciated.
RP

This might help http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and this http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdavidcoshdesign.com%2Fnea%2F
Gramps

Similar Messages

Submenu placement

When I change the submenu placement of my horizontal spry
menu bar, it changes the placement of all submenus. Is there any
way I can modify the placement of an individual submenus?

"skonefes" <[email protected]> wrote in
message
news:gdo08o$5h4$[email protected]..
>
> When I change the submenu placement of my horizontal
spry menu bar, it
> changes the placement of all submenus. Is there any way
I can modify the
> placement of an individual submenus?

Problems with Spry submenu appearing directly underneath parent in IE.

I've checked out a lot of forums but I can seem to find a solution to my spry issue. My spry submenu will not show up directly underneath the parent in Internet Explorer. Firefox and Safari look fine. I'm somewhat new to the Spry menu so any help would be appreciated. Here is my site: www.mattcreason.net. It's the portfolio tab.
Here is my SpryMenuBarHorizontal.css code:
@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;
background-repeat: no-repeat;
border-top-style: none;
border-right-style: none;
border-bottom-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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: 163px;
float: left;
background-repeat: no-repeat;
visibility: visible;
/* 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: 163px;
position: absolute;
left: -1000em;
height: 48px;
top: 48px;
/* 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
position: absolute;
width: 163px;
left: auto;
top: 48px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 163px;
background-color: #8C0002;
/* 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;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
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: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #FFFFFF;
/* 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: #B89B5C;
/* 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: no-repeat;
height: 48px;
width: 163px;
padding: 0px;
clear: none;
float: none;
margin: 0px;
background-image: url(../jpegs/PortfolioButton.jpg);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* 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;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
/* 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%;
background-image: url(../jpegs/PortfolioRollover.jpg);
/* 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;
Thank you!

You not are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Gramps

Weird Spry Submenu Effect in Internet Explorer

It looks like the first category item of a Spry submenu is stretching vertically to the same length of the Spry sub sub menu to the right. It works fine in Safari and Firefox. It is only doing this in IE 8 on a pc
Any idea why this might be happening?
Go here to see a photo of it.
http://www.advservices.biz/newsite/Photo015.jpg
To check out the site itself, go here
http://www.advservices.biz/newsite/newsiteindex.html
Thank you!

I am not sure if the following is the cause of the problem but try it.
/* 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;
     ul.MenuBarHorizontal ul li.MenuBarItemIE
          display: inline;
          f\loat: left;
The second set of rules should be deleted.
I hope this helps.
Ben

I can´t see the Menu Spry submenu because a slideimages hide

I can´t see the Menu Spry submenu because a slideimages hide. The slide image is under the spry horizontal menu, so when a put the mouse over, the submenus open behind the slide images.
How can I repair.
Thanks a lot, I can´t continue my work because of this.
Sorry for may english.
Thank you.

Assuming that the image slider is coded in JS and not Flash, there should be a z-index specified. Usually the value of the z-index is some absurdly high number. The challenge is to give the sub menu items of the menu bar a higher z-index value or to reduce the z-index of the image slider to a value lower than that of the menu bar.
The value of the z-index (1020) for the menu bar is located on or about line 48 of the SpryMenuBarHorizontal.css

Spry submenu is hidden by iframe on page

I normally do not use iframes but this particular site requires that i do.
I am using spry horizontal menu bar and the drop down submenu under products is hidden by the iframe. I have tried several variations with position and z-index but can't get the submenu to show on top of the iframe.
http://www.airpowerservicesinc.com/kaeser_aftercool_air.php
thank you for any help,
Jim Balthrop

I found out the problem is not with the iframe itself, but i was using the iframe to display a pdf file and
found out that browers do not support showing a pdf file on a web page. So I guess that is why the spry submenu will not show on top of the iframe, because it displays a pdf file. When i had the iframe display a php page, the spry submenu showed on top of the iframe.
Jim Balthrop

Spry submenu shows on top in ie

Help, I have tried everything. My product spry submenu works in every browser except ie. The address is www.timelessflooringdesign.com.
Thanks

You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Gramps

Spry Image Slideshow issue in IE8 - Another Error

I looked at the other discussions pertaining to Spry Image Slideshow issues. The slideshow works well in Firefox but I'm getting an error in IE 8 .
https://www.devens.army.mil
Webpage error details   from SpryDOMEffects.js, line 389
Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
    get: function(ele, prop)
        return ele.style[prop];
    set: function(ele, prop, val)
        ele.style[prop] = val;                       (line 389)
Thank you for any help you can provide.

I've noticed that you fixed the problem can you tell me how to fix it?
having same problem here

Spry Horizontal Submenu Bar Issues in IE6

Hey there,
I've been struggling with this issue for a while now, and I was hoping that I might be able to get a little help from the community to resolve it. I've built a site which looks absolutely fine in all browsers except for Internet Explorer 6. In IE6, the sub menu bars jump around all over the place for no apparent reason, and I can't figure out why... The site in question is www.flexyoffice.co.uk.
Now, in most browsers, the submenu appears above the menu bar. This was my intention. Unfortunately, in IE6, if you hover over a menu item containing a sub menu, the submenu will either appear over the menu item, below the menu item, or next to the menu item. Additionally, once you try to actually hover over the sub menu, the sub menu itself moves, leaving the user to chase the submenu around the page in pursuit... Not ideal...! Looking at the page in IE 6, it almost seems as if the submenu opens up to the right of the menu bar, which results in everything else being thrown out. I could be wrong though.
I'm relatively new to these forums, so if there is any specific information which I can provide which would possibly help to identify the issue, please do let me know. If there are any suggestions out there that are worth giving a go, I would really appreciate any thoughts that you may have.
Thanks very much guys,
Chris

Hi Chris,
I tried your page in IE6 and it crashed the browser! To be honest, most people should have upgraded from IE6 ages ago, I was redirected to MS website to upgrade the second time I started the browser.
As I couldn't even get the page to load, I can't suggest what could be wrong.
One thing I did notice wrong that made your menus appear jumpy at first was that you are not preloading the images needed to display the menu bars.
you have the Javascript function in the correct place - function MM_preloadImages() {
But you have not selected to preload any images in the body tag.
Should look something like this -
<body onload="MM_preloadImages('images/buttons/contactOver.gif','images/buttons/aboutOver.gif', 'images/buttons/loginOver.gif','images/buttons/case_studiesOver.gif','images/buttons/newsO ver.gif','images/buttons/fundingOver.gif','images/buttons/eventsOver.gif','images/buttons/ homeOver.gif')">
These are obviously not the images you want to preload (taken from one of my sites), replace the images with the images used in your menu and your menu will operate much smoother as the images will be ready to use.
Hope this helps (a little!)
Chris

Spry H-Bar SubMenu Placement

I hope I can get a little help with a problem I have come across.
Background: I am creating a page with 3 separate horizontal Spry Menus, each menu is contained in a cell of a 1 row 3 column table. I created the first menu so it looks like I want it to, to do so I had to insert a few local css rules to override the separate css file as per a suggestion on adobe's site. Everything works as I desire in Firefox and IE8.
Next i created the 2nd menu in the 2nd cell and renamed the class to "MenuBarHorizontal2" and proceded to replciate both the local and seperate css rules and renamed all the replicas to match the modified 2nd menu. I realize this is probably a monkey force round peg in square hole approach, but it worked.. mostly.
Issue: When viewed in Firefox everythign looks as I intend, but when viewed in IE8 the 2nd menu has an issue. The 2nd menu's submenu area appears at the top of the page directly over the menu bar instead of below it like the first menu. I have yet to insert the 3rd menu, but I expect a similar issue form it so I have held off.
I will attach the page in question, and both css sheets for you to view. In addition you can view the page online at http://www.ecotulips.com/test.htm
I appreciate any help with this issue as I am doing this site as a wedding gift for my sister.

Hi,
I notice that you have menubar and other styles both as linked external style sheets AND as style sheets in the head of your document.
This will do nothing but confuse things. If you can keep all your styles in distinct, external style sheets, you will better be able to trace sources of difficulty, as the cascade of styles will be simpler to read.
Regarding your page with
3 separate horizontal Spry Menus, each menu is contained in a cell of a 1 row 3 column table. I created the first menu so it looks like I want it to, to do so I had to insert a few local css rules to override the separate css file as per a suggestion on adobe's site.
I think that you can achieve the effect you want with a single Spry Menubar with three drop down menus all on the same menu bar. Take a look at supporting video: http://www.adobe.com/designcenter/video_workshop/?id=vid0168
As you have found, by trying to use your "Number 12 forcefit" (round peg in a square hole), you have leaped over more careful construction techniques into a heap of difficulty. If you go back and remove the menubars that you have inserted...click anywhere on one, click the blue tab on the surrounding div, and strike the delete key, everything will hopefully fall back into pre-menu condition.
When you insert the menubar, you will find it totally editable, CSS style-wise.
Z

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 positioning issue in IE?

Hi,
I am quite new to dreamweaver and using spry menus but I have decided to create a horizontal spry bar in my website.
The menu works fine in safari but the menus and submenu are out of position when using IE and shift to the right.
Please could you let me know how I can fix this problem and if you can see any other issues in the code i need to sort out?
Here is the 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 auto;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 846px;
font-family: Verdana, Geneva, sans-serif;
height: 28px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 141px;
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% 0 0 0%;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 141px;
position: absolute;
left: -1000em;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
/* 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;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
border-top-width: 0pt;
border-right-width: 0pt;
border-bottom-width: 0pt;
border-left-width: 0pt;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 141px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 2% 0 0 100%;
/* 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
width: 141px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
color: #FFF;
/* 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: #FFF;
text-decoration: none;
border: 1px solid #000;
background-image: url(BtnBackground.gif);
font-size: 10px;
background-repeat: repeat-x;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image: url(BtnBackgroundOver.gif);
background-repeat: repeat-x;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #FFF;
background-image: url(BtnBackgroundOver.gif);
background-repeat: repeat-x;
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(BtnBackground.gif);
background-repeat: repeat-x;
color: #FFF;
font-size: 10px;
/* 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(BtnBackground.gif);
background-repeat: repeat-x;
/* 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(BtnBackgroundOver.gif);
background-repeat: repeat-x;
/* 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(BtnBackgroundOver.gif);
background-repeat: repeat-x;
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;
Also, i've noticed that when the menus go over the top of flash objects the text is not so clear or bright!!! If anyone knows a way to sort this that would be great too!

Add/modify the following
ul.MenuBarHorizontal li {
text-align: left;
ul.MenuBarHorizontal a {
text-align: center;
Gramps

HELP! Spry Submenu No Longer Working in Firefox

This used to work, I've made some changes to the site, adding
to the menu etc. now the submenus no longer collapse in Firefox,
fine in IE. I haven't changed the JS from when it used to work,
although, here's the bottom half, attached below. Here's the index:
http://hollycontracting.com/dev
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 5px;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 9em;*/
/* 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
background-image:url(wwww.hollycontracting.com/dev/SpryAssets/SpryMenuBarRightHover.gif);
background-repeat:repeat-x;
margin:0;
padding: 0;
list-style-type: none;
font-size: 11px;
font-weight:bold;
color:#FFFFFF;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
/* 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
background-image:url(wwww.hollycontracting.com/dev/SpryAssets/SpryMenuBarRightHover.gif);
background-repeat:repeat-x;
margin: 0 0 0 130%;
padding: 0;
list-style-type: none;
font-size: 11px;
font-weight:bold;
color:#161616;
position: absolute;
z-index: 1020;
cursor: default;
width: 8em;*/
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: 6.5em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0px solid #161616;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0px solid #161616;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-image:url(wwww.hollycontracting.com/dev/SpryAssets/SpryMenuBarRightHover.gif);
background-repeat:repeat-x;
padding: 0.5em 0.75em;
font-size: 11px;
font-weight:bold;
color:#C3922E;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-image:url(wwww.hollycontracting.com/dev/SpryAssets/SpryMenuBarRightHover.gif);
background-repeat:repeat-x;
font-size: 11px;
font-weight:bold;
color:#FFFFFF;
/* 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-image:url(wwww.hollycontracting.com/dev/SpryAssets/SpryMenuBarRightHover.gif);
background-repeat:repeat-x;
font-size: 11px;
font-weight:bold;
color:#FFFFFF;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image:
url(wwww.hollycontracting.com/dev/SpryAssets/SpryMenuBarRightHover.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(wwww.hollycontracting.com/dev/SpryAssets/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.MenuBarVertical iframe
//position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* 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;

Search teh forums some have reported that removing the cache in Safari resolves this issue
LN

Spry MenuBar1 IE Issue

Website works great in FFX 16 and Chrome 21, IE 9 has issues displaying the menu, and it does as well in IE8 or 7 if I use the developer tool to look at compatability. The menu should have the top menu items going from right to left, instead in IE it goes from top to bottom.
suppose to look like this:
instead in IE it looks like this once I accept the Active X pop-up:
Here's the CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: center;
          cursor: pointer;
          width: 8em;
          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: auto;
          position: absolute;
          left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: auto;
          display: block;
          white-space: nowrap;
          float: none !important;
/* 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;
          float: none !important !important;
          float: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          background-color: #33C;
          color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #33C;
          color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          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: none;
          background: #FFF;

Fixed my own issue after playing long enough. Commenting out the entire section for browser hacks worked! Now it looks great in IE 9, 8, & 7

Spry submenu not displaying in IE

Hello,
I just finished designing my first site with dreamweave, and am having some problems.I have read some threads and found the advice helpful to my situation, but still have a problem.
My spry menu was not displaying in Internet Explorer when activex is was enabled. I fixed part of the problem; the main Vertical Spry menu displays, but the submenu (for services) and the background rollover are different than what I intended (and what they are in Firefox). Can someone point me in the right direction? I'll upload my vertical .ccs and .js files, please let me know if you need more.
Thanks,
Kalyndra

I've played around with this for a while, but I think there is something in your SpryMenuBar.js file that is not working; or, it is not uploaded to the server.
Additionally, this declaration:
/* 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
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 150em;     /* THIS WANTS TO BE 150px, NOT 150em but there are bigger issues (see below) */
    left: -1000em;
    top: 0;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
I recommend that you delete this SpryMenuBarVertical and all its associated files and insert it again. If you want to change things in the CSS files, do so carefully (and in the appropriate sections...layout in layout; color and fonts in their own section).
By redoing, your submenu indicators will resume having the correct path (in your file, they are misnamed and improperly pathed), all your javascript and css files will be properly linked, etc.
Beth

Spry submenu placement issue

Similar Messages

Maybe you are looking for