Spry menu problem - extra border

I have used a spry menu bar vertical on my site. When the
menu opens to the right upon rollover all links are there, however,
there appears to be an extra border or box behind the pop out menu.
I can email a screen shot of what it is doing. I appreciate any
help!!!

Well, you are changing the right style selector.
I suggest you use the vertical image element as a background image in the menu items themselves, then they will be harmoniously positioned with the menu.
You can give each menu item its own width (in the stylesheet), if you need to, but for heaven's sake, get rid of those huge padding measurements. Pad enough on the right to disclose the vertical image, but try centering the text in each button instead of using padding to move it around.
Beth

Similar Messages

Spry menu problem - CS6 Dreamweaver

I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.

Also validate the rest of the code in your pages to see if you have any critical errors that need fixing. For example, a missing doc type declaration might explain Spry failures.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices. If you can't get satisfaction with Spry, try jQuery Superfish. It's a better menu system.
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O.

Spry Menu with submenu border?

Hi Everyone,
I'm a bit of a newbie, and I am designing a website with a spry menu (which I have since found out probably wasn't the best way to go) and I have hit a hurdle which I can't fix or find the solution to anywhere. I'm hoping it might be easy for you guys.
I have attached a pic of the problem, one menu item has a submenu, this is the 'About' menu, as you can see, it has a border top and bottom that I can't seem to find in the code in order to get rid of it. If anyone could let me know how to fix this I'll be extremely grateful!
Also, any suggestions of better menu methods would be appreciated.
Have a nice day
Spry CSS below:
@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
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 100%;
    float: none;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 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 KN: width changed to auto */
ul.MenuBarHorizontal li
    margin: 0;
    list-style-type: none;
    font-size: 18px;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bolder;
    text-transform: uppercase;
    padding: 0;
/* 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
    float:none;
/* 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. KN: I removed the border radius prior to this it was border-radius: 5px 5px 0px 0px;*/
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding-left: 1.1em;
    padding-right: 1.1em;
    padding-top: 1em;
    padding-bottom: 1em;
    text-decoration: none;
    color: #009007;
    border-bottom: 2px;
    border-right: 0.3px #333333;
    border-bottom-color: rgb(51,51,51);
    background-image: url(../Images/spry-menu%20chrome.jpg);
    background-position: right;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #333;
    background-image: url(../Images/spry-menu-chrome-hover.jpg);
/* 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-image: url(../Images/spry-menu-chrome-hover.jpg);
    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.MenuBarHorizontal a.MenuBarItemSubmenu
    background-repeat: no-repeat;
    background-position: 95% 50%;
    color: rgb(0,141,7);
    background-image: url(../Images/spry-menu%20chrome.jpg);
/* 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%;
    background-color: rgb(3,139,7);
/* 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-position: 95% 50%;
    background-image: url(../Images/spry-menu-chrome-hover.jpg);
    color: #333;
/* 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-position: 95% 50%;
    background-image: url(../Images/spry-menu-chrome-hover.jpg);
    color: #333;
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;
        float: left;
        background: #FFF;

Hi Gramps,
Here is the site:
http://www.wordartist.com/mythicharacters
If you hover on "Sacred Arts", you'll see the behavior.
Thanks for taking a look at this,
Phlange98

Spry menu problems. Please help.

Hello,
I am new to web design so please try and be patient with me .
I am trying to create a horizontal spry menu bar into a new page. Even though I select horizontal, the menu is vertical. I have read through many previous posts and FAQ'q, but cannot find the answer. It is not just in IE, it is in every browser and dreamweaver itself. I am using 5.5.
UPDATE-- If I create the spry into a new blank HTML document, it works just fine. So I imagine it is something to do with the template?
Heres the code:
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
          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: none;
/* 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;
ul.MenuBarHorizontal {
          width:8em;
          margin: auto;
And this is the HTML for the menu bar when insterted into a page:
InstanceBeginEditable name="Header" -->
            <div class="Header">
              <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>
            
Thank you for any and all help!
Nick

Ok so I decided to make a nice menu through fireworks.
This confuses me even further, how did you make a SpryMenuBar through FW?
It now works, but the links to the drop down menu are not horizontal in the drop down menu.
So it doesn't work
And this is only when trying to enter it into the template, into a new HTML it works fine..So it does work
Unforuntely I cannot post the website
Well, our worries are over, there is no need to correct the problem, no one will ever see the website.
Yes, I am being facetious.
In all seriousness, you can upload the website to a temporary location. This way we will be able help you.
Have a happy New Year!
Gramps

Dreamweaver Vertical Spry Menu Problem in IE7

I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@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: 0.8em;
cursor: default;
width: 150px;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* 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;
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
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
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: #FFFFFF;
color: #333;
/* 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: #FFFFFF;
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(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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;

I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@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: 0.8em;
cursor: default;
width: 150px;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* 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;
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
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
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: #FFFFFF;
color: #333;
/* 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: #FFFFFF;
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(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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;

Dreamweaver CS5 Spry Menu problem;

Hi, I'm doing a web-site project for my Web Design class, and I ran into a problem. In Dreamweaver my spry menu only shows one part of the menu, but when I go to preview it, its perfectly normal. When I turned it into my teacher he sees the spry menu just like the one in Pic 2. I can't really upload it to a public domain/website because I can't at school. The way we see websites is by transfering folders into the teachers folders and click the index.html. Is there any way to fix this?
Code if needed:
<!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" />
<title>Kelsey's Page</title>
<style type="text/css">
body {
background-color: #EBF2FE;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td align="center"> </td>
</tr>
<tr>
    <td align="center"><img src="asdasdawe.jpg" width="907" height="331" /></td>
</tr>
<tr>
    <td width="100" align="center"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.htm">Home</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Portfolio</a>
        <ul>
          <li><a href="enterport1.html">Personal</a>            </li>
          <li><a href="enterport2.html">New PRHS</a>            </li>
          <li><a href="enterport3.html">Performance</a>            </li>
          <li><a href="enterport4.html">Teacher</a>            </li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Schedule</a>
        <ul>
          <li><a href="enterweb.html">Web Design</a>            </li>
          <li><a href="enterani.html">Animation</a></li>
          <li><a href="enterlatin.html">Latin 4</a></li>
          <li><a href="enterapush.html">APUSH</a></li>
        </ul>
      </li>
      <li><a href="derp.htm">Derp</a></li>
    </ul></td>
</tr>
<tr>
    <td align="center"> </td>
</tr>
<tr>
    <td> </td>
</tr>
<tr>
    <td><img src="bigpic2.jpg" width="910" height="510" /></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

We can't view or "fix" your teacher's folder.
Why not be a rebel, find yourself some free hosting,
upload all your files and post a link for us.

Spry menu bar extra space

I have put a spry menu bar into Dreamweaver and everything is working except there is a small space on the left of the submenus inside the submenu border.It's kind of hard to see because everything is blue, but if you look closely you can see it.
I have played around with the css (and probably messed a few things up along the way), but I cannot seem to get rid of this space.
Screen shot and css below:
@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
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
margin-left: 3%;
/* 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: 8em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
/* 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: 0px;
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;
color: #FFF;
text-decoration: none;
background-color: #173362;
/* 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: #BCC5C2;
color: #000;
/* 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: #173362;
color: #FF0;
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
/* 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;
/* 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;
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;

Yes, I noticed the left margin after I had posted the reply. I guess I am doing my name proud with old age setting in.
I left the document and the CSS file as you had it and added the following style rules to correct the situation.
You can choose
add these to your document after the link to SpryMenuBarHorizontal.css
add these to the bottom of SpryMenuBarHorizontal.css
adjust the style rules within SpryMenuBarHorizontal.css to reflect the changes.
ul.MenuBarHorizontal li {
margin-left: 0;
ul.MenuBarHorizontal ul li {
width: 8.2em;
ul.MenuBarHorizontal ul ul {
     margin: -5% 0 0 95%;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
     left: auto;
ul.MenuBarHorizontal a {
     padding: 0.5em 2.75em;
The highlighted values in the last style rule can/must be adjusted to suit.
Gramps

Spry Menu problem with using a transparent background image

Hi- I'm new to CS5 and Dreamweaver. I just finished the beginning webpage tutorial and I have started to work on a personal project. The Problem: when I use a transparent png image as a backgroun-image for my spry menu it shows up fine in live view, but doesn't work in browser view (safari), in fact the menu reverts to it's original grey and blue boredom. Does anyone have a solution for me? Does this mean it will be grey and blue when it goes live? Thanks, Ruth333333

Please supply a link to your site.
Gramps

Spry menu problem with div

when I try to place a horz. spry menu into a div, it hops outside the container.

I went back to the thread but could not figure out how to respond.
The site was originally built using AP Divs (including a spry menu bar). It appeared that the new menu “hopped” because the absolute position was still within the code – is that possible?
I created a new spry asset folder and started over. As you can see, it’s in the div just fine, but the buttons (font size, hover, etc.) are all messed up and I can’t figure out how to fix the problem.
http://www.hoistco.com/test3.html
Thanks for your help.

Menu bar not displaying inline with logo (Spry menu troubles - Extra Credit!)

Coding Brothers and Sisters!
Hope you all are well - would anyone please assist me to display inline the logo and menu bar at the following page?
     http://gratefulcreative.com/Andre_Madiz/index.html
Superbonus, Adobe All-star points for help with my Spry Menu Bar, which is not showing submenus. I get an error message saying the following:
     This document contains Javascript code for a widget that no longer exists. If you don't remove the code, the browser might display Javascript errors when loading the page. Would you like Dreamweaver to find all the
     instances of the code for you?
     Widget: var Menu Bar 1 = New.Spry.Widget.MenuBar ("MenuBar1"; {imgdown:"SpryAssets/SpryMenuBarDownHover.gif",imgRight:"SpryAssets/SpryMenuBarRightHover .gif"});
Thank you as always!
Ken D
Creative Director
Grateful Creative
www.gratefulcreative.com

Use CSS floats. Posted here with inline styles for expediency. Ideally, you should set-up some re-usable classes for floats & clearing in your external style sheet.
<div style="float:left; width:250px">
<a href="http://www.andremadizmma.com"><img src="images/Bulldog_logo3.png" border="0"></a>
</div>
More on Floats:
http://css.maxdesign.com.au/floatutorial/
(='.'=)
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Spry menu problems in IE

I recently changed my menu on my site to be a spry menu. My problem is that in IE the menu messes up after the drop down menu. Everything after the drop down moves underneath the menu bar and changes to just hyperlinked text. The menu works fine in all other browsers, The site is corinth-baptist.net any help would be greatly appreciated!!

Your markup is screwed up. Compare yours with the following
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">About Us</a>
    <ul>
      <li><a href="about us.html">About Us</a>
      <li><a href="calendar.html">Calendar</a></li>
      <li><a href="bus ministry.html">Bus Ministry</a></li>
      <li><a href="subscribe.html">Newsletter</a></li>
    </ul>
</li>
<li><a href="directions.html">Directions</a>
<li><a href="sermons.html">Sermons</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
Gramps

Spry menu problem suggestions?

My horizontal spray menu on my website at www.goodimage.com under images/kids or images/pets shows kids and pets on same line. This appears correct when looking at the source layout, the live view layout but when put on my site it looks bad with both kids and pets on the same menu line.
Any suggestions? HLower

There are a few problems with the main stylesheet - and in the spry menu stylesheet:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. goodimage.com%2F
When you moved the css from the head of the document you also included the style tags: The code in red should be removed from the mygoodimage.css.
<style type="text/css">
all the styles here
</style>
ALSO:
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #;        <--------------------   an empty selector here. you need to specifiy a color or remove the it altogether.
SPRY MENU STYLESHEET:
the IE Hack comment isn't closed - you need to add the bit in red to close off the comment - and the menu should work correctly in IE.
/* 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;
    width: auto;
    background-image: url(../images/background_slate.gif);
PS: Some of these errors could also contribute to the template problem... I've a template not work correctly due to errors either in the html or the css, so if you fix these and see how you go with the menu and then try the template again.

CSS - Spry Menu Problem

Hello everyone!
I am having a tricky question, I need your help with!
I want to insert a spry menu into my webpage. I want the colors of the menu and sub menu to change when I hover over them depending on how many sub menus exist.
All in all I have at most two submenus.
That means, I need to assign three colors. One for the menu without submenu, one for the menu with one submenu, and a third for the menu with 3 submenus.
So far it is working with two colors.
Who could help me?
Heartly regards!
This is what I got:
@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: 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: 8.2em;
    left: -1000em;
    top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: ##FFFFFF;
    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: #0FF;
    color: z;
/* 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: #0FF;
    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%;
    background-color: #F0F;
    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.MenuBarItemSUBSubmenu
    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.MenuBarItemSUBSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #FF0;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

As is the case with any styling, all you need is an identifyer to apply style rules to it.
Hence, if you want to change the colour of a main menu item housing two sub-menu items, simply add a class name as in
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical a.three-subs {
    background-color: yellow;
ul.MenuBarVertical a.two-subs {
    background-color: red;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu three-subs" 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 two-subs" 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 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Spry menu problems

When inserting spry accordion and spry collapsible menus from
dreamweaver cs3 in a blank html page i get a javascript error and
continue to get them making the use of these spry menus unworkable.
The error says" While executing inspectSelection in
spry_accordion.htm, a Javascript error occured." Does anyone know
of a fix to this problem?

Hi Lucaandluna,
Well the website page I have linked was done in Dreamweaver
MX (think thats version 8) and I used the Pop Up Menu behaviour in
that program. Its a great little tool and you can change the sub
menu text and box size and much more. BUT I can not easily copy
this to other pages as when I do copy it looses all the information
on the Drop down menu. Thus for every page on my website I have to
change each Drop Down menu by hand which is a very time consuming
process. Thus I want to use a CSS menu system so I only have to
updage the Drop Down menu once for the whole site.
So I have the same problem with the sub menu text, I can't
seem to figure out how to make the colour different from the main
menu. For the look of my Spry Menu I have been altering the Spry
CSS file. IF you don't want thos little arrows then look in the CSS
file for something called Submenu Indication. There you will find
the Gif files for the arrows, delete the ones u don't want.

Another spry menu problem with ie

I dont know, but i have tried everything to getie to render the spry menu for my site : http://www.jtltours.com/proofing/, but no luch to date. As you may have seen , it works perfectly with firefox and chrome, but no luch for ie. It does'nt even seem to be rendering any css for the menu. Any help in the right direction is appreciated.

Are you sure the issue is created by Spry? I have check out the source and there seems to be allooot of JavaScript includes. Which could potentially generate IE errors them selfs and make Spry MenuBars stop working.
I haven't got IE on my machine so I can't verify it. But it might be worth looking at.

Spry menu problem - extra border

Similar Messages

Maybe you are looking for