Menu Bar SubMenu position issue

Hi,
I have an horizontal menu on my site which works, but I'm
starting a new version of the site and there my submenus display in
a weird position (in IE only) and with a transparent background.
I read about the z-index bug, but couldn't find or understand
the solution.
I would appreciate if someone could have a look and help me:
Current version with the menu bar working fine:
http://www.thebaysoccer.com
Test page of the new version where my problem appears:
http://www.thebaysoccer.com/new%20tbs/test.html
Thanks!

Hello,
The trouble is the fact that IE applies text-align:center to
more things
than just text.
You applied it to the li CSS. This not only centers the text
in IE, but also
the <ul> (which are your submenus) within these
<li>.
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
position: relative;
text-align: center; <********
cursor: pointer;
width: auto;
float: left;
white-space: nowrap;
You also have it in the ul.MenuBarHorizontal style.
So, in IE the left edge of the <ul> (submenu) is
aligning with the center of
the <li> it is contained in.
That's why the sub menu drops down with the left edge at the
middle of the
main nav "button".
Remove those "text-align:center" rules.
To center your menu text, apply text-align:center to the link
style instead,
like so:
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #333;
padding: 0.5em 0.75em;
color: #EEE;
text-decoration: none;
text-align: center;
As far as the submenu background, notice "fixed width" in the
comment line
above the following rule in the spry CSS.
You had yours set to auto.
Try this:
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
background-color: transparent;
Take care,
Tim
"Tilt_Paris" <[email protected]> wrote in
message
news:fvda4t$4pa$[email protected]..
> Hi,
>
> I have an horizontal menu on my site which works, but
I'm starting a new
> version of the site and there my submenus display in a
weird position (in
> IE
> only) and with a transparent background.
>
> I read about the z-index bug, but couldn't find or
understand the
> solution.
>
> I would appreciate if someone could have a look and help
me:
>
> Current version with the menu bar working fine:
>
http://www.thebaysoccer.com
>
> Test page of the new version where my problem appears:
>
http://www.thebaysoccer.com/new%20tbs/test.html
>
> Thanks!
>

Similar Messages

Spry Horizontal Menu bar - submenu position

I'm new to spry so apologies in advance if this has been
posted before.......
I'm putting together a new site using the spry horizontal
menu bar - I've managed to put together a CSS format which works
well in both FireFox and IE7 EXCEPT for the position of the
sub-menus below the main menu bar. IE7 seems to position the sub
menu relative to the top right corner of the parent menu item.
Firefox seems to position it relative to the bottom left corner -
and I can't find a solution which works for both browsers. Any
ideas?

You must have fixed it in the meantime as I see no problem.
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

Spry Menu Bar Submenu won't show in Safari or Dreamweaver LiveView

I am trying to get my submenu to show up on my website's spry menu bar. It will show up when I test the site using firefox or IE but it won't show when I try LiveView in Dreamweaver or when I test using Safari. The site is www.fuseut.com/fuse
Here are is the CSS for the menubar:
@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: 125px;      float: left;      font-family: "MS Serif", "New York", serif;      overflow: visible; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      z-index: 50;      cursor: default;      width: 7em;      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: 7em; } /* 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: 0;      top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul {      border: 1px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      padding: 0.5em 0.75em;      color: #FFF;      text-decoration: none;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;      text-align: center;      background-image: url(../menubgdefault.png); } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      color: #FFF002;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /* 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: #FFF002;      text-decoration: underline;      font-weight: bold; } /******************************************************************************* 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%;      background-color: #999; } /* 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;      } }
And here is the HTML 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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FUSE UT</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
<meta name="Keywords" content="fuse ut utk university of tennessee tommy jervis avery howard ross rowland angie sessoms sga campaign elections" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menubarparent" style="z-index: 20; position: absolute; overflow: visible;">
<div id="menubar" style="z-index: 10;">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">FUSE</a>      </li>
    <li><a href="senators.html" class="MenuBarItemSubmenu">Senators</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li><li><a href="executive.html">Executive</a>      </li>
    <li><a href="policy.html">Policy</a></li>
    <li><a href="organizations.html">Organizations</a></li>
    <li><a href="bios.html" class="MenuBarItemSubmenu">Bios</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
</ul>
</div>
</div>
<p>
<p>
<div id="apDiv1">
    <div id="apDiv4"></div>
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="265" wmode="transparent">
      <param name="movie" value="Components/CandidatesHomeSlideshow.swf" />
      <param name="quality" value="high" />
       <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="Components/CandidatesHomeSlideshow.swf" width="550" height="265" wmode="transparent">
        
        <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object><div id="HomeEvents">
      <p> </p>
      <p> </p>
      <div id="EventsXML">
        <div spry:region="event2">
          <dl spry:repeatchildren="event2">
            <dt>{date}</dt>
            <dd>{title}</dd>
            <dd>{location}</dd>
          </dl>
        </div>
      </div>
    </div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Sorry if it's something really basic...I'm a noob to web design.
Thanks!

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Spry menu bar 2 IE9 issue

Hi,
I have a slight problem with a spry menu bar when viewed in IE9beta, when you hover over a menu item the hover background does not always complety fill the area immediately, eventualy it does. This problem only affects IE9beta, I have tested it in the latest versions of safari, opera, firefox, and chrome.
Any help with this would be appreciated,
Richard.
You can view the menu at www.eandhbaxendale.com and I have included the css and widget script below
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #BaxMenuBar
var BaxMenuBar = new Spry.Widget.MenuBar2("#BaxMenuBar", {
      widgetID: "BaxMenuBar",
   widgetClass: "MenuBar BaxMenuBarFixedLeft",
   insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
/*menu bar start*/
#BaxMenuBar {
background-color:#000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
font-style: normal;
padding:0;
border: #fff solid 1px;
.MenuBar br {
display:none;
.BaxMenuBarLeftShrink {
float: left;
width: auto;
.BaxMenuBarRightShrink {
float: right;
width: auto;
.BaxMenuBarFixedLeft {
float: left;
width: 882px;
.BaxMenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.BaxMenuBarFixedCentered br {
clear:both;
display:block;
.BaxMenuBarFixedCentered .SubMenu br {
display:none;
.BaxMenuBarFullwidth {
float: left;
width: 100%;
#BaxMenuBar .MenuItemContainer {
padding: 0px;
margin: 0;
#BaxMenuBar .MenuItem {
padding: 0px 14px 0px 0px;
background-color:#000000;
border-width:1px;
border-color: #fff;
border-style: none solid none none;
#BaxMenuBar .MenuItemFirst {
border-style: none solid none none;
#BaxMenuBar .MenuItemLast {
border-style: none solid none none;
#BaxMenuBar .MenuItem .MenuItemLabel {
text-align:center;
line-height:1.4em;
color:#fff;
background-color:#000;
padding: 6px 15px 6px 29px;
width: 10em;
width:auto;
.SpryIsIE6 #BaxMenuBar .MenuItem .MenuItemLabel {
width:1em;
#BaxMenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
font-style: normal;
background-color:#666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #fff;
border-style: solid solid none solid;
#BaxMenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#BaxMenuBar .SubMenu .MenuItemFirst .MenuItemLabel {
padding-top: 6px;
#BaxMenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#BaxMenuBar .SubMenu .MenuItemLast .MenuItemLabel {
padding-bottom: 6px;
#BaxMenuBar .SubMenu .MenuItem .MenuItemLabel {
text-align:left;
line-height:1em;
background-color:#666;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
#BaxMenuBar .MenuItemHover {
background-color: #666;
border-color: #fff;
#BaxMenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel {
background-color: #666;
color: #fff;
#BaxMenuBar .MenuItemHover .MenuItemLabel {
background-color: #666;
color: #fff;
#BaxMenuBar .SubMenu .MenuItemHover {
background-color: #999;
border-color: #fff;
#BaxMenuBar .SubMenu .MenuItemHover .MenuItemLabel {
background-color: #999;
color: #fff;
#BaxMenuBar .SubMenuVisible {
background-color: #666;
min-width:100%;
border: #fff 0px none;
#BaxMenuBar.MenuBar .SubMenuVisible {
top: 100%;
left:0px;
z-index:10;
#BaxMenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px;
#BaxMenuBar .MenuLevel1 .SubMenuVisible {
background-color: #666;
min-width:0px;
top: 0px;
left:100%;
.SpryIsIE6 #BaxMenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel {
background-color: #666;
color: #fff;
.SpryIsIE6 #BaxMenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel {
background-color: #999;
    color: #fff;
.SpryIsIE6 #BaxMenuBar .SubMenu .SubMenu {
margin-left: -0px;
/*menu bar end*/

I must have looked at it in another browser, sorry.
Had another look at it and indeed it may become an issue in IE9, but because IE9 is still in beta, anything can change.
Watch this space.
Gramps.
Oh, you could always add <meta http-equiv="X-UA-Compatible" content="IE=7" /> to your document.

Spry menu bar submenu disappears when cursor changes

Hello.
I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
Can anyone tell me how to prevent that from happening?

LICAP Webmaster wrote:
Can anyone tell me how to prevent that from happening?
Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
If you put your test page and all dependent files online, and post a link here, we will gladly check that:
    Your server is working
    That all required HTML code is correct
    That your folder hierarchy is correct
    That all required dependent files (HTML, CSS, JS, Images etc.) are uploaded to proper folders
    That Javascript Versions are correct
    That link paths are all correct and case sensitive
Sounds like your submenus may be positioned with a small gap from your top-level links

Menu bar accessibility severe issue

Dear support team
I am a visually impair person (20/100) vision. I am working as software architect since 27 years in the Windows and Linux world. A year ago I bought an AirPort and I fall in love with Apple product best quality: "Always work like a charm"!
So 5 months ago I decide to make the jump and I bought an iMac 27", i7, 16GB, 2TB. As expected, everything works wonderfully until I realize the terrible mistake Apple techies made regarding accessibility that even Microsoft fixes years ago.
The menu bar has NO descent support at all for accessibility.
Let me explain the four fold problem:
1) The font size cannot be adjusted, so I must memorize menu item position or stretch my neck to see what I am selecting.
2) Being 50 years old, I am wearing progressive lens, so only the bottom part of the lens are adjusted for reading, this implies that I shall stretch my neck even more to be able to see something on the menu bar.
3) I am from Quebec Canada, so I use both English and French languages. However, the "language icon" at the right end of the menu bar is so small that they look identical.
4) When you change the size of the mouse pointer, its positioning becomes offseted.
I am using the mouse zooming functionality to work around these problems, but believe me, this is far from being appropriate. Changing the resolution is no a solution too.
You have to realize that visually impair people are buying large screens with the believing that they will be able to adjust font / icon size so everything will work well and they will have good screen real-estate. Also don't forget that your earlier Apple adaptors are now over 40's and they wear progressive lens too.
Now how to fix the problem:
1) Use the same magnification effect on the menu bar as the one on the Dock.
2) Allow user to change the language icon or at least its colour.
3) Make the menu bar font size adjustable.
4) Allow the user to move the menu bar at the bottom of the screen.
5) Fix the mouse pointer offset issue, this is just a question of taking the mouse pointer size into account in the position calculation.
I perfectly understand that allowing the user to change the font size of the menu bar (which is the system font size) may have side effects, same for moving the menu bar at the bottom of the screen. However, there is NO excuse to not provide magnification effect on menu bar and language icon configuration.
Not providing these features are just like not providing access ramp to public buildings and saying: There is always someone passing by that will help the rare "cases" who have to deal with the situation. If it is not enough, in Quebec, it is forbidden to use very small fonts in legal documents!!!
This shall not be seen as a legal or business issue but rather an ethical issue exactly like the access ramp. You, Apple, shall do your best to give equal access to your products independently of physical conditions.
I am sure the people who create these wonderful products at Apple will see this as a very interesting challenge to make MAC much more accessible to roughly 30% of the population, people over 40s and visually impair people.
Best regards
PS: If anybody knows which door to knock to get this issue fixed, let me know; the normal did not work at all.

If you wish to contact Apple, the only way to do so is via Apple's Feedback page. We are just other Apple customer like yourself. We can offer suggestions and workarounds, but be can't move the menu bar.
ChatBlond wrote:
1) The font size cannot be adjusted, so I must memorize menu item position or stretch my neck to see what I am selecting.
You are using Universal Access aren't you? There are a number of ways to zoom in on the screen (including the menu bar) or have it spoken to you. Plus, most commands have a ⌘ (command) key equivalent. If the built-in Universal Access features are insufficient, you could use Automator to create a whole suite of shortcuts to commonly-performed operations.
3) I am from Quebec Canada, so I use both English and French languages. However, the "language icon" at the right end of the menu bar is so small that they look identical.
That is just for keyboard input. What is your keyboard's layout? If it is in English, I would say just use the shortcuts for French diacriticals. option e for accent aigu, option ` for accent grave, option i for circonflexe, option u for umlaut, and option c for cedille. If your keyboard in is French, the shortcuts should still work for circonflexe and umlaut. I do a fair amount of work in French and I would get really confused if I changed by keyboard.
4) When you change the size of the mouse pointer, its positioning becomes offseted.
Are you doing this through Universal Access? I don't really understand what you mean. It seems to work fine. There is a "hot point" on the cursor and it seems to be at the same (relative) place regardless of the cursor size.
I am using the mouse zooming functionality to work around these problems, but believe me, this is far from being appropriate. Changing the resolution is no a solution too.
Have you tried this hint to enable Resolution Independence? It is supposed to be buggy, but it is what you are asking for.

Horizontal menu bar -- submenu display

Hi, everyone --
This is my first post here, and my first time using spry. I
am trying to set up my horizontal menu bar so that the submenus
open up horizontally -- instead of vertically -- below the parent
menu item. (If the submenu list opens up vertically below the
parent item it takes up too much space.)
Any suggestions?
Thanks so much!
Lisa

Found topic.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1381916&highlight_key=y

Menu Bar - submenu will not work.

On my main template I have deleted my Menu Bar twice to see if I had coded something funky. I am experiencing no submenu at all. Looking at the website "un-forgetables.com," when you rollover or click on the menu bar that leads to submenus you will get nothing. With the following screenshot of the code can you idenify my problem.
Thanks in advance.
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Unforgetables Template 3</title>



<link href="../unforgetable.css" rel="stylesheet" type="text/css">
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
    <p><img src="../Images/unforgetables_logo.jpg" alt="Unforgetables Logo" width="448" height="201" class="banner" longdesc="file:///C|/Documents and Settings/Janie/My Documents/Unforgetables website/Images/unforgetables_logo.jpg"></p>
    
</div>
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="../index.html">Home</a>    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Planning/Consulting</a>
      <ul>
        <li><a href="../plan consult/pc who pays what.html" class="MenuBarItemSubmenu">Weddings</a>
          <ul>
            <li><a href="../plan consult/pc who pays what.html">Who Pays for What?</a></li>
            <li><a href="../plan consult/pc wed timeline.html">Wedding Planning Timeline</a></li>
            <li><a href="../plan consult/pc why hire.html">Why Hire a Consultant?</a></li>
            <li><a href="../plan consult/pc services available.html">Services Available through "Unforgetables"</a></li>
            <li><a href="../plan consult/pc information.html">Information</a></li>
            <li><a href="../plan consult/pc contract.html">Contract</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Other Events</a>
          <ul>
            <li><a href="../plan consult/pc other events.html">Packages & Prices</a></li>
            <li><a href="../plan consult/pc contract.html">Contract</a></li>
          </ul>
        </li>
        <li><a href="../plan consult/pc weddings we've done.html">Pictures of Weddings We've Done</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Venue/Event Room</a>
      <ul>
        <li><a href="../venue event room/event room pictures.html">Pictures</a>        </li>
        <li><a href="../venue event room/venue event room.html">Description & Price</a></li>
</ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Rental</a>
      <ul>
        <li><a href="../rental/rental & price list.html">Items & Prices</a></li>
        <li><a href="../rental/rental policy.html">Terms-Conditions-Policies</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Shop On Line</a>
      <ul>
        <li><a href="../shop on line/towel cakes all occ.html">Towel Cakes</a></li>
        <li><a href="../shop on line/diaper cakes.html">Diaper Cakes</a></li>
        <li><a href="../shop on line/christmas towels.html">Other Cakes</a></li>
        <li><a href="../shop on line/diaper bags.html">Diaper Bags</a></li>
        <li><a href="../shop on line/monkeys.html">Monkeys</a></li>
      </ul>
    </li>
    <li><a href="../contact us/contact info.html">Contact Us</a></li>
</ul>
<div id="mainContent">

<p>Hello Hello Hello</p>
<p> </p>

    
</div>
<div id="footer">
    <p>3952 E. 42nd Street, Suite K, Odessa, Texas 79762<br>
    phone 432-550-7300 - fax 432-550-7303
      
    </p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

You have applied the class "banner" to an image, but defined it as a div. Do this instead (you won't need to alter the dimensions of the class):
<div class="banner"><img src="Images/unforgetables_logo.jpg" alt="Unforgetables Logo" longdesc="file:///C|/Documents and Settings/Janie/My Documents/Unforgetables website/Images/unforgetables_logo.jpg" height="160" width="437"></div>
I notice that you have a long description that points to an image on your hard drive. I don't think you intended that, so I would delete it.
I've pared down the definition for .banner:This will center.
.banner {
    border: 30px solid #000;
    background: #FFF;
    width: 448px;
    margin: 0 auto;
    padding: 10px;
To center the menubar, you need to put it in a div that is centered. I have made the style inline, but you should define it as a #nav or some other div id:
<div style="width: 800px; margin: 0 auto;"><ul id="MenuBar1" class="MenuBarHorizontal">
...all the menubar ul through the </ul>...
</div> to close the new div
This is what you should do in the stylesheet:
#nav {
     width: 800px; /*test this width out...you can adjust to suit */
     margin: 0 auto;
Then you can call it in the html: <div id="nav">...</div>
Remember that to center a div, it needs a width; then apply the margin: top right bottom left; like this: margin: 0 auto; to center
Beth

Menu Bar Component Positioning

Hello,
I'm looking for a way to position a Menu Bar swf (made from
the menubar component) at the top of the web page, so it does not
push the rest of the content down the page and end up with a bunch
of white space. I believe it would be done with a style sheet.
Anynone have any suggestions for such a style sheet?
Thanks

Hi Noel,
Here is a link to what I am speaking of. It is just a test
example.
http://www.mallisoft.com/testbed/menu/menutest.html
I would like to like the content to fit right under the menu.
Thanks

Spry Menu Bar Submenu not dropping.

Hi,
I,ve got a problem with the Spry Bar Menu Bar....The Submenu is not dropping when I preview the page in a browser. Would be great if somebody could help me out here.
Many thanks in advance.

Hello Wiebke,
to my knowledge that's not a reason. Murray has often answered to ftp problems, last thing I've noticed was: "If the files are being uploaded to the correct location, then they must overwrite the existing files in that location. If you are not seeing those changes in the browser, then you must be looking at a stale page in the browser - dump your local browser cache and try again. So, make sure that the files are being properly uploaded, and that your browser is fully refreshed." and from osgood "Have you tried an alternative ftp upload client other than Dreamweaver?".
The last hint is that what I prefer. In all in these cases I'm not a friend of a detailed troubleshooting. It is one of the reasons that I prefer an external FTP program. The difficulties with which you have to fight encourage me in this opinion, not least because we always search for experts, we don't charge a "jack of all trades".
For this reason, to manage, for example, several websites or to upload my files and sometimes for the opposite way, for a necessary download from my server or to use a "a site-wide synch", I'm using FileZilla. It simply looks easier for me to keep track of all operations precisely and generate or reflect easily the desired tree structure.
Above all, FileZilla has a feature (translation from my German FileZilla) called "compare file list". Here it's possible to use file size or modification time as a criterion. There is also the possibility to "hide identical files", so that only these files which you want to redact remain visible.
And even if it means you have to install a new program, I am convinced that there is an advantage. Here is the link to get it and where you can read informations about how it works:
http://filezilla-project.org/ and
http://wiki.filezilla-project.org/Tutorial#Using_the_site_manager
Mac: Mac OS X
http://filezilla-project.org/download.php
Of course, you also need all the access data to reach your server.
Good luck
Hans-Günter

Spry Menu Bar move positions

Hi,
I've made a v. simple website www.uniquereject.co.uk but I am having problems getting the vertical menu bar to stay close to the left border. The menu bar is in the correct position on the homepage, yet when you navigate to any of the content pages- the bar moves inside away from the border. It's more of an annoyance than a major problem but it doesn't look consistent.
Thank you.

Hi,
playing a little bit with your "SpryMenuBarVertical.css"
ul.MenuBarVertical
/* margin: 0;*/
margin-left:-25px;
padding: 0;
I got this:
There may even simpler solutions, this certainly led us quickly to the desired goal.Hans-G.

Menu Bar Submenu Placement

MenuBar Widget, v1.5 on CSS and js files.
The submenus show up correctly on Mac Safari, but on both Mac
Firefox and Camino the submenus overlap the main menu.
I've no doubt changed something I shouldn't have but I've no
idea what.
The page can be viewed
here. The CSS is
here.

I got this worked out, but I'm not sure of the origin.
Something I changed, no doubt.
My first problem was that the Menu Bar was padded left 50 or
so pixels, but had no such padding applied anywhere I could see.
(It had top-bottom margins as well.) So I had added a style to the
eclosing cell taking away the margins and padding. Fixed that in
Safari, but upon checking in Firefox Mac and Camino, the submenus
were then placed directly over the main menu.
After hours of fiddling, I found the style I added was one
source of the problem. Removing that let the submenus be placed
properly. But that left me with the unnecessary left padding (and
top-bottom margins) again.
I finally fixed that by adding some style thusly:
quote:
<ul id="MenuBar1" class="MenuBarVertical"
style="padding: 0; margin: 0;">
If anyone knows of a better way, please tell me.
I've been working at home and don't have access to a Windows
machine. If someone could check this
here I'd appreciate
it.

Accordion Menu - Submenu position issue

Hello,
I've created an accordion menu that resides in the top right corner of my website. I seem to be getting various undesired results when previewing the site.
Desired layout: Build mode
Undesired Result: Page Preview
Undesired Result: Site Preview
The top level sites work fine but when I move the submenu to the left of the menu using the X position, then preview the page or site, the submenus show up either right over the menu or way off to the left of the site, almost completely off the page. I have no idea why, please help.
Jeff

Hi Sanjit, thank you for your reply.
The first image is a from the Design View, the second is a page preview in browser and the final image is a site preview in browser. My default browser is Safari (also testing in Chrome however).
If I leave the menu with default settings, the submenus appear off the site's live area and when I preview they do not show up at all. Presumabley they are off to the right side of the site.
The menu is and has been set to "All Pages" and not manually throught my build. Other than plaving the vertical menu widget within the accordion widget, it is more or less default with exeption of some styling.
I will try to rebuild the menu and see if the problem is still occuring. If you have any further sugestions I would be happy to hear them.
Thnaks again

How to remove empty space in CSS table and move spry menu bar?

Hello! I created www.stonecreekha.com about a year ago basically by watching youtube tutorials and haven't done much with it since so I've forgotten everything! In IE7, everything appears as it should; but in Firefox and IE8, the spry menu bar is positioned slightly higher than it should be (it slightly cuts off the foot of the golfer) and there is an empty space between the navigation bar and the photo. The source code can be viewed from the website. Here are some pics:
IE7 - how it is supposed to look:
IE8:
Firefox:
Dreamweaver:
So basically, I need to know how to remove that empty space between the navigation bar and the picture, and how to move the spry menu bar down a few pixels, in a way that it looks correct in IE8 and Firefox, and preferably IE7 as well.
P.S. I'm a noob so if you could be as specific as possible on what to do in Dreamweaver I'd really appreciate it. Thanks

I belive it's because of the -minus margin being used on the navbar, that you will need to use a negative margin to bring up both the left and right bodyArea divs.
Try : margin-top: -18px; on both divs. You may need to play around with that to get it more precise.
Again, not sure what effect that has on IE as I can't test it.
If it affects IE, then you may need to feed IE a conditional comment for the placement of those divs.

Menu Bar SubMenu position issue

Similar Messages

Maybe you are looking for