Spry Horizontal Menu not working in Safari 3.1.1

Issue 1)
Menu works fine until you get to the subdirectories, then
when you click on a button it takes you to the error redirect page
(which is having problems of its own). Menu works in FF and IE6.
Haven't tested IE7 but hoping for the best. I made the links
absolute paths, so that's not the problem. Any insight?? This is a
definite show stopper.
Here's a link:
http://www.ghirardocpa.com/services/services.html
Issue 2)
In IE 6, the first two buttons have grey text, not black like
the rest of them. Weird.
Thanks!

Problem fixed. I rebuilt menu on testsite and compared Sprymenubarhorizontal.css and made a few changes. Thanks.

Similar Messages

Spry horizontal menu- not showing in some browsers

my spry horizontal menu is showing up as a vertical list in
some of our viewers computers. can i adjust the basic html so that
if spry does not show up on someone's computer, a more basic
horizontal table will show?

Thank you all for the answers.
Can pop menu magic work with image maps?
Back in the day I created several drop down menus in Dreamweaver CS2 by adding behaviors to image maps. I liked that I pretty much could drop a menu from any point on an image.
Example: http://www.bettendorfdental.com/
So I have been going back to my old laptop and CS2 every time I needed to change something in these menus, but that was very inefficient.
My client wants the top banner to be in one image, with customized buttons that share the background of the logo and business name.
I have been customizing the topaz template in pop up magic but what the client reallly wants is to have the tab images as part of the larger image. So ideally there wouldn't be any text in the top menu and only the drop down part would show up.
http://www.monicagraphicdesign.com/Bill/spiritual.html
For people like me, who do not write or understand code, even searching a knowledge base can be a challenge because we do no know what to type in the search box! I am glad to learn Project Seven offers one on one support.
Another challenge is that the client manages his own site and uses Front Page on a PC (and I have neither) so I don't even know if he can attach the stylesheets to every page where he inserts the menu.

Spry Horizontal Menu not displayed correctly in Internet Explorer 6

Hello to everyone. I'm creating a website using David's tutorial. My Spry Horizontal Menu is correctly shown in Dreamweaver Live View, Firefox10 but not in IE6. It happears at the bottom of the page. Any advise? Thanks much in advance. Cecilia

Hello Cecilia,
please have a look here: http://gs.statcounter.com/#browser_version-ww-monthly-201201-201202-bar where you can see that this browser (IE6 ) is no longer in use and might not be used anywhere anymore.
And so you should not worry about this. But if it does please send a link to your website in question.
... and what's about the newer IE?
Hans-Günter

Spry Horizontal Menu not showing up in IE

I created a spry drop down menu (horizontal) with Dreamweaver CS5.
It displays great in all browsers, except for Internet Explorer, where the menu is not visible at all.
http://www.monicagraphicdesign.com/Bill/spiritual.html
I read on other threads about similar issues (problems with IE) that spry is no longer supported by Adobe, but that it still is part of CS6. (?)
Can these issues with IE be resolved? Or...
Should I be looking into other software or plug-ins for Dreamweaver? If so, what would be the best choice for someone who is not a programmer?
I use a Mac.
Thanks.
Moni

Thank you all for the answers.
Can pop menu magic work with image maps?
Back in the day I created several drop down menus in Dreamweaver CS2 by adding behaviors to image maps. I liked that I pretty much could drop a menu from any point on an image.
Example: http://www.bettendorfdental.com/
So I have been going back to my old laptop and CS2 every time I needed to change something in these menus, but that was very inefficient.
My client wants the top banner to be in one image, with customized buttons that share the background of the logo and business name.
I have been customizing the topaz template in pop up magic but what the client reallly wants is to have the tab images as part of the larger image. So ideally there wouldn't be any text in the top menu and only the drop down part would show up.
http://www.monicagraphicdesign.com/Bill/spiritual.html
For people like me, who do not write or understand code, even searching a knowledge base can be a challenge because we do no know what to type in the search box! I am glad to learn Project Seven offers one on one support.
Another challenge is that the client manages his own site and uses Front Page on a PC (and I have neither) so I don't even know if he can attach the stylesheets to every page where he inserts the menu.

Spry vertical menu not working

I posted this before and still haven't solved so I am going to try again. .
My Vertical Spry menu bar won't show the submenu items in ANY browser. I have tried completely deleting everything involved with that menu and starting over and still can't get it to work (it did at one time so I'm not sure what has happened to it) BTW, when I view it in DW Live view it looks fine, but once I upload, it won't work. I also have horizonal spry menu and it works fine.
Here is my menu:
<ul id="MenuBar3" class="MenuBarVertical">
     <li><a title="sports">Sports</a>
    <ul>
      <li><a href="../Parks/youthrec.html">Youth Sports</a></li>
      <li><a href="../Parks/adultrec.html">Adult Sports</a></li>
      <li><a href="../Parks/tennisladder.html">Tennis Ladder</a></li>
      </ul>
    </li>
<li> <a href="../Parks/communityevents.html">Events</a></li>
<li><a href="../Document_Center/Parks/Scholarship_info.pdf">MPRD Scholarship</a></li>
<li> <a href="../Parks/facilities.html">Facilities</a></li>
<li> <a href="aquaticcenter.html">Aquatic Center</a>        </li>
<li> <a href="althleticcomplex.html">Athletic Complex</a></li>
<li><a title="Parks">Parks</a>
    <ul>
<li> <a href="rothwellpark.html">Rothwell Park</a>
    <ul>
<li> <a href="../Parks/campground.html">Campground</a></li>
<li><a href="../Parks/dogpark.html">Dog Park</a></li>
<li> <a href="../Parks/lake.html">Lakes</a></li>
<li> <a href="../Document_Center/Parks/Rothwell_Park_Map_2009.pdf">Map of Rothwell Park</a></li>
<li> <a href="../Parks/skatepark.html">Skate Park</a></li>
<li> <a href="../Parks/minitrain.html">Miniature Train</a></li>
<li> <a href="../Parks/candycanecity.html">Candy Cane City</a></li>
<li><a href="../Parks/discgolf.html">Disc Golf</a></li>
<li><a href="../Parks/War Memorials.html">War Memorial</a></li>
      </ul>
    </li>
      <li> <a href="areaparks.html">Other Area Parks</a></li></ul></li>
<li><a href="../Projects/Parks.html">Parks & Recreation Projects</a></li>
<li> <a href="../Parks/scrapbook.html">Scrapbook</a> </li>
<li><a href="../Parks/parksboard.html">Park Board</a></li>
<li> <a href="../Parks/parksstaff.html">Staff Directory</a>
    <ul>
      <li><a href="../Parks/parksdirector.html">Director's Message</a></li>
</ul>
    </li>
<li><a href="../Parks/tennisladder.html">Tennis Ladder</a></li>
<li><a href="../Parks/tickets.html">Ticket Consignment</a></li>
<li> <a href="../Parks/employment.html">Employment</a> </li>
<li><a href="../Parks/parksvolunteers.html">Volunteer/Donate</a></li>
</ul>
Here is my css file:
@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
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 9em;
    margin-top: 10px;
    margin-left: 20px;
/* 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: 9em;
/* 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: 9em;
    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: 9em;
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: #FFF;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size:12px;
/* 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: #fff;
    color: #999;
/* 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: #fff;
    color: #999;
ul.MenuBarVertical li
    display: block;
    cursor: pointer;
    background-color: #FFF;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size:12px;
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-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;
    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;
If anyone has ANY ideas I would love to hear them! As I said, at one time it worked great, now I can't get the submenu's to work.

Spry Menus 10 Commandments
http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php
Fixing Spry Menus 1.6.1
http://www.projectseven.com/testing/adobe-bugs/spry-menus/
Personally, I don't use Spry menus. I think you could find a much better menu system from any of the links below.
    Pop-Menu Magic2 by PVII (DW extension purchase)
    http://www.projectseven.com/products/menusystems/pmm2/index.htm
    jQuery Superfish
    http://users.tpg.com.au/j_birch/plugins/superfish/
    jQuery Mega Menus
    http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
    CSS3 Dropdown Menus
    http://www.red-team-design.com/css3-dropdown-menu
    10 Responsive Menus
    http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Horizontal Menu Bar works when index.html is appended to url, but not otherwise

My spry horizontal menu bar works like I want when I put /index.html at the end of the url for my website, but when I just go to the website without typing that in the index page shows up fine, but some of the links in the menu don't work. How is that possible if the index page is what shows up when you put in the usual www.domain.com?

You're fine; don't worry about how you sound!
I did not get two different pages when I went for your ...tennis.com address vs. your ...tennis.com/index.html address. Were you looking at the pages locally (preview in a browser) or looking at them on your website?
If your local site contains the files you want to have on the server, synchronize your files [entire local site] (on the files panel, the 'recycle' symbol) to see which files are different, remote from local. Then upload (being sure to include associated files).
The basic reason for a Spry menu bar not working is if the javascript and the menubar css file are not accessible or not linked to the page. The other reason would be if Javascript is turned off (but you said it worked with one file...) or if the javascript code at the bottom of the page is somehow either not there or broken:
<script type="text/javascript">

</script>
Well, I've been pretty long-winded about this. I hope you have been able to sort out the difficulty!
Beth

Spry Horizontal Menu Bar not working in IE

Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.com

Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@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: 0px;
    padding: 0px;
    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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 14em;
    float: left;
    border-color: white;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: none;
    border-right-width: 1px;
/* 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: 14em;
    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: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 99%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.9em 0.75em;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
    color: white;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    color: #FFF;
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: 10px 85%;
/* 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
    b/ackground-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 10px 85%;
/* 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
    b/ackground-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;
        float: left;
     /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know.

Spry Horizontal Menu problem in Safari Mac/Windows

Hello!
Has anyone run into a problem using a horizontal spry menu and it showing up corectly in Safari? The menu is centered but I cannot get the table to center underneath. I then wrapped the table in a div and center aligned it, after addeding a <br/> (just trying stuff to no avail.)
Here is a link to a site I am working on.
http://tesibridal.com/NEW/index.html
So far I have found it does not work in Safari 3.2.1/Mac & Safari 3.2.2 and gives me a whole new set of spacing problems in Explorer (which I will address all of those next).
Thank you in advance for your time.
~TMC
P.S. - Here is the CSS for the menu:
@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
padding: 0;
list-style-type: none;
cursor: default;
width: 55em;
margin: 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: 11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#000000;
    background-color:#FF0000;
    text-align:center;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    color:#000000;
    background-color:#FF0000;
    text-align:center;
    z-index: 1020;
    cursor: default;
    width: 10.1em;
    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: 10.1em;
/* 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:#000000;
    border-style:solid;
    border-width:1px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #FF0000;
    color: #000000;
    text-decoration: none;
    border:#000000;
    border-style:solid;
    border-width:1px;
    padding-top: 1em;
    padding-right: 0em;
    padding-bottom: 1em;
    padding-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #FF0000;
    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: #FF0000;
    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;
/* 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: #FF0000;
Message was edited by: TMCDesign
Message was edited by: TMCDesign

Hi clead16,
What do you mean by "do not load properly in internet
explorer"? I checked the site in IE6 and IE7 and it the menus
render OK.
You may want to also take a look at the
Menu
Samples and
centering
a horizontal menu
on Adobe labs.
-- Florin

Spry horizontal menu's not displaying right in IE9

Presently I'm using Dreamweaver CS4. I have built a web site and placed a horizontal spry menu at the top of the web page. It is situated on the page just below a smaller non-spry horizontal menu.    In IE9, the menu appears above and to the right of this smaller menu rather than in the location I want it to appear. What's more, in Dreamweaver the menu seems to float the upper right of the screen (I've attached a screen shot).   When I review the web site in IE 7, Firefox, Chrome, Opera, and Safari, the menu is correctly placed.
Can anyone help solve this issue? When I view the web page in IE9 and put it into IE7 mode, all is well. Not so in IE9 (or IE8 for that matter).
I'd appreciate direct email as well as answering it here to help others with my quandry. My direct email address:   [email protected].
Thank you!
This image shows you where the menu appears in Dreamweaver AND in IE9
This image shows you where the menu correctly displays in IE 7 (standard mode), Chrome, Firefox, Opera, and Safari.
The smaller navigation you see "Subscribe to Alerts" etc is controlled by the following code:
#secondarynav {
width: 475px;
margin: 0px 0px 0px 0px;
padding: 0px;
float: right;
/* height:20px; */
The entire page including these menus sits in a container (My Code):
#container {
width: 930px;
height:800px; /* changed from 775px */
margin: 0 auto;
border:1pt solid #c7a9a9;
background-color: #FFFFFF; /* added by WDM, 6/5/2012 to keep container white while page body is gray */
Control for Menu Bar: (My code)
#menubar1 ul{
          z-index:5000;
          margin:40px 20px 0px 0px;
LAYOUT INFORMATION: describes box model, positioning, z-order (Dreamweaver Code)
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
/* margin: 0; */
    margin:-45px 0px 0px 200px;
    padding: 0;
    list-style-type: none;
    font-size: 10pt; /* change from 100%, 12pt */
    cursor: default;
    width: auto;
    float:left;
          z-index: 5000;
/* 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: 9pt; /* change from 100%, 12pt */
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 15em; /* change from 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: 10pt;   /* change from 100%, 12pt */
    z-index: 1020;
    cursor: default;
    width: 13.0em;   /* change from 8.2em/14.2 */
    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: 14.2em;   /* change from 8.2em/14.2 */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 170px; /* change from -5% 0 0 80%; */
/* 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;

I'm not sure where you attached files (I have not seen a way to do that in the Forum), But I will try to speak generally and work with what you have posted.
My suspicion is that the negative top margin you have applied is messing things up a bit.
I also note that it is usually better to apply margins to a CONTAINER of an unordered list (which is what menus are made of), than to apply the margins to the ul itself. So, restore the margin: 0; to the ul.MenuBarHorizontal style selector and create an enclosing element that bears the margin:-45px 0px 0px 200px; though I would still reconsider the use of negative top margin.
It is entirely possible that this simple change will help.
Please post the HTML for the top of the <body> section, including the menu code.
Beth

Spry Horizontal Menu Bar width problem in IE and Safari

Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

My Spry Horizontal Menu doesn't work

I created my Spry horizontal menu and tried it in preview browser and it doesn't work. I published the site to see if it check didn't work in preview mode and it REALLY doesn't work.
I'm sure it's something simple that I am just missing, but what I don't know. I have attached the css style sheet as I did change the spacing and colors.
Is it something I could be missing on the individual pages and linking there?
I apologize for being dumb, but I am a newbie to this and the tutorials I took don't go into detail about linking other than to explain the linking from your index page. Is there more linking that I need to do?
Here is the menu and I did place it in it's own div tag.
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Home</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Bar Code Products</a>
      <ul>
        <li><a href="#" class="MenuBarItemSubmenu">Bar Code Scanners</a>
          <ul>
            <li><a href="scanGen.html">General Purpose</a></li>
            <li><a href="scanInd.html">Industrial</a></li>
          </ul>
        </li>
        <li><a href="software.html">Bar Code Software</a></li>
        <li><a href="verifier.html">Bar Code Verifiers</a></li>
        <li><a href="media.html">Media Supplies</a></li>
        <li><a href="printer.html">Printers</a></li>
        <li><a href="solution.html">Software Solutions</a></li>
      </ul>
    </li>
    <li><a href="consult.html">Consulting</a></li>
    <li><a href="contact.html">Contacts</a></li>
    </ul>
I thought that was all there was to it.
What am I missing. I can link to one page, but have to click on the back button to view any other page and keep repeating that process to view all the pages.
Boy do I feel stupid.
Any help would be appreciated. Needless to say I republished my friends old site because of functionality. But I'd really like to get this one working for him.
Thanks in advance.
Oops

NEVER MIND. What an idiot. I never copied the linked menu bar into the other pages. My stupid.
Thanks and sorry to waste your time.

Spry horizontal menu - IE6 issue with drop downs not displaying correctly

Hello everyone,
I have an IE6 display issue with a spry horizontal menu on a website I recently developed and hope someone can help me sort it out.
You can see the live site here: www.callumstrust.org
This is a site for a new charity so obviously I'm very keen to get it sorted out as soon as I can. The easiest way to view the problem is to either view it in IE6, or view it IE8, turn on the Developer Tools and change the Document Mode to 'Quirks mode'. you'll immediately see that the sub-menus on the header menu display permanently as a full width list, and not as a drop down menu as they should.
I think the problem lies with the 'width' being set to 'auto' in the ul.MenuBarHorizontal li style. However, I can't seem to get the style right to display the menu on a single line with enough space for text of all the menu items.
Can anyone advise on how to sort this out? I've not posted any code here: let me know if you need this and I'll happily post it.
Many thanks,
chris.

Hello everyone,
I have an IE6 display issue with a spry horizontal menu on a website I recently developed and hope someone can help me sort it out.
You can see the live site here: www.callumstrust.org
This is a site for a new charity so obviously I'm very keen to get it sorted out as soon as I can. The easiest way to view the problem is to either view it in IE6, or view it IE8, turn on the Developer Tools and change the Document Mode to 'Quirks mode'. you'll immediately see that the sub-menus on the header menu display permanently as a full width list, and not as a drop down menu as they should.
I think the problem lies with the 'width' being set to 'auto' in the ul.MenuBarHorizontal li style. However, I can't seem to get the style right to display the menu on a single line with enough space for text of all the menu items.
Can anyone advise on how to sort this out? I've not posted any code here: let me know if you need this and I'll happily post it.
Many thanks,
chris.

Spry Horizontal Menu causing site not to load using Firefox and Maverick OSX 10.9.2

Why does Spry Horizontal Menu cause site not to load using Firefox and Maverick OSX 10.9.2?

Your code is terribly malformed.
There are multiple body tags & erroneous tags that overlap your <head> and other content tags. Get those fixed first.
And you also have more than 1 doctype definition in the wrong place.
If my assumption is correct, I think each include file you're using has its own doctype, body, html & head definitions causing final PHP to render all these on your output page.
Run your site through W3 validator like Jon suggested earlier: [Invalid] Markup Validation of http://www.ambppct.org/ - W3C Markup Validator
Fix those and you should be good.

Spry horizontal menu perfect on Mac, screwy on PC

I created a Spry Horizontal menu for http://www.ljwdesign.com/clients/TotalFab.
The only edit I made to http://www.ljwdesign.com/clients/TotalFab/SpryAssets/SpryMenuBarHorizontal.css was to add the positioning of the <div> container that holds the menu. You'll see it as the first thing in the CSS document. I left the rest of the code exactly the way Dreamweaver created it.
My main CSS file is http://www.ljwdesign.com/clients/TotalFab/css/mainstyle.css but there is nothing in that file that styles the Spry menu.
In Firefox and Safari on my Mac, it works EXACTLY as expected - exactly how I want it to work.
In IE 6, forget it - doesn't work, but I don't care at the moment.
In IE 7, the drop-downs won't go past the bottom of the table cell the menu is in. Also, once you mouseover then mouseout of any of the top level menu items (there are three), the text for the other two disappears until you mouseover them again.
In Chrome and Firefox, the menus drop just fine and the text stays visible, but the longest of the three drop-downs (the gallery) disappears behind the Flash object below the menu. This does not happen in any Mac browsers.
I've tried playing with z-index everywhere, but nothing helps. I even increased the z-indexes in the Spry CSS file to 9999; didn't make a darn bit of difference.
If anyone knows how to fix this, I'd really appreciate the heads up. Until I get this working in all the above-mentioned IE browsers, I don't dare touch the CSS code to make it match the rest of the site stylistically. Thanks!
Lynda Williams
LJWDesign.com

There's been a recent post and solution to menus that drop below Flash, just in the last two days.
I'll see if I can find it for you. Here it is: http://forums.adobe.com/message/261033#261033
Beth

Spry Horizontal Menu Bar in IE

Hello,
I had looked at the forums for a possible solution to this, and none of the answers I have found work for me. I have a spry horizontal menu bar with a background image. It works in Safari, Chrome, and Firefox but on IE the background image does not show. There is only a white background. I have changed ul.MenuBarHorizontal li.MenuBarItemIE to have a background image but it still doesn't show in IE.
This is the website: fwmedpeds.net
I am very new to this and any help is appreciated.

If you go to your online SpryMenuBarHorizontal.css which can be found here http://fwmedpeds.net/SpryAssets/SpryMenuBarHorizontal.css, you will see the last few lines as I have previously quoted.
You will also see what Ken Binney has said
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
/* 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: #000;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
font-weight: bold;
Gramps

Spry Horizontal Menu not working in Safari 3.1.1

Similar Messages

Maybe you are looking for