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;

Similar Messages

Spry menubar submenu horizontal instead of vertical

I have spent two days trying to figure out why the submenu on my spry menubar goes horizontal instead of vertical. I have watched youtube videos and all the tutorials automatically have them going vertical under each other. My submenu bar goes left to right and i dont want that. I have tried several changes with the code in CSS and the HTML and I can move the main menubar and the submenu all over the screen, just cant get it do drop down under each other. Help please!!

Have a look here for auto widths http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml.
The only change I would make to the above is to add !important to the following
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
Gramps

Spry MenuBar - IE6 - how to make that submenu is shown above the parent element

Hi you all,
I need the menubar to open the submenu above the parent element.
Here´s what I did:I inserted a spry menubar and the only css-change I did was the one shown below in red "botom: 2em;"
This works exactly as I need it to - in Safari, Firefox and Opera.
In IE6 however, the submenu is shown far below the parent element. Is there a solution?
Greetings from Germany
Alex
/* 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: 100px;
    position: absolute;
    left: -1000em;
    bottom: 2em;

thank you very much, Nancy!
Greetings from Mannheim, Germany
Alex
Am 03.09.2010 um 23:45 schrieb Nancy O.:
>> In IE6 however, the submenu is shown far below the parent element.
>> Is there a solution?
Possibly. It's hard to tell without seeing your page, though.
>
The position of Spry Menu Bar submenus is controlledby the margin
property on submenu ul tags.
1. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontalul rule.
2. Change the margin: -5% 0 0 95%; default values to the desired
values.
>
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS895F3A6D-6D73-42ef-B568-3D04A BD2F171.html
>
Also, look through the CSS coments for IE hacks. Often these
workarounds for older browsers can be commented out or deleted.
Test before you delete anything permanently.
>
>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
>

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

Horizontal spry menu floats around differently in FF and IE

Hi there !!
I would like to ask you about the following:
When I use a horizontal spry menu and have it adjusted for FireFox, I get a result I can live with.
Except that the submenu's under the heading 'cultuur' and 'projekt' do not slide down altogether, but are horizontal as well...
How can I fix it so that they are positioned under its 'parent' ??
But that's my minor question, actually...
When I open my site in Internet Explorer (7 & 8) the spry menu looks different; it is far more stretched. First it also floated left, but I managed to fix that. The major problem is that the submenu's appear on the left of the page. I can't get them under their respective parents at all.
Can you please help me with that?
My site:
www.mnette.nl
(if you need more info, I'm glad to provide it )

When I use the original SpryMenuBarHorizontal.css, your page behaves extremely well. I realise that you wish to customise the menu to suit your site, but these modifications are to be made under strict rules so that the cross browser functionality is not compromised.
Have a look at the following 10 commandments http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
May I suggest that you ressurrect the original style sheet and work your way from there making sure that you keep to the above commandments.
If you still have problems, please come back here for further assistance.
Go Aussies and Hup Holland!
Ben

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

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

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

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

Help with vertical spry menu bar submenu displaying incorrectly!

I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry horizontal menu - submenu items are displaying laterally instead of vertically in IE

I am currently building a website in Dreamweaver CS5 (on a mac) that includes a horizontal Spry menubar. The drop down items appear vertically, as I want them to in Firefox, Safari, and Chrome, but not in Internet Explorer for Windows. Instead, the items are listed laterally in IE. How can I fix this?
Here's a link to the page:
http://dcsyc.org/
Thanks!

I'm not certain which attribute I changed, ive done a lot more coding since then, but if you open the CSS file linked above its in there somewhere. I'm pretty sure I set the submenus width to automatic to fix it, but I'm not 100%.
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 12pt;
     z-index: 1020;
     cursor: default;
     width: auto;
     position: absolute;
     left: -1000em;
I think its the width: auto; in that tag.
On the plus side, the link to the CSS works, and the answer is in there somewhere.
If you really cant figure it out, post again here and we'll put our heads togethe .

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

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 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 floating submenu's

Similar Messages

Maybe you are looking for