IE7 Issue with Spry Horizontal Menu

I am fairly new to all of this, I have developed a web site using horizontal spry menu, everything fine on IE8, Safari and Firefox. When viewed on IE7 there appears a white line above the menu.
Url is www.psweb-test.com could you help please as I can see the problem.

The problem lies with the line-height style rule in ul.MenuBarHorizontal a
I do not know what the solution is but I am sure if you Google the subject, you will find a plethora of discussions regarding same.
One such search gave me the following link http://www.ensight.org/2006/08/23/list-of-ie7-css-bug-fixes/
I hope this helps.
Ben

Similar Messages

  • Background images with spry "horizontal menu"

    hi again
    I am trying to work with the spry: "horizontal menu"
    I want to put some background images into the menu bar not into the submenu
    and that is the problem: the background images appears overall
    what can I do ?
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    and css
    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: center;
         cursor: pointer;
         width: 100px;
         float: left;
         height: 10px;
    /* 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: 100px;
         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: 100px;
         height: 30px;
    /* 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: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* 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: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    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-color: #FEF3E4;
    /* 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-color: #0F9;
    /* 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-color: #FEF3E4;
         color: #FF0;
    /* 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-color: #F99;
    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;

    Complete page and css code below (scroll down)
    All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
    /* 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-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
    Here is the code and css:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    <style>
    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: center;
         cursor: pointer;
         width: 100px;
         float: left;
         height: 10px;
    /* 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: 100px;
         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: 100px;
         height: 30px;
    /* 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: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* 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: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    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-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    /* 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-color: #0F9;
    /* 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-color: #FEF3E4;
         color: #FF0;
    /* 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-color: #F99;
    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);
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

  • IE issues with Spry horizontal men

    Hi..I created a spry horizontal nav bar and its works fine in
    FF, but in IE7 the pull down menus are going all over the place!
    The first sub menu goes in the wrong direction and the sub sub menu
    flys off to the right. Does anyone have any suggestions? Basically
    the horizontal positioning is all messed up! Thanks so
    much!!!

    I'm having similar issues with IE - only I don't get the nav
    at all. Absolutely fine in FF, but it's like I never even created
    the menu (save for the code as evidence) when I look in IE.

  • IE 7 - CSS Issues with Spry dropdown Menu *HELP*

    I am using a spry horizontal dropdown menu generated in DW. The menus look consistant in all other browsers except ie7 -  When the drop down menu occurs they all appear to the right and not directly under its menu item.. Looked around in the Css and i cant seem to find the right rule to make the change in ie7 only... was planning on using a css conditional statement to shift them left.. But im not having any luck.. HELP!
    Thanks so much in advance!

    Sorry.. Here is the link.. Thanks so much for your willingness to help!
    http://soldesign.us/_working/WEBSITE_BoulderPlasticSurgery/index.html

  • Can anyone help? having problems with Spry Horizontal Menu in IE

    Hi can anyone take a look at the code ive got or go to the site www.cj-it-pcfix.info ( using IE ) and see why the sub-submenu covers half of the submenu box? If you hover on "computer Store" then hover over any of the tabs below that you will see what i mean. here is the code...
    ANY HELP WOULD BE GREAT!!
    @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: 100%;
        cursor: default;
    /* 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: 10.3px;
        position: relative;
        cursor: pointer;
        width: 12em;
        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
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        margin: 0;
        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: 13.5em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        margin-top: 0%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 100%;
        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;
    #MenuBar2 {
        padding-left: 5px;
    .border {
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #f0f0f0;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #0579b1;
        color: #FFFFFF;
        text-decoration: none;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #f0f0f0;
        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: #000000;
        color: #FFFFFF;
    /* 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: #a8a8a8;
        color: #FFFFFF;
        border: 1px solid #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
    /* 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
    /* 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
    /* 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
    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;
        background: #FFF;
        float: left;

    You have a set of conflicting widths:
    ul.MenuBarHorizontal li { width: 12em;}
    ul.MenuBarHorizontal ul { width: 8.2em;}
    ul.MenuBarHorizontal ul li { width: 13.5em;}
    ul.MenuBarHorizontal ul ul
        margin-top: 0%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 100%;
        position: absolute;
    So, to translate:
    All list items will be 12 ems wide
    First submenu list (ul) will be 8.2ems wide
    First submenu list items will be 13.5ems wide
    this supersedes the 12ems for all sub and sub-submenu list items
    Sub-submenu lists (ul) will hang off the right side (margin-left: 100%)
    Internet Explorer is interpreting #4 to mean at the right side of the ul (which is at 8.2em)
    Other browsers are interpreting #4 to mean at the right side of the li (which is at 13.5em)
    I believe that is what is happening on your menus.
    Beth

  • Another SPRY horizontal menu problem with IE7

    I posted this before, with no responses, but I think
    I've narrowed it down to a CSS response problem with IE7.0. If you
    view the attached link in Firefox or Opera, the menu background
    color responds correctly on the drop downs. In IE7, the
    background-color is ignored, causing the menu to be translucent
    and, uh, ugly. Has anyone else had an issue with the
    background-color CSS attribute in the SPRY horizontal menu css not
    working?
    HELLLLLP! and, uh, Thanks,
    Karl
    Prototype
    link using spry, css, ajax sprites and other magic.

    >>
    Regrettably, the silence from the forum has been deafening.
    I'm not sure if folks are just wary of SPRY and AJAX issues right
    now because they're so new or if it's the summer heat
    >>
    guess it´s all of that :-) But folks visiting these more
    "general" Dreamweaver forums are not necessarily Spry experts
    respectively might not even be interested in that -- you´ll
    certainly get more response when posting Spry related questions in
    the
    Spry
    forums @ Adobe Labs

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

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

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

  • Spry horizontal menu: 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;

  • *Help* Spry Horizontal Menu Bar wont show and cant seem to center it with rest of content

    Hey,
    I am a newbie to Dreamweaver and was wondering if someone can
    help me with the Spry Horizontal Menu Bar....
    http://www.djdanmatthews.net
    1) After moving mouse over diffrent areas of Spry menu bar
    the text seems to disapear or not show up?
    2) I can't seem to center content of Spry menu bar with rest
    of website?
    3) How do I ad a image (where also can I get it) to the Spry
    menu bar so it looks more professional &3d?
    Thanks so much,
    Dan

    *Bump

  • Spry horizontal menu's not displaying right in IE9

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

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

  • Spry Horizontal Menu going behind Div in IE

    I'm having an issue with spry in dw 3. I've inserted a
    horizontal menu with submenus that run vertically, nothing fancy.
    In firefox and opera the menus float on top of the div underneath
    just fine, however in IE the submenus go behind the div below the
    menu. I've updated to 1.6.1 spry and have inserted the fix for IE
    to make the submenus view horizontally as opposed to vertical. Your
    thoughts are appreciated.

    I'm having a similar issue in IE7 in that my
    Spry submenus drop down behind the tabs in
    the Spry tabbed panels div I created following my navigation div.  Any help out there?
    Thanks!

  • 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.

  • Spry Horizontal Menu Submenus Won't Appear - Help

    OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
    My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
    But here is some of the relevant code. First the HTML for the section in question.
    I very much appeciate any advice.
    Home     
    Biography
    Blog
    Riding
    Resources      
    Provincial
    Municipal
    Federal
    Education
    Community
    International
    Liberal Party
    Media      
    News Releases
    Newsletters
    Columns
    Photo Gallery
    Multimedia
    RSS Feeds
    Contact
    Now the CSS for the menu bar:
    @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: auto;      padding: 0;      list-style-type: none;      font-family: "Times New Roman", Times, serif;      font-size: medium;      font-weight: bold;      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: center;      cursor: pointer;      width: 108px;      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 0 0 50%;      padding: 0;      list-style-type: none;      font-size: 80%;      z-index: 1020;      cursor: default;      width: 108px;      float: none;      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: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      margin: -5% 0 0 95%;      z-index:1030; } /* 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: none;      top: 0;      z-index:1040; } /******************************************************************************* 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: #000;      padding: 5px 5px;      color: #FEFEFE;      text-decoration: none;       } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      background-color: #323232;      color: #FEFEFE; } /* 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: #323232;      color: #FEFEFE; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarDown.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarRight.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarDownHover.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarRightHover.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe {      position: absolute;      z-index: 1010;      filter:alpha(opacity:0.1); } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection {      ul.MenuBarHorizontal li.MenuBarItemIE      {           display: inline;           f\loat: left;           background: #FFF;      } } 
    And lastly the Css code for the whole thing...
    @charset "utf-8"; body  {      font-family: Verdana, Geneva, sans-serif;      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */      padding: 0;      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */      }       .twoColFixLtHdr #container {      width: 760px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */      margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */      border: 2px solid #000;      text-align: left; /* this overrides the text-align: center on the body element. */      }       .twoColFixLtHdr #header {            padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */      border: 0px solid #000;             } .twoColFixLtHdr #header h1 {      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */      padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */       } .twoColFixLtHdr #sidebar1 {      float: left; /* since this element is floated, a width must be given */      width: 200px;      font-size:12px;      color:#FEFEFE;      background: #000;      border-top-width: 1px;      border-right-width: 2px;      border-bottom-width: 2px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #000;      border-right-color: #660000;      border-bottom-color: #000;      border-left-color: #000;      padding-top: 1px;      padding-right: 0px;      padding-bottom: 1px;      padding-left: 1px; } .twoColFixLtHdr #mainContent {      margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */      background:#660000;      } .twoColFixLtHdr #videomainContent {      margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      background: #323232;      padding-left:100px      } .twoColFixLtHdr #singleframe {      background: #323232;      }       .twoColFixLtHdr #footer {      padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */      font-size:12px;      color:#FEFEFE;      background:#000;      border: 1px solid #000;            } .twoColFixLtHdr #footer p {      margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */      padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */      clear:both;     height:0;     font-size: 1px;     line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover {      text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none}   .red{     color:#4C0000;} .w1{font-size:14px;     color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{      float: left; /* since this element is floated, a width must be given */      width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */      padding: 0px 0px 0px 0px; }       .b{font-size:12px; color:#000000; } .topbtmmargin {      margin-top: 20px;      margin-bottom: 20px; } .SidebarPadding {      padding-top: 0px;      padding-right: 10px;      padding-bottom: 0px;      padding-left: 10px; } .FrontImage {      border: 5px ridge #323232;      float: left;      margin-right: 10px;      margin-bottom: 10px;      margin-top: 0px; } .FrontImageFltRgt {      border: 5px ridge #323232;     float: right;      margin-left: 10px;      margin-bottom: 10px;      margin-top: 20px; } .mapRgt {      float: right;      padding-left: 5px;      padding-bottom: 10px;      border: none;       } .sigRgt {      float: right;      padding-left: 5px;      margin-right: 60px;      padding-bottom: 10px;      margin-top: 10px;       } .textfntrgtcol {      padding-left: 200px;      font-size:12px;      color:#000000; } .textfntlftcol {      padding-right: 210px;      font-size:12px;      color:#000000; } .twoColFixLtHdr #container #mainContent ul li {      list-style-type: none;      list-style-position: outside;      list-style-image: url(images/blackbullet.gif); } .leftpicture {      border: 5px ridge #323232;      position: absolute;      z-index: 20;      height: 140px;      width: 180px;      margin-top: 10px;      margin-right: 10px;      margin-bottom: 10px;      margin-left: 210px;      left: 150px;      top: 326px; } img {      border-style: none; } .grooveimg {      border: groove; } #apDiv1 {      position:absolute;      width:200px;      height:115px;      z-index:1;      left: 0px;      top: 0px;      visibility: visible; } #apDiv2 {      position:absolute;      width:155px;      height:123px;      z-index:2;      left: 5px;      top: 4px;      visibility: visible; } #apDiv3 {      position:absolute;      width:335px;      height:122px;      z-index:3;      left: 173px;      top: 3px;      visibility: visible;      color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 {      position:absolute;      width:120px;      height:45px;      z-index:4;      left: 390px;      top: 105px;      visibility: visible; } #apDiv5 {      position:relative;      width:200px;      height:115px;      z-index:5; } .menubarWrapper {      background-color: #000;      float: left;      width: 100%; }

    Move the constructor for the menu bar up to read as follows
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    swfobject.registerObject("FlashID2");
    swfobject.registerObject("FlashID2");
    swfobject.registerObject("FlashID3");
    //-->
    </script>
    Gramps

  • Spry Horizontal Menu straddles header

    Problem: Spry Horizontal Menu straddles header
    I created a new page using
    "1 column elastic, centered, header and footer"
    I add a Spry Horizontal Menu within the "header" div.
    The menu does not display entirely within the grey header
    area.
    The menu straddles half in the header and half below the
    header.
    I believe this is because of the float i.e.
    "ul.MenuBarHorizontal li" has "float: left;".
    How do I make the menu stay entirely within the grey header
    content area?
    Thanks ahead of time.
    <div id="header">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Home</a> </li>
    <li><a href="#">People</a></li>
    </ul>
    </div>
    .oneColElsCtrHdr #header {
    background: #DDDDDD;
    padding: 10px;
    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;

    Hi,
    The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
    When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
    ul.MenuBarHorizontal
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        background-image: url(myImage.jpg); // rename the image to your own
        background-repeat: repeat;
        vertical-align: bottom;
        float: none;
        position: absolute;
        margin: auto;
    Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
    My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
    ul.MenuBarHorizontal
         background-image: url(myImage.jpg);
         background-repeat: repeat;
    Then attach this stylesheet to your document after the original stylesheet.
    If you cannot get the required result, merely play around with the rules within myStyles.css.
    I hope this helps.
    Ben

  • Spry Horizontal Menu query

    I am redesigning my current website:
    redesign
    and trying to implement an Spry Horizontal Menu but would like to
    make the sub-menu orient horizontally below the main menu rather
    than orient down vertically?
    Sample: http:www.carreonphotography.com/index3.html
    I have attached the code and any thoughts would be
    appreciated greatly folks.
    Thanks for your time and attention.
    Ed Carreon

    Hi,
    The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
    When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
    ul.MenuBarHorizontal
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        background-image: url(myImage.jpg); // rename the image to your own
        background-repeat: repeat;
        vertical-align: bottom;
        float: none;
        position: absolute;
        margin: auto;
    Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
    My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
    ul.MenuBarHorizontal
         background-image: url(myImage.jpg);
         background-repeat: repeat;
    Then attach this stylesheet to your document after the original stylesheet.
    If you cannot get the required result, merely play around with the rules within myStyles.css.
    I hope this helps.
    Ben

Maybe you are looking for

  • E-mail Discussion Ident

    Not a question, nothing awsome to catch the attention of the Pages Team peering over their cubicles, I'm a happy Pages camper not griping, but being glued to Pages Discussions, the daily input of e-mail is horrendous and takes up the in-box, sometime

  • Windows 7/8.1 2560x1440 resolution on external monitor.

    Hello, i have macbook pro 13 (late2013), i installed windows 8.1 and connected to my external monitor with 2560x1440 resolution.But windows allow to use maximum 2048x1152.I use minidisplayport to displayport adapter and have last drivers.Now i instal

  • Disk upgrade to Apple TV, Any News

    Well, my Apple TV is full and no I do not want to selectively choose which music, photo's or movies that I do not have access to. So how is Apple going to satisfy the customers whom have jumped in feet first to the Apple TV promise with either a box

  • Form - Bad value (Goods Issue Form)

    Hello, I'm trying to fill Goods Issue form programatically. But when I try to fill some values into the matrix I got two errors- Referenced work order does not exist. Form - Bad Value I can enter the same values by hand, it works without any problem.

  • Sync Purchased Songs wirelessly through iTunes App?

    I am getting an iPhone soon, and I was wondering if it was possible to go into iTunes on the iPhone, and sync the purchases I've made on my iTunes account to my phone, instead of connecting it up to my computer. The idea behind this is to save space