IE problems with vertical spry menu bar

hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip

Similar Messages

Problems with Vertical Spry menu bar in Internet Explora

Hi I'm new to Dreamweaver,
I having trouble with a new site I'm making in CS4. A problem with a vertical menu bar, in IE. Can anyone help?
1. The text is left aligned and should be centered.
2. The menu bar has moved left
3. My paragraph text has moved up the page and aligned itself to the to the menu bar.
Website address: http://www.greenwyse.co.uk/
I'm finding dreamweaver a bit clunky, reading the 'Missing Manual' but still very frustrating. Any one have any idea's/
cheers
myquirk

Sorry, but your CSS is has been mangled beyound recognition.
The solution is to start with an untouched style sheet. Then add or modify the CSS testing in your browsers as you make the changes.
Have a look at the following where I have positioned the menu. All that is now required is the styling for font and the hover event.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet">
<style>
body {width: 960px;    margin: auto;}
.article {clear: both; margin: 20px;}
/* SPRY MENUBAR */
ul.MenuBarVertical {width: 29em; margin: auto; border: none;}
ul.MenuBarVertical li {width: 29em; text-align: center;}
ul.MenuBarVertical a {background-color: transparent;}
</style>
</head>
<body>
<h1><img src="http://www.greenwyse.co.uk/greenwyse natural products/green_wyse_logo.png" width="200" height="136" alt="Green Wyse Natural Body Care Products" longdesc="greenwyse natural products/green_wyse_natural_body_care_products.png" /></h1>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">100% Natural</a></li>
<li><a href="greenwyse natural products/about dawn Ireland.html">Handmade</a></li>
<li><a href="greenwyse natural products/Hand-Made-Natural-Bodycare.html">Eco Friendly</a>      </li>
<li><a href="greenwyse natural products/green wyse body care products.html">Luxurious Body Care</a>    </li>
</ul>
<div class="article">
<p>Working through a top-down, bottom-up approach, the vitality of conceptual synergies is of supreme importance to focus on improvement, not cost. Motivating participants and capturing their expectations, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. Building flexibility through spreading knowledge and self-organization, by moving executive focus from lag financial indicators to more actionable lead indicators, the new golden rule gives enormous power to those individuals and units.</p>
<p>Organizations capable of double-loop learning, empowerment of all personnel, not just key operatives, measure the process, not the people. In a collaborative, forward-thinking venture brought together through the merging of like minds. The balanced scorecard, like the executive dashboard, is an essential tool in order to build a shared view of what can be improved, the vitality of conceptual synergies is of supreme importance. While those at the coal face don't have sufficient view of the overall goals.</p>
</div>

<script src="SpryAssets/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps

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

Problems with my spry menu bar, need help

i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda

i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda

Help with a Spry Menu Bar

I'm having trouble with a Spry Menu Bar not displaying
correctly in Internet Explorer, while it displays fine in every
other browser I have available. I've done some searching on these
boards, but the queries I've found with the same type of problem
each has a knowledgeable person editing the code for the
poster...and I can't seem to make heads or tails of it.
So, below is my link. What you'll see if viewed in Explorer
is that the "Clinics" listing and the "Services & Specialties"
listing are each on the same horizontal line, rather than vertical
like the rest of the menu. If anyone can help me in correcting this
problem, I'd be very appreciative.
Thanks in advance.
http://www.chambershospital.com/temp/about.html

Hello,
You might try removing all of the <div> tags you
inserted in the menu.
This can happen if you select text in design view and use the
"align" icons
in the properties window instead of using CSS to align
things.
For example:
<li>
<div align="left"><<****REMOVE THIS
<a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</div><<*** REMOVE THIS
</li>
So it looks like this:
<li><a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</li>
Repeat for all the other <div align="left"> and
</div> tags in the menu.
Take care,
Tim
"Zim74" <[email protected]> wrote in message
news:fv4vc0$r0t$[email protected]..
> I'm having trouble with a Spry Menu Bar not displaying
correctly in
> Internet
> Explorer, while it displays fine in every other browser
I have available.
> I've
> done some searching on these boards, but the queries
I've found with the
> same
> type of problem each has a knowledgeable person editing
the code for the
> poster...and I can't seem to make heads or tails of it.
>
> So, below is my link. What you'll see if viewed in
Explorer is that the
> "Clinics" listing and the "Services & Specialties"
listing are each on the
> same
> horizontal line, rather than vertical like the rest of
the menu. If
> anyone can
> help me in correcting this problem, I'd be very
appreciative.
>
> Thanks in advance.
>
>
http://www.chambershospital.com/temp/about.html
>
>

Problems with Vertical Spry in IE

Hi,
I am having this problem viewing Vertical Spry menu only on internet explorer. It's ok on google chrome but it messes up on the internet explorer.
I would highly appreciate if someone could help me sort this out please.
The link to my website.
http://www.hbmrc.org/index-1WIP.html
a@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: 0;
padding: auto;
list-style-type: circle;
font-size: 100%;
cursor: default;
width: 13em;
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color:#313132;
border-bottom-style:groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: auto;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 13em;
background-color: #FFFFFF;
overflow: visible;
    background-image: url(../images/sidebarbk.jpg);
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 12em;
left: -1000em;
top: 6px;
ul.MenuBarHorizontal li ul li{
    clear: left;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: -11px;
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color:#313132;
border-bottom-style:solid;
border-bottom-style:groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 12em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #ccc;
/*Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
/*background-color:#AECFF4;*/
background-image: url(../images/sidebarbk.jpg);
padding: 0.7em 0.75em ;
color: #000;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover
/*background-color: #777777;
color: #50cffc;*/
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color: #50cffc;
border-bottom-style: groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
padding: 0.45em 0.60em;
ul.MenuBarVertical a:focus
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover
background-color: #09F;
ul.MenuBarVertical a.MenuBarItemSubmenuHover, /*ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #7A85AD;
color: #333;
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(SpryAssets/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(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);
margin: 0;
padding: auto;
list-style-type: katakana;
font-size: 100%;
cursor: default;
width: 13em;
border-top-color: #edeeee;
border-top-style:groove;
border-bottom-color:#313132;
border-bottom-style:groove;
border-left-color:#cbcccd;
border-left-style:groove;
border-right-color:#3d3d3e;
border-right-width: thin;
border-right-style:groove;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

I am sorry, but you have changed the CSS beyound recognition; I do not want to spend my time going through it to correct it.
One example that has angered me is
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);
    margin: 0;
    padding: auto;
    list-style-type: katakana;
    font-size: 100%;
    cursor: default;
    width: 13em;
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color:#313132;
        border-bottom-style:groove;
    border-left-color:#cbcccd;
        border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
        border-right-style:groove;
Changing this has not made you an expert
Another example on or about line 155 is this line which is sure to upset the browser.
ul.MenuBarVertical a:focus
Yet another one
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
   left: -11px;
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color:#313132;
    border-bottom-style:solid;
        border-bottom-style:groove;
    border-left-color:#cbcccd;
        border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
        border-right-style:groove;
I suggest you start with a new widget, but before you do, read this http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Gramps

***I need help with my SPRY MENU BAR***

Hi everyone,
I have installed a Horizontal and Vertical Spry Menu Bar.
It looks great, but I can not figure this out.
When I click on any of the links on the bars,
my text jumps to the righ
Can someone please tell me how I can make
the text to stop jumping.
My test page is located at the link below:
http://www.tonyasdynamicdesigns.com/gregs-pages/index.html
Thank you so much for your help,
Tonya

I know that the problem is in my main-css.css because
when I deleted this css code, the text jumping stopped.
I can not figure out how to fix my main-css.css style.
Can you please help me?
Below is part of my css code
that is causing the problem.
body {
          background-color: #000000;
          background-repeat: repeat;
          background-image: url(.../gregs-images/bg.jpg);
          background-position: center;
          background-attachment: fixed;
#container {
          width: 965px;
          fixed-width: 965px;
          background-color: #1f1f1f;
          margin-right: auto;
          margin-left: auto;
          font-size: 12px;
          color: #afafaf;
          font-family: Arial, Helvetica, sans-serif;
          font-style: normal;
          line-height: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          text-decoration: none;
          border: 2px solid #1f1f1f;
          margin-bottom: 30px;
          margin-top: 30px;
          background-image: url();
          background-repeat: repeat;
#shadow {
          width: 968px;
          background-image: url(.../images/vertical-website-background-shadow.png);
          background-repeat: repeat-y;
          margin-right: auto;
          margin-left: auto;
#bottomShadow {
          margin-right: auto;
          margin-left: auto;
          width: 968px;
          background-repeat: no-repeat;
          background-image: url(.../images/bottom-website-background-shadow.png);
          height: 54px;
#header {
          height: 272px;
          background-image: url(../gregs-images/smokehouse-studios-banner.png);
          width: 965px;
#footer {
          height: 381px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
          clear: both;
#navigation {
          width: 900px;
          fixed-width: 900px;
          background-color: #1f1f1f;
          display: in-line;
          position: fixed;
          overflow: hidden;
#content {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #afafaf;
          background-repeat: repeat;
          background-image: url(.../gregs-images/grey-gradient-bg.png);
          background-color: #1f1f1f;
          text-align: left;
          width: 965px;

Vertical Spry menu bar--adjusting bottom submenu

I'm trying to adjust the last submenu on my vertical Spry menu bar. Originally, the submenu caused the page to either expand when I moused over the submenu (in IE), or the page would load with white space below the footer in order to accomodate the submenu when I mouse over it (in Firefox). The adjustment I want is to move the submenu up so that neither of those things happen. I've made the adjustment appear exactly how I want it to in Chrome and Safari, but IE, Firefox, and Opera now have the submenu placed halfway up the page. I can post the code if it's helpful, but I do not have the site hosted anywhere at the moment. The adjustment I made is in the Spry menu's css:
ul.MenuBarVertical ul#last
margin: -205% 0 0 95%;
Any help is appreciated. Thank you!
Sarah

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

Vertical Spry Menu Bars

For some reason, whenever I roll over my vertical spry menu bar, instead of it going to the side, the submenus open within the menu bar, blocking the other menu bar items. How do I make it go to the side?
Also, is there a way to make it so that the submenu items open within and underneath the menu item, but push the other menu items below it rather than going over it?
Thanks!

The online version of SpryMenuBar.js is still 1.4
Instead of uploading the file, let's try to latch onto the JS file that Adobe has online. This means that you need to change line 9, or thereabouts, from
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
to
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js" type="text/javascript"></script>
Then go down to lines 28-30 and remove these as they have already been loaded above.
To make the menu stretch the full width add the following style rule or change the existing rul to include the following
ul.MenuBarHorizontal li {
width: 16.666667%;
After you have done that we'll go on from there
Gramps

Help with vertical Spry menu

I posted this in the general forum, but thought I'd repost
here since this is more specific to Spry.
I'm having issues in IE (6 & 7...surprise, surprise) with
my vertical spry menu. It displays exactly the way I want it when I
use Opera. I think it has to do with the whitespace:nowrap on the
2nd level menu items, but I really don't know. I want the 2nd level
menu to be different width than the 3rd level, so I have both
levels set to auto width with nowrap.
This is how it looks in IE 7:
Menu
in IE
This is how it looks in Opera (correct):
Menu
in Opera
Attached is my CSS as well. Let me know if you need the HTML,
too.
Thank you for helping!
quote:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: auto;
left: -1000em;
top: 0;
white-space: nowrap;
/* 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: auto;
white-space: nowrap;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
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-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
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(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
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;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

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

Vertical spry menu bar 2.0 - orientation of submenus (left vs. right fly-out)

Hello:
I have a general question I would like to pose to anyone who has worked with the vertical spry 2.0 menu bar regarding the orientation of sub-menus (left vs. right flyout). In the previous version of the spry menu bar it was possible to to designate that the flyout sub-menus would appear to the left (as opposed to the right (normal or standard position) of the main level menu bar.
In reviewing the tutorials for the new version, and reviewing the settings for the widget I can't seem to see anything similar for the latest version of the spry menu bar. Does anyone now if this is possible? Does it require adjustments to the Javascript or can it be done directly from within the widget customization.
I realize that it isn't normal practice to pose questions in such general terms, however I thought I would try to determine if anyone has had experience in this regard before launching into the project.
Thanks in advance.
Steve Webster

OK, here's what I've done. By adjusting the right padding on #MenuBarVertical .MenuItem .MenuItemLabel, AND #MenuBarVertical .SubMenu .MenuItem .MenuItemLabel, I was able to position the right arrows to where I wanted them. I also removed all links from top-level menu items so that the fly-out submenus would appear on a touch screen. You can see the results on my client site: www.gcssepm.org. I must say that this solution was not intuitive; it took a lot of experimentation to figure out which rule to adjust, and menu rules vs. submenu rules seem to operate in the opposite manner as far as padding and arrows go.
I do have a similar issue with Scott, in that it takes two or more "taps" to get the submenus to fly out, but at least the arrow is there so the user knows there is a submenu to be had. The only real issue I still have is that for sub-submenus (i.e., third-level), no amount of tapping will get those to display long enough to select them (only an issue on the iPad). I don't know a way around this for the iPad, other than to also eliminate all links from second-level menus that have a third level, and that's more reprogramming than I want to do for today.
Final questions regarding the Spry 2.0 widget. Obviously, after I customized the widget, saved it, and imported into my site template, it took some additional tweaking before everything was working properly. Is there a way to export the settings back out to the widget, so that all the tweaking is there? Also, is there a way to save my menu text back to the widget, because it is obviously NOT Home, Entertainment, Music, etc.
Thanks for all your help, and I hope someone else benefits from my experiences as well.
Gail

Dreamweaver Help | Working with the Spry Menu Bar widget

This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html

Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Vertical Spry Menu Bar not working in all browsers

Hi, everyone!
I'm hoping you'll help me troubleshoot something. I have a spry menu bar (vertical) that's expanding properly in IE but not in Firefox or other browsers. Here is the link:
http://midlochorus.org/
Thanks in advance for any help!
Karen

I'm pretty bummed not to receive any answers to this. Is there nobody who can help me?

Problem with Horizontal Spry Menu

Hi,
I have trawled through the forum to see if I can find an answer to my problem, but couldnt locate one, so this is my first post.
I recently built this website for my wifes business and was using a simple menu bar without any dropdowns, just to get the site up and running (healingthreads.com.au). Am now looking to do some enhancements and was looking to use a Spry Horizontal Menu Bar. All was going well in that I was able to insert the menu bar and get it in the right position, however the dropdowns below the top level items (ie. Item 1.1, Item 1.2 etc) are getting hidden behind one of the other DIV's and despite trying changing z-index values, am still not able to get the dropdowns to display in front of the main DIV. Have run out of ideas and am hoping the wisdom of the forum will be able to assist. I have the same problem on the Index page as well as the other pages on the site. The website is fairly basic at the moment and is simply promoting her courses and products.
Unfortunately am not able to post live code to a server for you to test on, so best that I can do is post the code for a page and for the CSS sheets. I have left the standard Spry code in place in the source code to show that the problem exists without and fancy changes that I have made to the Spry code. I have also removed the z-index properties that I had been playing around with. So, what I am attaching is the basic code that has the problem.
Hope someone can help.
Here is the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Healing Threads is an innovative practice on the NSW Central Coast offering workshops, group work, private consultations and also has a range of aromatherapy and handwoven products for sale" />
<meta name="keywords" content="healing journeys, healing, transpersonal counselling, private consultations, aromatherapy, handwoven, workshops" />
<title>Healing_Threads</title>
<link href="Styles/healing_threads.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body
<div id="container">
<h1>Healing Threads: Healing Journeys, Group Work and Private Consultations</h1>
<div id="Banner"><img src="images/HT_Banner_2.gif" alt="Banner" width="800" height="125" border="0" usemap="#Map2" />
    <map name="Map2" id="Map2">
      <area shape="rect" coords="67,12,770,113" href="index.html" />
    </map>
    <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>
<div id="background_image">
    <div id="Prod_Image"><img src="images/HT-Web-Site-HP-Side-ImageV3.jpg" width="200" height="470" alt="Products & Services" /></div>
    <div id="main_text">
      <h5><a href="Workshops.html" class="htlinks">Healing Journeys</a></h5>
<p>Combining story, meditation, art and ritual to help tap into your own inner wisdom for self growth and healing.</p>
      <h4><a href="Groups.html" class="htlinks">Group Work</a></h4>
      <p>A range of weekly group activities exploring story, dreams, masks and more.</p>
      <h4><a href="Consultations.html" class="htlinks">Private Consultations</a></h4>
      <p>Using a range of creative processes, including meditation, art, movement, story and ritual, for the best healing outcome for clients.</p>
      <h4><a href="Oils&Sprays.html" class="htlinks">Aromatherapy Products</a></h4>
      <p>sCentred Therapies range of anointing oils, clearing sprays and perfumes that can be used to enhance meditation, ceremony and pleasure.</p>
      <h4><a href="Handwoven.html" class="htlinks">Handwoven Items</a></h4>
      <p>Handwoven products such as throws, wraps and scarves, created from stunning wools, silks and cottons.</p>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Here is the main CSS sheet
@charset "UTF-8";
/* CSS Document */
#container {
width: 968px;
background: #CCCCFF;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
overflow: scroll;
height: 1200px;
#Banner {
width: 800px;
background: #CCCCFF;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
#background_image {
background-image: url(../images/Coloured_Threads_Web.jpg);
background-repeat: no-repeat;
position: relative;
height: 533px;
width: 800px;
margin: 0 auto;
overflow: visible;
#background_image_ws {
background-image: ;
background-repeat: no-repeat;
position: relative;
height: 1000px;
width: 800px;
margin: 0 auto;
overflow: visible;
#main_text {
background-color: #FFF;
width: 500px;
margin-left: 0px;
position: absolute;
right: 0px;
bottom: 0px;
top: 52px;
left: 269px;
height: 470px;
#main_text h4 {
color: #7F7EB1;
font-family: Arial, Helvetica, sans-serif;
margin-left: 6px;
#main_text p {
color: #7F7EB1;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#main_text h5 {
color: #7F7EB1;
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#Prod_Image {
background-color: #FFF;
height: 300px;
width: 200px;
position: absolute;
top: 53px;
#Prod_Image,#main_text {
float: left;
#Prod_Image {
margin-left: 35px;
#main_text_ws {
background-color: #FFF;
width: 600px;
height: 1000px;
margin-left: 0px;
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
left: 200px;
#Prod_Image_ws {
background-color: #FFF;
height: 1000px;
width: 200px;
position: absolute;
top: 0px;
#Prod_Image_ws,#main_text_ws {
float: left;
#main_text_ws h4 {
color: #7F7EB1;
font-family: Arial, Helvetica, sans-serif;
margin-left: 6px;
font-size: 16px;
#main_text_ws p {
color: #7F7EB1;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#main_text_ws h5 {
color: #7F7EB1;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 6px;
#background_image_ws #main_text_ws p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7f7eb1;
a.htlinks:link {color:#7f7eb1;}
a.htlinks:visited {color:#7f7eb1;}
a.htlinks:hover {color:#0d004c;}
#container h1 {
position: absolute;
top: -500px;
Here is the Spry CSS Sheet - note: I have not modified this in any way.
@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: 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: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* 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;
/* 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: left;
background: #FFF;
Am sure that this is something quite basic that I have missed, however as mentioned above, am out of ideas.
Looking forward hopefully to your helpful suggestions.
Regards,
Healing Threads

Gramps,
Thanks for the prompt reply, greatly appreciated here in Sydney.
Re your response. When I preview the page in both Safari and Firefox, the dropdowns are not visible, just the top layer Items.
Dont understrand what is going on.
Am I doing something wrong when I am previewing the file?
RThanks,
Healing Threads.

Connect horizontal with vertical spry menu

Hi,
I am a beginner, so maybe this is a stupid question... But here we go
Is there a way to "link" horizontal and vertical menu bars together?
I'll try to give an example...
The horizontal bar (main menu, in the header of the page) is:
Item 1          Item 2        Item 3          Item 4
(sub 1.1)      (sub 2.1)
(sub 1.2)      (sub 2.2)
Now, when clicking on one of the links, let's say "Sub 2.2", I would like to have the sidebar show this:
Item 2
sub 2.1
sub 2.2
     subsub 2.2.1
     subsub 2.2.2
     subsub 2.2.3
sub 2.3
Where "Item 2" stays fixed as a title, and the subs form an accordion menu revealing sub-submenu's (you can open and jump to another sub by clicking on it)
Now, the easy way to do this, is to create a separate page with a separate accordion menu in the side bar for each of the "Items". But that means that when I alter something (add a submenu, change its name, change a link, etc), I'd need to change the separate pages as well.
Is there a not too complicated way to link them together? So that the Item 2 in the side bar is not just a word, and the menu below not just a separate menu, but refer to the horizontal menu which is in the header? In other words, I would like to create one single list with all the "Items", "Subs" and "Sub-subs" to which I can refer and use them in different spry formats and locations.
Thanks in advance!
Tom

Short answer, no way to do that with Spry menus. Also, Spry is a dead framework. Adobe abandoned it in 2012 and removed Spry from DW CC because it has outlived it usefulness and is not mobile friendly.
You might want to consider a different navigation approach such as a jQuery Mega Menu.
5 Best jQuery CSS3 Navigational Mega Menus | Jaspreet Chahal
Nancy O.

IE problems with vertical spry menu bar

Similar Messages

Maybe you are looking for