Adjusting margins between horizontal menu items

I noticed you can adjust the padding with menu items, but not the margins?  Is there a way to adjust the margins between each menu item ?

In that case you will need to use images.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarHorizontal a.line {    background: #EEE url(SpryMenuBarLine.gif) no-repeat 95% 50%; }
ul.MenuBarHorizontal a.MenuBarItemSubmenu.line{    background: #EEE url(SpryMenuBarDownLine.gif) no-repeat 95% 50%; }
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu line" 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="#" class="line">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu line" 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>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
The images look similar to the following
and
I hope this helps.
Ben

Similar Messages

  • How to add vertical stroke to between top menu items?

    I have a horizontal Spry menu bar. How to add a vertical stroke between menu top items?
    BUT NOT outermost left and outermost right. Only to BETWEEN top menu items.
    In html file I tried this:
      <div id="main_menu">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Products</a></li>
          <li class=stroke></li>
          <li><a href="#">Services</a></li>
          <li class=stroke></li>
          <li><a href="#">News</a></li>
          <li class=stroke></li>
          <li><a href="#">Contact</a></li>
         </ul>
       </div>
    And in CSS-file I made a style:
    #MenuBar1 .stroke
    display: block;
    width: 1px;
    height: 16px;
    background-image: url(../images/gui/vertical_stroke.png);
    background-repeat: no-repeat;
    In Safari this Spry menu bar work fine. But stop working in Firefox and IE.
    Also DW4 warning me in properties panel that:
    "This menu bar is missing some important tags. Go to Code view and and make sure that each menu item contains an <a> tag."
    What is correct method to do this?

    In that case you will need to use images.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style>
    ul.MenuBarHorizontal a.line {    background: #EEE url(SpryMenuBarLine.gif) no-repeat 95% 50%; }
    ul.MenuBarHorizontal a.MenuBarItemSubmenu.line{    background: #EEE url(SpryMenuBarDownLine.gif) no-repeat 95% 50%; }
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu line" 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="#" class="line">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu line" 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>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    The images look similar to the following
    and
    I hope this helps.
    Ben

  • Equal Space between Menu Items and Drop Down Menü left aligned not possible?

    It seems like I can either have equal spacing between the horizontal menu items and the drop down menu will show up centered , or I say the menu items should be of equal size, and then drop down will be left aligned. Is there any way of having equal space AND left aligned drop down???? Thanks in advance!

    Hello Anjum,
    Thank you for reporting the issue. It seems to be a Bug and we have logged the same. Hopefully it will get fixed in coming releases.
    As of now we do not have any workaround for same. However once we have some workaround, we will definitely share it with you.
    Regards,
    Sachin

  • Bar in between Menu Items

    Hello,
    Can you advise how to create those tiny vertical bars in between each menu item, as shown above, using CSS3.
    I am trying to import a "line.gif" as shown, but it needs to be repeated and shortened as well.
    #header {
              background-color:#39F;
              height:100px;
              margin-bottom:0px;
              background-image: url(line.gif);
              background-repeat:repeat-y;
              background-position:20px;
    Kindly advise

    Add a white border onto the list item. You would need to modify the styles below to suit your design but the border-right would be the simplest way of doing this.
    <nav>
    <ul>
    <li>List Item One</li>
    <li>List Item Two</li>
    <li>List Item Three</li>
    <li class="last">List Item Four</li>
    </ul>
    </nav>
    li {
    padding:5px;
    border-right:1px solid #fff;
    display:block;
    li.last {
    border-right:none;

  • Add space between Pop Menu Magic items?

    Is there a way to add space between the menu items in
    generated by Pop Menu Magic? By this I mean, can you have the
    various menu items (the "tabs" or "buttons") exist with some space
    between them
    (something
    like this but with maybe more space), as opposed to the default
    way the "tabs" are generated (butted up to one another
    like
    this)?
    I have tried editing the p7pm CSS to acheive this in a page
    design I'm roughing out. I get close sometimes but no cigar.....I
    have tried messing with the list items in the HTML code itself, but
    no luck there either.
    Hope I am making enough sense here....
    Thanks,
    Tommy

    Have you asked the question on the PVII newsgroup? You'd
    probably get a
    much faster response over there
    Nadia
    Adobe� Community Expert : Dreamweaver
    http://www.csstemplates.com.au
    - CSS Templates | Free Templates
    http://www.perrelink.com.au
    - Web Dev
    http://www.DreamweaverResources.com
    - Dropdown Menu Templates|Tutorials
    http://www.adobe.com/devnet/dreamweaver/css.html
    "steelkat" <[email protected]> wrote in
    message
    news:e5fapn$kmo$[email protected]..
    > Is there a way to add space between the menu items in
    generated by Pop
    > Menu
    > Magic? By this I mean, can you have the various menu
    items (the "tabs" or
    > "buttons") exist with some space between them <a
    target=_blank
    > class=ftalternatingbarlinklarge
    > href="
    http://css.maxdesign.com.au/listamatic/vertical11.htm">(something
    > like
    > this but with maybe more space)</a>, as opposed to
    the default way the
    > "tabs"
    > are generated (butted up to one another <a
    target=_blank
    > class=ftalternatingbarlinklarge
    > href="
    http://www.projectseven.com/viewer/index.asp?demo=pmm">like
    > this)</a>?
    >
    > I have tried editing the p7pm CSS to acheive this. I get
    close sometimes
    > but
    > no cigar.....I have tried messing with the list items in
    the HTML code
    > itself,
    > but no luck there either.
    >
    > Hope I am making enough sense here....
    >
    > Thanks,
    >
    > Tommy
    >

  • Horizontal Menu Bar - Not displaying correctly in Internet Explorer

    My issues are occuring in Internet Explorer 8 and 7, haven't tested earlier versions.
    I am currently using DW CS5, Spry 1.6.1
    The website (not yet complete) is at www3.sympatico.ca/mitchell.richard/
    The menu bar as viewed in Firefox is correct. In Internet Explorer the menu bar is left justified, hides visited links, and lists horizontal menu items in reverse order.
    I work for a Women's Shelter in Canada, as the Information Systems Manager. We don't have the funds to hire someone to build a website and it was decided and I quote "You know computers, you can buld the website". I couldn't get them to understand the analogy that just because a Neurosurgeon can use a scalpel he isn't a Cardiothoracic Surgeon... needless to say, I am floudering on this menu bar. Any help would be greatly appreciated.
    Below is the source for my menubar
    CSS
    @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: 12pt;
        cursor: default;
        width: inherit;
        font: calibri;
        font-family: Calibri;
        font-weight: bold;
        background-color: #4F91CD;
        /* [disabled]height: 27px; */
        /* [disabled]border-bottom: 1px solid #A7C9E5; */
        /* [disabled]border-top: 1px solid #A7C9E5; */
    /* 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: 6
    .em;
        float: right;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #4F91CD;
        padding: 0.2em 0.75em;
        color: #FFF;
        text-decoration: none;
        border-bottom: 1px solid #A7C9E5;
        border-top: 1px solid #A7C9E5;
    /* 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: #A7C9E5;
        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: #A7C9E5;
        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
        /* [disabled]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
        /* [disabled]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
        /* [disabled]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
        /* [disabled]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 ifram=e
        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;
    HTML
      <tr>
        <td colspan="10" class="navbarrepeat"><ul id="navbar" class="MenuBarHorizontal">
          <li><a href="contact_us.html">Contact Us</a>        </li>
          <li><a href="helpful_links.html" class="MenuBarItemSubmenu">Resources</a>
            <ul>
              <li><a href="helpful_links.html">Helpful Links</a></li>
              <li><a href="community_agencies.html">Community Agencies</a></li>
              <li><a href="of_interest.html">Of Interest</a></li>
    </ul>
          </li>
          <li><a href="checklist.html" class="MenuBarItemSubmenu">Safety</a>
            <ul>
              <li><a href="safety_checklist.html">Safety Checklist</a></li>
              <li><a href="things_to_bring.html">Things to Bring</a></li>
              <li><a href="child_safety_plan.html">Child Safety Plan</a></li>
    </ul>
          </li>
          <li><a href="signs.html" class="MenuBarItemSubmenu">Abuse</a>
            <ul>
              <li><a href="what_is_abuse.html">What is Abuse?</a></li>
              <li><a href="signs.html">Signs of Abuse</a></li>
              <li><a href="characteristics.html">Characteristics</a></li>
              <li><a href="why_women_stay.html">Why Women Stay</a></li>
              <li><a href="donate.html">Survivors Speak</a></li>
            </ul>
          </li>
          <li><a href="donate.html" class="MenuBarItemSubmenu">Support Us</a>
            <ul>
              <li><a href="donate.html">Donate</a></li>
              <li><a href="events.html">Events</a></li>
              <li><a href="volunteering.html">Volunteering</a></li>
              <li><a href="statistics.html">Statistics</a></li>
    </ul>
          </li>
          <li><a href="join_us.html">Join Us</a>        </li>
          <li><a href="our_story.html" class="MenuBarItemSubmenu">About Us</a>
            <ul>
              <li><a href="residential.html">Our Services</a></li>
              <li><a href="our_mission.html">Our Mission</a></li>
              <li><a href="our_story.html">Our Story</a></li>
              <li><a href="board_of_directors.html">Board of Directors</a></li>
            </ul>
          </li>
        </ul></td>
        <td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
      </tr>

    /* 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: 6
    .em;
         float: right;
    The red coloured line causes your menu to be displayed the wrong way round in FF. IE shows the menu as you have listed it with Contact Us as the first item.
    Advice:
    change the float to left so that the listed items start on the left hand side
    change the listed items in the order that you want them to appear.

  • Spry horizontal menu help

    I've tried to figure this out reading the live docs and
    can't, so asking for some suggestions here.
    The horizontal menu items created using spry don't look
    right. "News & Press" is spaced closer to "Contact Us" because
    the text is longer. I don't know how to get the individual links
    spaced more appropriately.
    Any suggestions would be appreciated.
    Posted a page here:
    http://www.slewismedia.com/test-1.html
    Thanks!!

    *Bump

  • How to make the spacing between menu items equal with varied menu item sizes

    If the title isn't clear, what I mean is how do you make the space between each of the items in a horizontal the same when some of the menu items are up to double the size of others. Currently I am using the margin property and the space between the larger items is smaller than between the smaller items.
    If you need more information just ask.

    Screenshots don't tell the whole story which is contained in your HTML and CSS code.
    Without a link to your test page or a look at your code (all of it) the best we can provide is wild guesses.
    Help us help YOU by providing a link.
    HOW IMPORTANT IS CODE? A Plea to new posters.
    http://forums.adobe.com/thread/691654?tstart=0
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Spry Horizontal Menu List Items crash IE6 browser

    ****Update*****
    Apparently, it was width:100%; set on each hover over
    background color for the list items in our default stylesheet that
    was causing IE6 to crash.
    Menus are in working order in all browsers now!
    We have integrated the Spry Horizontal Menu with a website,
    and added custom styling to SpryMenuBarHorizontal.css. The menu
    works in Mozilla, Safari, and IE7. However, in IE6, after hovering
    over the navigation, the drop down menu appears, but, as soon as
    you move your mouse into the drop down to select an item from the
    list, IE6 crashes. Every time. Various Computers.
    We have tried reverting to the original
    SpryMenuBarHorizontal.css file, however, the same problem occurs.
    We haven't made any changes to the original js file
    (SpryMenuBar.js).
    Has anyone ever experienced this issue?
    Here is our customized CSS:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
    1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    LAYOUT INFORMATION: describes box model, positioning,
    z-order
    img#nfl {
    background-image:url(/Images/slices/nfl.png);
    background-repeat:no-repeat;
    height:14px;
    width:40px;
    margin:7px auto auto 25px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/nfl.png");
    _background-repeat:no-repeat;
    _background-image:none;
    img#mlb {
    background-image:url(/Images/slices/mlb.png);
    background-repeat:no-repeat;
    height:14px;
    width:43px;
    margin:7px 20px auto auto;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/mlb.png");
    _background-repeat:no-repeat;
    _background-image:none;
    img#milb {
    background-image:url(/Images/slices/milb.png);
    background-repeat:no-repeat;
    height:14px;
    width:112px;
    margin:7px auto auto auto;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/milb.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto -10px;
    img#ctown {
    background-image:url(/Images/slices/ctown.png);
    background-repeat:no-repeat;
    height:14px;
    width:114px;
    margin:7px auto auto 50px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/ctown.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto 40px;
    img#nba {
    background-image:url(/Images/slices/nba.png);
    background-repeat:no-repeat;
    height:14px;
    width:43px;
    margin:7px auto auto 100px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/nba.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto 70px;
    img#nhl {
    background-image:url(/Images/slices/nhl.png);
    background-repeat:no-repeat;
    height:14px;
    width:41px;
    margin:7px auto auto 90px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/nhl.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:margin:7px auto auto 100px;
    img#ncaa {
    background-image:url(/Images/slices/ncaa.png);
    background-repeat:no-repeat;
    height:14px;
    width:52px;
    margin:7px auto auto 70px;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=scale src="/Images/slices/ncaa.png");
    _background-repeat:no-repeat;
    _background-image:none;
    _margin:7px auto auto 60px;
    /* The outermost container of the Menu Bar, an auto width box
    with no margin or padding */
    ul.MenuBarHorizontal
    list-style-type: none;
    cursor: default;
    width:950px;
    height:32px;
    background-image:url(/Images/slices/primaryNavSlice.png);
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
    vertical-align:middle;
    border-bottom:1px solid #000;
    /* 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: 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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    /*width: 8.2em;*/
    width:auto;
    position: absolute;
    left: -1000em; /* without this all menus are visible without
    hover */
    /* 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; /* without this menus don't show up */
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    /*width: 8.2em;*/
    width:auto;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.15em 0.15em;
    text-decoration: none;
    ul#teamsMenu table#teams {
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size:11px;
    width:500px;
    background-color:#fff!important;
    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;
    li.ncaa_list #teams.ncaa_table {
    position:absolute;
    left:-590px;
    top:7px;
    To center the tables in the screen
    li.nfl_list #teams.nfl_table {
    position:absolute;
    top:7px;
    li.mlb_list #teams.mlb_table {
    position:absolute;
    top:7px;
    li.milb_list #teams.milb_table {
    position:absolute;
    left:-80px;
    top:7px;
    li.ctown_list #teams.ctown_table {
    position:absolute;
    top:7px;
    li.nba_list #teams.nba_table {
    position:absolute;
    left:-200px;
    top:7px;
    li.nhl_list #teams.nhl_table {
    position:absolute;
    left:-190px;
    top:7px;
    li.ncaa_list #teams.ncaa_table {
    position:absolute;
    left:-590px;
    top:7px;
    }

    I am having the same problems in IE7. I'm using the latest
    version of everything (Spry 1.6.1 and javascript file version 0.12)
    and at first I was having the problem on my drop down menus
    appearing horizontal with all the correct styles but when I changed
    the rule ul.MenuBarHorizontal ul to position: relative; the drop
    downs appear vertical now but I have no beige border around the
    whole ul anymore and I'm getting white space inbetween list items.
    http://www.wusf.usf.edu/Header_Nav_Footer_newStyleSheet.cfm
    so if anyone has any advice I'd much appreciate it. Also i'm
    using 1px width on my borders no decimals.

  • Want to display menu item horizontally in hover menu control?

    hi,
    I have to display 3 buttons as menu items in a hover menu horizontally. As the hover menu control only show the menu items in vertical form, but for a specific task, i have to place 3 buttons side by side in hover menu. if anyone have tried this please help me.
    Thanks in advance
    Deepak

    Hi,
    I have a suggestion:
    Design your page into tables and rows.
    Divide each row into columns.Example:
    <table>
    <tr>
    <td>
    <hbj:hoverMenu
      id="hover1"
      standAlone="true">
    <hbj:hoverMenuItem
        id="1"
        text="Size"
        />
    </hbj:hoverMenu>
    </td>
    <td>
    <hbj:hoverMenu
      id="hover2"
      standAlone="true">
    <hbj:hoverMenuItem
        id="1"
        text="Size"
        />
    </hbj:hoverMenu>
    </td>
    </tr>
    </table>
    If you want to align the sub menu accordingly,you can again divide each row of the table into a subtable with rows and columns.
    Hope this helps.
    Regards,
    Harish
    (Please award points if this answer is usefull)

  • Bug report: Photoshop can't record an action where you insert the menu item "Tile all horizontally".

    I am running CS6 beta on Mac OS 10.7.3
    Photoshop can't record an action where you insert the menu item "Tile all horizontally".
    Expected behavior: add the tile all horizontally action to your actions.
    Behavior: nothing happens.
    This does work for Tile all vertically.

    Have I mentioned how much i love my playbook now Great job on os 2.0

  • Dashed rule between menu items nested inside an accordion panel widget in Muse?

    I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container. 
    I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel.  The menu expands and collapses in the Preview mode but the dashed rules don't show up.
    Muse CC 2014, iMac OS10.9

    The link again is I forgot to add http to the link before, but it should have worked.
    http://www.lipowiec.org/test/index.php
    a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
    b) used spry to add horizontal menu to header
    c) followed instructions from Spry Help
    http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
    working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
    To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
    Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
    Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
    Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
    Change the width property to a desired width (or change the property to auto to remove a fixed width).
    Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
    Add the following properties to the rule: float: none; and background-color: transparent;.
    Delete the width: 8.2em; property and value.
    Under IE it's broken, under the other browsers it works.
    There need to be more IE HACKS added.

  • Accessibility : correspondance between buttons and menu items

    Hello,
    I have been dealing with accessibility API to retrieve information from menu items and buttons in tool bar. In addition, I would like to be able to create a correspondance between a button (let's say, the "new message" button in mail) and a menu item ("new message" one in the menu bar), since they perform the same action. Is there any way to process to this correspondance "automatically" ?I first wanted to check name matchings, but some item do not really share the same name (e.g. refresh button in Chrome).
    How could I do that ? Is there any chance the button and the menu item might call the same "action handler" or something ?
    thanks in advance

    Use an external sound editor to reduce the level of the audio-file [of the menu]; and then use the quieter version in DVD-SP. Try installing Bias Peak LE, which should have come with DVD-SP.

  • Spry horizontal menu widget individual item control

    In my horizontal menu there are 4 main items. Can I change
    one of the items background color to green?
    I got no reply... Let me try to be more specific...
    http://www.appliedbrain.com/sprytest.html
    On this page above, is it possible to make one of the main
    item buttons a different color ( for example: the button that says
    green)? Is this within the limitations of the spry widget?
    Thank you,
    -Nance

    dwdivazona wrote:
    First of all, I realize that there is discussion forum specifically for Spry but when I checked it out, it looks like those questions get very few replies.
    There's a very good reason for that. Adobe announced in August that it no longer plans to invest in the development of Spry (see http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l).
    Before attempting to customize a Spry menu, you should also be aware that the version embedded in Dreamweaver displays problems with IE 8 and above.
    Quite honestly, you would be better off looking for an alternative menu system.

  • How to position spry submenu items ABOVE main horizontal menu

    I am building a site for a new client. (Using DW CS4) I have
    inserted a navigation bar using the spry nav widget, which I am
    familiar with. However, what I am NOT familiar with is the
    positioning of the submenu items. Normally, the default is fine.
    However, where the bar is located - the client wants the
    submenus to display above the main menu bar.
    How do I accomplish this? I understand it will be in the CSS
    somewhere, but unsure of as to where (and what) changes.
    At the risk of jumbling up the post here, - here is the CSS:
    @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
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    padding: 0;
    margin: 0;
    /* Set the active Menu Bar with this class, currently setting
    z-index to accomodate IE rendering bug:
    http://therealcrisp.xs4all.nl/meuk/IE-zi...
    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: center;
    cursor: pointer;
    width: 132px;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a
    higher z-index, but they are initially off the left side of the
    screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to auto so it comes onto the
    screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #7D8BAE;
    padding: 0.5em 0.75em;
    color: #FFFFF5;
    text-decoration: none;
    border-right-width: 2.5px;
    border-left-width: 2.5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #536186;
    border-right-color: #536186;
    border-bottom-color: #536186;
    border-left-color: #536186;
    /* 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: #DFE2EC;
    color: #7D8BAE;
    /* 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: #DFE2EC;
    color: #7D8BAE;
    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-rep
    Thanks
    Mike

    libertymike wrote:
    > However, where the bar is located - the client wants the
    submenus to display
    > above the main menu bar.
    >
    > How do I accomplish this?
    I answered the same question in the Dreamweaver online help
    page
    "Customize the Menu Bar widget".
    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
    Scroll down to the comments section, and look for my answer
    to Alve
    Henricson's question dated February 8, 2009.
    David Powers
    Adobe Community Expert, Dreamweaver
    http://foundationphp.com

Maybe you are looking for

  • Multiple users on the same machine using a common iTunes Library

    I'm running iTunes from my user profile in Vista, the songs are stores in a shared directory. My wife recently purchased an iPhone, so I decided to setup her phone under her user profile in Vista, so she could use her contacts out of outlook, this me

  • Using a Single Registered UDO for multiple Transactions

    Dear Experts, We are developing a Expense Booking System by using SAP B1 SDK. in .NET The scenario is like this. Need to book the expenses independently by using an Expense Booking Screen, and also from a Transaction screen (Sales) where the user ent

  • Total mac noob needs a little help!

    Hi everyone, Just got an imac and just a few things are bugging me, i installed firefox and msn messeger, and underneath my Mac HD icon, there are white disk box thingys that wont go away, why is this? is it because the programs havent been installed

  • Is it safe to download adobe flash player  and  adobe pdf macbook?

    cannot play many videos as they require flash player - is it safe to download the flash player or is that likely to expose you to malware and viruses? also cannot download many pdf files as they need adobe acrobat.

  • JDK 1.4.2_04 and AffineTransform

    I use JDev 9.0.3.3 (build 1205) It started with JDK 1.3.1_02 and I upgraded it to 1.4.2_02. My simple Swing/JClient program runs fine using JDK1.3 but always crashes when I use 1.4 with the following exception: java.lang.StackOverflowError      at ja