Horizontal menu submenu display issue in IE9

I inserted a Spry horizontal menu into a page in Dreamweaver CS5 then edited it to display the way I need it to look. It looks great in FF, Safari, Chrome and Opera. In IE9 the drop down submenu items have too much (vertical) space between them. This is probably because I added a positioning element of "top: 20px" to make the menu center (vertically) correctly over the background image. I have tried any number of alternatives and this version of the CSS is just perfect except in IE.  I have searched for days for similar issues but haven't found anything to help.
The page is http://myparlour.net/DashboardDDS /collections.html
The site CSS is http://myparlour.net/DashboardDDS/dashboard_dds.css
The Spry menu CSS is http://myparlour.net/DashboardDDS/SpryAssets/SpryMenuBarHorizontal.css
I would appreciate any help in resolving this problem.

Try
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarHorizontal {
     font-size: 90%;
     width: 800px;
     margin: auto;
ul.MenuBarHorizontal li {
     width: 20%;
ul.MenuBarHorizontal a {
     text-align: center;
ul.MenuBarHorizontal ul a {
     text-align: left;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="production.html">Production</a>
    <ul>
      <li><a href="production_mtd.html">Month to Date</a></li>
      <li><a href="production_ytd.html">Year to Date</a></li>
      <li><a href="production_history.html">History</a></li>
      <li><a href="production_monthly_goal.html">Monthly Goal</a></li>
    </ul>
  </li>
  <li><a href="collections.html" class="MenuBarItemSubmenu">Collections</a>
    <ul>
      <li><a href="collections_mtd.html">Month to Date</a></li>
      <li><a href="collections_current.html">Current by Source</a></li>
    </ul>
  </li>
  <li><a href="new_patients.html">New Patients</a>              </li>
  <li><a href="office_receivables.html" class="MenuBarItemSubmenu">Office Receivables</a>
    <ul>
      <li><a href="office_receivables_patient.html">Patient Receivables</a></li>
      <li><a href="office_receivables_insurance.html">Insurance Receivables</a></li>
    </ul>
  </li>
  <li><a href="#">      Dashboard Demo</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>
Gramps

Similar Messages

  • Horizontal menu bar displays grey in IE - Please Help

    These are my first websites and i have created it in DW CS4. Everything is working and i have checked in multiply browsers. The one issue i can't work out is that when viewed in IE the horizontal menu bar looks grayed out. The main menu should be transparent with a white border, while submenus have a .gif image gradient background also with a white border.
    Please help, I would be very grateful and if you would ever find yourself in the Maldives i'm sure we could repay the favour.....
    Please find all the details below
    The URLs are
    http://www.noonudiversmaldives.com
    http://www.noonuislandretreat.com
    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: 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: 8.5em;
    float: left;
    border: thin solid #CCC;
    /* 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;
    border: thin solid #CCC;
    /* 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;
    background-image: url(../background/Navboxes.gif);
    background-repeat: repeat-y;
    /* 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: #CCC;
    text-decoration: none;
    text-align: center;
    border: thin solid #CCC;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFFF33;
    font-weight: bold;
    border: thin solid #CCC;
    /* 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: #FFFF33;
    border: thin solid #CCC;
    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
    color: #CCC;
    border: thin solid #CCC;
    /* 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
    border: thin solid #CCC;
    /* 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
    color: #FFFF33;
    border: thin solid #CCC;
    /* 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
    color: #CCC;
    border: thin solid #CCC;
    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-color: #999999;

    Hi,
    Before I give you the solution, please be advised that nothing goes above supplying an online URL. This helps us more than anything else. In fact, with an online URL ther is no need for further code.
    So, in your case, thank you for the URL.
    For the solution to your problem, just remove the red coloured part.
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
       background-color: #999999;
    I'll see you in the Maldives.
    Ben

  • Horizontal Menu Bar - 2 issues

    Hello, I have been here asking questions before and I still
    have a couple more.
    I am using the horizontal menu bar with the spry 1.5
    pre-release files.
    LINK
    2 things, first:
    I want the submenu text to be smaller than the menu text,
    i.e. menu text should be 11px and submenu should be 10px, I just
    cant seem to rustle it out of the css to make it happen.
    ul.MenuBarHorizontal ul li
    display: block;
    float: none;
    width: auto;
    white-space: nowrap;
    font-size:10px;
    the bold addition does not seem to be working.
    Secondly:
    When this menu is viewed in IE7 it looks as if the border is
    sunken/iframe is being used, and there is the text "
    false" located inside the submenu.
    I have commented out the hacks in the css for IE to no avail.
    Wondering why the border looks so weird and the word false is being
    imposed on my submenu
    Thanks in advance

    To change the font-size, try placing the font-size property
    on the <a> element of the submenus.
    The IE7 sunken/iframe problem is a hack that is necessary to
    make the submenus appear above any native windows (Flash, Selects,
    etc) that may be in the browser window. It's showing because you
    removed the background color off of the <a> elements. Try
    making the <li> or the <a> background color white and
    it should hide the iframe.
    ul.MenuBarHorizontal ul li {
    background-color: white;
    border-bottom: solid 1px white; /* Workaround IE Gap bug */
    ul.MenuBarHorizontal ul a {
    font-size:10px;
    I also noticed that your menus were suffering from the
    infamous link in list gap IE bug. You can either remove *all*
    whitespace in your lists to get around the bug *or* use the bottom
    border property like I did above.
    --== Kin ==--

  • Horizontal Menu - Submenu position

    I have delayed the new version of my site because I was
    looking for the solution, but now, I couldn't wait anymore and it
    is online with the following problems on the horizontal menu bar:
    1- On IE, the submenus' position is wrong and becomes
    vertical when mouse is hovering.
    2- On all browsers (those I could test, at least) the second
    level of submenus appears above the first level, hiding it. (see
    "amateur" submenus for exemple)
    My website: www.thebaysoccer.com
    in case it helps, I copied the css below.
    Thanks in advance for your help! Sorry if the question looks
    stupid, but I'm learning and I didn't know anything about HTML when
    I started the site...Any help would be appreciated!
    @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
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
    cursor: default;
    width: auto;
    font-family: "Arial Rounded MT Bold";
    /* 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: 12px;
    position: relative;
    cursor: pointer;
    width: auto;
    float: left;
    white-space: nowrap;
    /* 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
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to auto so it comes onto the
    screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 10em;
    background-color: transparent;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    ul.MenuBarSubmenuVisible
    left: 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: #333;
    padding: 0.5em 0.75em;
    color: #EEE;
    text-decoration: none;
    text-align: left;
    /* 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: #ef3121;
    color: #000000;
    width: auto;
    /* 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: #ef3121;
    color: #000000;
    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%;
    width: auto;
    /* 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: #333333;

    Anybody can help?

  • Spry horizontal menu: submenu background problem in IE7

    Hello,
    I am using the Spry horizontal menu in this website: http://www.isis-papyrus.com
    It works perfectly on all current version browsers, but in IE7 the white submenu background only shows behind the actual text for each link and not to the border of the submenu box.
    I modified the css to allow for dynamic sizing for each submenu (see below). 
    Any suggestions would be greatly appreciated.
    Best, Oliver
    @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: 10px;
    cursor: default;
    width: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: normal;
    /* 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: auto;
    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: auto;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 100%;
    clear:left;
        float: none;
    background-color: transparent;
        color: #fff;
    white-space: nowrap;
    /* 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: 100%;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #339999;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.4em 0.8em;
    color: #339999;
    text-decoration: none;
    white-space: nowrap;
    /* 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: #fff;
    color: #339999;
    /* 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: #339999;
    color: #fff;
    /* 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;

    Thank you so much for your quick answer Beth!
    You solved half my problem!
    I added the bg-color to the li and ul styles of the submenus (css below) and now the white background shows correctly in IE7.
    The only thing I still would like to resolve: The hover style for the menu items (inverse bg and text colors) only works for the actual text of the link and not for the entire width of the submenu box.
    Any suggestions?
    Thank you again.
    Best, Oliver
    @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: 10px;
    cursor: default;
    width: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: normal;
    /* 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: auto;
    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: auto;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 100%;
    clear:left;
        float: none;
    background-color: #fff;
         color: #fff;
    white-space: nowrap;
    /* 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: 100%;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #339999;
    background-color: #FFF;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.4em 0.8em;
    color: #339999;
    text-decoration: none;
    white-space: nowrap;
    /* 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: #fff;
    color: #339999;
    /* 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: #339999;
    color: #fff;
    /* 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;

  • Horizontal Menu - Submenu Problem in IE

    I wanted a Spry menu that would adjust to longer menu abd submenu items, and followed the tips in the Adobe Labs article "Auto Width Horizontal Menu Bar." What I've ended up with works fine in Forefox, but in IE7, when I hover over the Main menu item, the submenu drops down fine. But when I mouse over the first item in the submenu, the submenu realigns from a striaght drop down list into submenu items arrayed in two horitzontal rows below the main menu.
    I've pored through it for a couple of hours now, and compared what I did closely to the Auto Width menu bar tutorial sample, and apart from some font styling, I'm not finding what's going wrong. Any help would be much appreciated.
    The menu is up on this page:
    http://www.catskill4sale.com/Nav_topnew.htm
    I'm using Spry 1.6.1 and uploaded those Spry assets to the server.
    Thanks for any help anyone can offer on this.
    David

    Hi David,
    First of all add a closing bracket as shown in red in the following tag:
    <meta name="description" content="Sullivan County, New York Real Estate Listings.">
    I have gone through your listing and found that you did not make an allowance for IE.
    In the following steps I have shown the complete code rather than change your code.
    1. Make sure you have the original unadulterated Spry stylesheet attached to your page.
    2. Add the following styles to your page. The style rule coiloured red is read by IE only hence the remark (/*...*/):
    <style type="text/css">
    <!--
    .clearAll {
        clear: both;
    .sidebar {
        /*width: 200px;*/
    ul.MenuBarHorizontal#MenuBar1 li {
        width: auto;
    ul.MenuBarHorizontal#MenuBar1 ul {
        width: auto;
    ul.MenuBarHorizontal#MenuBar1 ul li {
        display: block;
        float: none;
        width: auto;
        white-space: nowrap;
        border-bottom: solid 1px #EEE;
    ul.MenuBarHorizontal#MenuBar1 a.MenuBarItemSubmenu {
        padding: 0.5em 2em 0.5em 0.75em;
    -->
    </style>
    3. Add your menubar as follows making sure that you add the extra red coloured DIV's to accomodate IE :
    <div class="sidebar">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="default.asp">Main Home</a>            </li>
        <li><a href="listings.asp">Search MLS</a></li>
        <li><a class="MenuBarItemSubmenu" href="resources.asp">Buyer Info</a>
          <ul>
            <li><a href="lakefront.asp">About Lakes</a></li>
            <li><a href="family.asp">Familes with Children</a></li>
            <li><a href="value2.asp">What Houses Cost Here</a></li>
            <li><a href="gayre.asp">For GLBT Buyers</a></li>
            <li><a href="highend.asp">For Upper End Buyers</a></li>
            <li><a href="faq.asp">Buyer FAQs</a></li>
          </ul>
        </li>
        <li><a href="http://blog.catskill4sale.com">My Blog</a></li>
        <li><a href="county.asp" class="MenuBarItemSubmenu">Area Intro</a>
          <ul>
            <li><a href="county.asp">Sullivan County Areas</a></li>
            <li><a href="catskillsrealestate.asp">Catskill Cnty Comparison</a></li>
          </ul>
          </li>
        <li><a href="current.asp" class="MenuBarItemSubmenu">Market Conditions</a>
          <ul>
            <li><a href="current.asp">Latest Market Report</a></li>
            <li><a href="archive.asp">Archived Reports</a></li>
          </ul>
          </li>
        </ul>
      </div> 
      <div class="clearAll"> </div>
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
    </div>
    I hope the above will fix your problem. I have purposely not centered the submenus because that added another problem.
    Ben

  • Horizontal Menu Not Displaying Right in IE (Shocker!)

    Can someone look and see why my menu wont display correctly in IE. I've used the same feature on other sights with no problems. I may have jacked up the code when tweaking the design. Any help would be appreciated. Cheers.
    www.brand32.com/Evoke
    I'll be happy to add code if needed.

    Here is the CSS. Hopefully this will elicit some response. Thanks in advance for those who reply.
    @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 0 0 0px;
    padding: 38px 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;
    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
    background-color: #300607;
    border: 0px 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;
    /* 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-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-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-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-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;

  • 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 - submenu items are displaying laterally instead of vertically in IE

    I am currently building a website in Dreamweaver CS5 (on a mac) that includes a horizontal Spry menubar.  The drop down items appear vertically, as I want them to in Firefox, Safari, and Chrome, but not in Internet Explorer for Windows.  Instead, the items are listed laterally in IE.  How can I fix this?
    Here's a link to the page:
    http://dcsyc.org/
    Thanks!

    I'm not certain which attribute I changed, ive done a lot more coding since then, but if you open the CSS file linked above its in there somewhere. I'm pretty sure I set the submenus width to automatic to fix it, but I'm not 100%.
    ul.MenuBarHorizontal ul
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 12pt;
         z-index: 1020;
         cursor: default;
         width: auto;
         position: absolute;
         left: -1000em;
    I think its the width: auto; in that tag.
    On the plus side, the link to the CSS works, and the answer is in there somewhere.
    If you really cant figure it out, post again here and we'll put our heads togethe .

  • Sub menu browser display issue

    Hello,
    http://marketing.ocean-florida.co.uk/damien/ocean/homepage/ocean52.html
    I'm having an issue with the main navigation sub menu.
    In IE9 on Windows 7 the drop down text (last character) drops to the next line.
    Screenshot attched.
    Any ideas as to why this is happening would be gratefully received.
    Many thanks,
    Damien

    I see you've styled your CSS width to be auto for your dropdown ULs
    Did you try setting manual width for 'Cruise & Stay' UL alone? Say, around 67px wide instead of 57 that it takes on auto?

  • Spry Menu Bar display issue - please help.

    Everything works accept for IE for PC. I want the backgrounds
    of the menu to be transparent but they are coming up white in IE.
    Please help. Thank you.
    http://www.pjhaarsma.com/techmark/docs/main.html

    Found it:
    In the hack on the CSS sheet - change background from #FFF to
    transparent:
    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: transparent;
    }

  • Horizontal green lines display issue

         When I have the brightness up more than 4 or 5 notches and a white screen is up, for example Safari, it leaves green horizontal lines exactly where the brightest part of the browser was. They go away after a while, but I'm always afraid I'm messing up my display so I leave it pretty dim.  I have the 27in imac from late 2013. Is it a faulty display or is this common?

    Hi xlpacmanxl,
    So the first thing that I would want to know is with the brightness cranked all the way up, do these lines appear during startup?
    As for troubleshooting:
    Install any and all OS X updates via the App store.
    Perform a NVRAM reset:
    About NVRAM and PRAM
    If it is still going on reset the SMC:
    Intel-based Macs: Resetting the System Management Controller (SMC)
    If the issue still persists, we will need to know if it is occurring outside the OS. Boot to recovery by holding CMD + R during startup. There you can open a safari window by selecting Get Help Online. Crank up the brightness all the way and if you still see the lines there, head into an Apple Retail store for a diagnostic.
    Thanks,
    Ludeth

  • Horizontal Menu Bar Width Issues

    Hey all,
    I'm having some problems getting my menu bar to stretch all the way across the 1000px container it's in.  Is there a way to alter the width of individual tabs?  It is set to float left, and the width is currently set at auto under ul.MenuBarHorizontal li.  I've put a screen shot in for reference.  Thanks for any help in advance.
    As you can see below, the last tab (gifts) is not quite reaching the edge of the container. 

    You can change the padding in the following
    ul.MenuBarHorizontal a {
        display: block;
        cursor: pointer;
        background-color: #EEE;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
    Gramps

  • Why does Spry horizontal menu bar displays as a list?

    I createda spry hoizontal menu bar which looks great on my workspace but when I preview it in a browser, it displays as an unordered list.Does anyone have an explanation for what has happened and how to correct it?

    It sounds like the path to the support files - SpryMenuBar.js and/or SpryMenuBarHorizontal.css - is not correct.
    Gramps

  • Horizontal Menu Submenu alignment

    Problem: how to change the top alignment of a submunu list so
    that it aligns with the top of the first choice in the parent menu
    listing. ??
    Presently "top=0" in CSS puts the top edge of the child
    submenu list in line with the top line of the selected choice of
    the parent menu. What I would like to do is align the child top
    line to the top line of the first choice in the parent menu no
    matter what item in the parent menu is selected.
    The top= -20px (or a percent or whatever value) will move the
    location of the child menu up relative to the top line of the
    selected parent item, but I would like to reference the location of
    all submenu to the top line of the first listed choice of the
    parent menu. How can I do that? Is it possible?

    Thank you for your feedback.
    Basically, the SpryMenuBar is a very well thought out widget, catering for all modern browsers. The HTML is the same as for other well designed menubars, the JS ensures that the submenus work in the different browsers and the CSS is partially very similar to other menubars and partially there to service the JS.
    Having said that the SpryMenuBar is a very delicately balanced widget mainly because of the differences in browser interpretation.
    The problems arise when people not in the know, start to unbalance the menu by unwittingly changing critical parts of the CSS. Have a look here to see what I mean http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
    For more info on what you are looking for, have a look here for auto width http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml and here for centering the menubar http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
    SpryMenuBar v2 makes it easier for newbies to style the menubar, I tend to stick to the original menu.
    If the above has not helped you with the problem, please come back here.
    Gramps

Maybe you are looking for

  • Which is best for ABAP-SD consultant

    I am a techno functional consultant with ABAP-SD. Now i want to learn another technology. can anyone tell me which one will be the best for this combination ABAP-SD . MDM,PI,SOLUTION MANAGER ,BI Your suggestions are higlhy appriciated.

  • Best Practice: Migrating transports to Prod (system down etc.)

    Hi all This is more of a process and governance question as opposed to a ChaRM question. We use ChaRM to migrate transports to Production systems. For example, we have a Minor BAU Release (every 2 weeks), a Minor Initiative Release (every 4 weeks) an

  • ITunes 10.6 album artwork still not fixed

    Still Album artwork not fixed - it refuses to clear album artwork and will not paste new artwork?? absolutley rediculous for this basic element to be so buggy and its meant to be fixed in 10.6 ???/ geesus app ****

  • Thinkpad T510: 1802: Unauthorized Network Card

    I did some updates to my laptop, and am now getting 1802 Unauthorized Network Card. The wireless card has been in this machine and working, before the BIOS and wireless card updates. The internal card is a Model 622ANHMW Intel Centrino-Advanced N-620

  • My wi fi keeps disconnecting why

    I always have to turn off wifi and then back on again to get my iPhone 4S (6.1.3.) to do any internet activity.... often many times in one process, in order to complete the process. The signal shows full strength and in settings it shows I am connect