ERROR with Horizontal Spry Menu & IE 7 ONLY!

I created a new website with CS3 adding a horizontal Spry Menu across the top of the page.  I am having a problem with this menu in Internet Explorer 7 ONLY!  I don't have this problem with Firefox, Chrome or Safari.  I wouldn't care so much but IE is the dominant browser.  The site is: http://www.sunscapesolar.net.  The problem is that when you mouse over any of the top-level menu titles that have sub-menus below like: PRODUCTS, SYSTEMS, INCENTIVES, etc., the body text shifts down and I get a white box popping up that says "false." I've checked everything I know but since DW created the javascript code, I don't know where to go.  I have posted this problem three times and nobody has responded!  Someone has to know what's wrong!  Please help...  I don't want to create the site from scratch. . .
Thanks in advance...
Mike 

fixed it myself - please ignore

Similar Messages

  • Help! Error with DW Spry Menu ONLY in IE. . .

    I created my new website with DW CS3 and used a horizontal Spry Menu across the top. I am having a problem with the menu in Internet Explorer ONLY! I don't have the problem with Firefox, Chrome or Safari. I wouldn't care so much but IE is the dominant browser. The site is: http://www.sunscapesolar.net and the problem is that when you mouse over PRODUCTS, SYSTEMS or INCENTIVES, the body text moves down and I get a white box popping up that says "false."I've checked everything but since DW created the javascript code, I don't know where to go. So please help me...
    Thanks in advance...
    Mike
    [email protected]    

    I created my new website with DW CS3 and used a horizontal Spry Menu across the top. I am having a problem with the menu in Internet Explorer ONLY! I don't have the problem with Firefox, Chrome or Safari. I wouldn't care so much but IE is the dominant browser. The site is: http://www.sunscapesolar.net and the problem is that when you mouse over PRODUCTS, SYSTEMS or INCENTIVES, the body text moves down and I get a white box popping up that says "false."I've checked everything but since DW created the javascript code, I don't know where to go. So please help me...
    Thanks in advance...
    Mike
    [email protected]    

  • Problem with Horizontal Spry Menu

    Hi,
    I have trawled through the forum to see if I can find an answer to my problem, but couldnt locate one, so this is my first post.
    I recently built this website for my wifes business and was using a simple menu bar without any dropdowns, just to get the site up and running (healingthreads.com.au). Am now looking to do some enhancements and was looking to use a Spry Horizontal Menu Bar. All was going well in that I was able to insert the menu bar and get it in the right position, however the dropdowns below the top level items (ie. Item 1.1, Item 1.2 etc) are getting hidden behind one of the other DIV's and despite trying changing z-index values, am still not able to get the dropdowns to display in front of the main DIV. Have run out of ideas and am hoping the wisdom of the forum will be able to assist. I have the same problem on the Index page as well as the other pages on the site. The website is fairly basic at the moment and is simply promoting her courses and products.
    Unfortunately am not able to post live code to a server for you to test on, so best that I can do is post the code for a page and for the CSS sheets.  I have left the standard Spry code in place in the source code to show that the problem exists without and fancy changes that I have made to the Spry code. I have also removed the z-index properties that I had been playing around with. So, what I am attaching is the basic code that has the problem.
    Hope someone can help.
    Here is the source code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Healing Threads is an innovative practice on the NSW Central Coast offering workshops, group work, private consultations and also has a range of aromatherapy and handwoven products for sale" />
    <meta name="keywords" content="healing journeys, healing, transpersonal counselling, private consultations, aromatherapy, handwoven, workshops" />
    <title>Healing_Threads</title>
    <link href="Styles/healing_threads.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body
    <div id="container">
      <h1>Healing Threads: Healing Journeys, Group Work and Private Consultations</h1>
      <div id="Banner"><img src="images/HT_Banner_2.gif" alt="Banner" width="800" height="125" border="0" usemap="#Map2" />
        <map name="Map2" id="Map2">
          <area shape="rect" coords="67,12,770,113" href="index.html" />
        </map>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
            <ul>
              <li><a href="#">Item 1.1</a></li>
              <li><a href="#">Item 1.2</a></li>
              <li><a href="#">Item 1.3</a></li>
            </ul>
          </li>
          <li><a href="#">Item 2</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                <ul>
                  <li><a href="#">Item 3.1.1</a></li>
                  <li><a href="#">Item 3.1.2</a></li>
                </ul>
              </li>
              <li><a href="#">Item 3.2</a></li>
              <li><a href="#">Item 3.3</a></li>
            </ul>
          </li>
          <li><a href="#">Item 4</a></li>
        </ul>
      </div>
      <div id="background_image">
        <div id="Prod_Image"><img src="images/HT-Web-Site-HP-Side-ImageV3.jpg" width="200" height="470" alt="Products &amp; Services" /></div>
        <div id="main_text">
          <h5><a href="Workshops.html" class="htlinks">Healing Journeys</a></h5>
    <p>Combining story, meditation, art and ritual to help tap into your own inner wisdom for self growth and healing.</p>
          <h4><a href="Groups.html" class="htlinks">Group Work</a></h4>
          <p>A range of weekly group activities exploring story, dreams, masks and more.</p>
          <h4><a href="Consultations.html" class="htlinks">Private Consultations</a></h4>
          <p>Using a range of creative processes, including meditation, art, movement, story and ritual, for the best healing outcome for clients.</p>
          <h4><a href="Oils&amp;Sprays.html" class="htlinks">Aromatherapy Products</a></h4>
          <p>sCentred Therapies range of anointing oils, clearing sprays and perfumes that can be used to enhance meditation, ceremony and pleasure.</p>
          <h4><a href="Handwoven.html" class="htlinks">Handwoven Items</a></h4>
          <p>Handwoven products such as throws, wraps and scarves, created from stunning wools, silks and cottons.</p>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Here is the main CSS sheet
    @charset "UTF-8";
    /* CSS Document */
    #container {
    width: 968px;
    background: #CCCCFF;
    margin: 0 auto;
    padding-left: 0px;
    padding-right: 0px;
    overflow: scroll;
    height: 1200px;
    #Banner {
    width: 800px;
    background: #CCCCFF;
    margin: 0 auto;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    #background_image {
    background-image: url(../images/Coloured_Threads_Web.jpg);
    background-repeat: no-repeat;
    position: relative;
    height: 533px;
    width: 800px;
    margin: 0 auto;
    overflow: visible;
    #background_image_ws {
    background-image: ;
    background-repeat: no-repeat;
    position: relative;
    height: 1000px;
    width: 800px;
    margin: 0 auto;
    overflow: visible;
    #main_text {
    background-color: #FFF;
    width: 500px;
    margin-left: 0px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 52px;
    left: 269px;
    height: 470px;
    #main_text h4 {
    color: #7F7EB1;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 6px;
    #main_text p {
    color: #7F7EB1;
    font-size: 14px;
    font-family:Arial, Helvetica, sans-serif;
    margin-left: 6px;
    #main_text h5 {
    color: #7F7EB1;
    font-size: 16px;
    font-family:Arial, Helvetica, sans-serif;
    margin-left: 6px;
    #Prod_Image {
    background-color: #FFF;
    height: 300px;
    width: 200px;
    position: absolute;
    top: 53px;
    #Prod_Image,#main_text {
    float: left;
    #Prod_Image {
    margin-left: 35px;
    #main_text_ws {
    background-color: #FFF;
    width: 600px;
    height: 1000px;
    margin-left: 0px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 200px;
    #Prod_Image_ws {
    background-color: #FFF;
    height: 1000px;
    width: 200px;
    position: absolute;
    top: 0px;
    #Prod_Image_ws,#main_text_ws {
    float: left;
    #main_text_ws h4 {
    color: #7F7EB1;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 6px;
    font-size: 16px;
    #main_text_ws p {
    color: #7F7EB1;
    font-size: 14px;
    font-family:Arial, Helvetica, sans-serif;
    margin-left: 6px;
    #main_text_ws h5 {
    color: #7F7EB1;
    font-size: 14px;
    font-family:Arial, Helvetica, sans-serif;
    margin-left: 6px;
    #background_image_ws #main_text_ws p a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #7f7eb1;
    a.htlinks:link {color:#7f7eb1;}
    a.htlinks:visited {color:#7f7eb1;}
    a.htlinks:hover {color:#0d004c;}
    #container h1 {
    position: absolute;
    top: -500px;
    Here is the Spry CSS Sheet - note: I have not modified this in any way.
    @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: 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: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    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: #33C;
    color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    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;
    Am sure that this is something quite basic that I have missed, however as mentioned above, am out of ideas.
    Looking forward hopefully to your helpful suggestions.
    Regards,
    Healing Threads

    Gramps,
    Thanks for the prompt reply, greatly appreciated here in Sydney.
    Re your response. When I preview the page in both Safari and Firefox, the dropdowns are not visible, just the top layer Items.
    Dont understrand what is going on.
    Am I doing something wrong when I am previewing the file?
    RThanks,
    Healing Threads.

  • Issues in IE with horizontal spry menu

    Hi there,
    My horizontal menu is not working in IE(6 and up), but works perfect in Safari, Firefox, Opera.  In IE, the menu shifts to the right and shuffles everything along with it.
    Here is a sample page.  Can anyone help me???
    http://www.tmnevents.com/testing.html

    fixed it myself - please ignore

  • Help with a very simple horizontal Spry menu

    Hi,
    I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
    This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover.  The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
    What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over.  As I said, without the border it works perfect.
    Any suggestions will be appreciated.

    steve0308 wrote:
    Hi,
    I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
    This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover.  The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
    What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over.  As I said, without the border it works perfect.
    Any suggestions will be appreciated.
    You also have to apply the border to the 'a' css selector. If you just apply it to the 'a:hover' css selector then the tab will grow slightly bigger because its adding more width and height to the overall structure.

  • Horizontal spry menu style appears turned off when on the internet though can view it in live mode!?

    The style of the horizontal spry menu seems as to have been turned off when on the web though is visible and functioning on CS4 Dreamweaver design and live views. I have styled the spry menu and can view it in the properties section though the style setting is there on the internet it looks as if the styles have turned off and appears unformatted vertically when it should be a cascading horizontal menu bar. Not sure where the error is, I have looked at the coding and as I'm not the most experienced with spry.....
    this is the coding above the head.
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript">
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    I have noticed that SpryMenuBarHorizontal.css doesn't appear in the spry assets folder, does this matter? (not sure how to insert into the assets menu).  Any help would be greatly appreciated!

    thanks for testing it. I'm not sure how to proceed though as the css file is in my local_sites/spry assets folder for the website. I've tried to point it to other (copies of SpryMenuBarHorizontal.css) and spry assets folder externally from the site and again internally in the root folder and seems to make little or no difference.
    Your suggestion of what it should read,(sorry to sound so naive at all this) though would you mind giving a step-by-step guide on how to go about it? as I'm obviously missing something in the setup process.
    thanks again for your help.

  • Horizontal Spry Menu appears as bullet point list in IE8 and below - fine in firefox, chrome and IE9

    This one is breaking my brain! I have an horizontal spry menu bar in my website that renders correctly in all browsers except ie 8 and below where it appears like an unordered list - almost like no CSS had been applied at all. You can check out the site here http://www.webhance.com.au. The spry css looks like this:
    @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: 130%;
    cursor: default;
    width: auto;
    float:right;
    /* 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;
    cursor: pointer;
    width: 150px;
    float: right;
    text-align:center;
    font-family:"AvantGarde Bk BT";
    /* 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: 150px;
    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: 150px;
    /* 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-right: 1px solid #9fe2fd;
    text-align:center;
    font-family:"AvantGarde Bk BT";
    background-color:#4c859d;
    color:#FFF;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    border-right: 1px solid #9fe2fd;
    display: block;
    cursor: pointer;
    background-color: #4c859d;
    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
    background-color: #4c859d;
    color: #9cc9a0;
    /* 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: #4c859d;
    color: #9cc9a0;
    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;
    float: left;
    background: #FFF;
    The HTML for the section looks like this:
    <div class="header">
      <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html" id=button1>Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Services</a>
        <ul>
          <li><a href="design.html">Web Design</a>        </li>
          <li><a href="maintenance.html">Web Maintenance</a></li>
          <li><a href="social.html">Social Media</a></li>
        </ul>
      </li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a>    </li>
    </ul>
    <!-- end .header --></div>
    I really really need some help - hope someone out there can point me in the right direction :-)
    Julie

    Hi Gramps - thanks for getting back to me - I took advantage of your advice to others with some other issues I had and they worked a charm so I was really hoping to hear from you :-)
    Unfortunately removing media="only screen and (min-width: 769px) from the css call didn't resolve the problem.  Check it out on my index page www.webhance.com.au/index.html Any other ideas?
    Cheers, Julester

  • HELP PLEASE!!! Horizontal Spry Menu

    I'm having trouble with my horizontal spry menu. I have added
    it and it looks great in Firefox. No problems at all, exactly how I
    like it. But when previewed in Internet Explorer it doesn't show at
    all. There's nothing. I've inserted the "mark of the web." Nothing.
    I don't really know where I'm going wrong. I'm relatively new to
    Dreamweaver and am using CS4. Can someone please help?

    Thank you Beth,
    That has helped me a great deal, there is still a slight problem though... while the menus are falling vertically now they are not inline with the menu buttons, (slightly to the right each time).
    You suggested I upload the website to a server but I am not at this stage yet and I'm not sure how to do this either! I don't know if it's possible to help me without this? My code is still the same, the only difference now being that both ul.MenuBarHorizontal ul  and ul.MenuBarHorizontal ul li  have stated widths as you suggested; 8em.
    Maybe this will help show you the problem:
    I know this is really bad quality I think you can see how the sub menu isn't directly underneath the heading (highlighted in blue). I want the sub heading to be inline with the 'About us' heading, do you know how to do this?
    Thank very much for the help so far,
    Kyra

  • Level 2 Submenu problems - Horizontal Spry Menu

    Okay, I have successfully implemented a horizontal spry menu. Most links don't have drop downs but there are some that has submenus. For example.
    Main Link
       > Products
       > Services
              Service 1
              Service 2
              Service 3
    etc
    The 1st submenu works fine (i.e. the one that would show products and services) and the second level submenu links work okay as well (ie Service 1, 2 etc) BUT ONLY in Firefox, Safari and Chrome. I CANNOT for life nor money get the second submenu to work in ie8. It just doesn't show! I need help urgently!
    The site is in design process so there isn't a URL yet. If it would be helpful, I could upload everything onto my server so the files can be viewed. Just let me know what is required.
    Has anyone encountered anything like this before? All very weird...and needless to say...very annoying too.
    Thanks in advance for any suggestions.
    Ben

    Update - it's a problem with opacity!
    I wnated to have a submenu with 0.85 opacity. I had the following CSS in the file:
    ul.MenuBarHorizontal ul
    filter:alpha(opacity=85);
        -moz-opacity:0.85;
        -khtml-opacity: 0.85;
        opacity: 0.85;
    This resulted in the second submenu disappearing in IE8...but it worked okay in all the other browsers.
    Any idea for submenus with opacity in IE??
    Ben

  • Horizontal Spry Menu Breaks in IE6

    I have created an horizontal spry menu using the spry widget
    in DreamWeaver CS3. I would like the width of each menu item to
    adjust to the text (width: auto;) and that works fine in current
    browsers (FireFox, IE7, Opera, Netscape) but in IE6 the menu items
    are displayed vertically instead of horizontally. As soon as I give
    them a width, it displays appropriately in IE6, but that changes
    the look. You can see the page in question at
    http://www.inachordwebdesign.com/ccc/test.html
    Is there any way to work around this problem with the older
    IE versions?
    Any help would be greatly appreciated! Please let me know if
    I need to upload any code. This is one of my first posts, so I'm
    not sure what all I need to post.
    Thanks!

    I have updated the Spry Assets as suggested, but still have
    the same results. Removing the float:left for the menu bar doesn't
    help with the item alignment in IE6 and actually introduces a
    problem in the current version of Firefox, so that isn't the
    problem either.
    Any other thoughts? The only thing that seems to force the
    menu bar to display horizontally in IE is to have fixed widths for
    the list items in the unordered list (ul.MenuBarHorizontal li). As
    soon as I change that from a defined width to auto, or remove the
    width designation altogether, it falls back to a vertical
    arrangement in IE6, though it works in all the more recent browsers
    just fine. We'd rally prefer to let the list items size
    automatically, but if there is no way around it, I'll have to try
    to replicate that effect by assigning a different width to each
    item. That will add a lot of extra code, unfortunately.
    Thanks.

  • Menu bar not displaying inline with logo (Spry menu troubles - Extra Credit!)

    Coding Brothers and Sisters!
    Hope you all are well - would anyone please assist me to display inline the logo and menu bar at the following page?
         http://gratefulcreative.com/Andre_Madiz/index.html
    Superbonus, Adobe All-star points for help with my Spry Menu Bar, which is not showing submenus. I get an error message saying the following:
         This document contains Javascript code for a widget that no longer exists. If you don't remove the code, the browser might display Javascript errors when loading the page. Would you like Dreamweaver to find all the
         instances of the code for you?
         Widget: var Menu Bar 1 = New.Spry.Widget.MenuBar ("MenuBar1"; {imgdown:"SpryAssets/SpryMenuBarDownHover.gif",imgRight:"SpryAssets/SpryMenuBarRightHover .gif"});
    Thank you as always!
    Ken D
    Creative Director
    Grateful Creative
    www.gratefulcreative.com

    Use CSS floats.  Posted here with inline styles for expediency.  Ideally, you should set-up some re-usable classes for floats & clearing in your external style sheet.
    <div style="float:left; width:250px">
    <a href="http://www.andremadizmma.com"><img src="images/Bulldog_logo3.png" border="0"></a>
    </div>
    More on Floats:
    http://css.maxdesign.com.au/floatutorial/
    (='.'=)
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • Help with a Spry Menu Bar

    I'm having trouble with a Spry Menu Bar not displaying
    correctly in Internet Explorer, while it displays fine in every
    other browser I have available. I've done some searching on these
    boards, but the queries I've found with the same type of problem
    each has a knowledgeable person editing the code for the
    poster...and I can't seem to make heads or tails of it.
    So, below is my link. What you'll see if viewed in Explorer
    is that the "Clinics" listing and the "Services & Specialties"
    listing are each on the same horizontal line, rather than vertical
    like the rest of the menu. If anyone can help me in correcting this
    problem, I'd be very appreciative.
    Thanks in advance.
    http://www.chambershospital.com/temp/about.html

    Hello,
    You might try removing all of the <div> tags you
    inserted in the menu.
    This can happen if you select text in design view and use the
    "align" icons
    in the properties window instead of using CSS to align
    things.
    For example:
    <li>
    <div align="left"><<****REMOVE THIS
    <a href="clinics.html"
    class="MenuBarItemSubmenu">Clinics</a>
    <ul>
    <li><a href="clinic.html">Chambers
    Clinic</a></li>
    <li><a href="clinic7.html">Scenic 7
    Clinic</a></li>
    </ul>
    </div><<*** REMOVE THIS
    </li>
    So it looks like this:
    <li><a href="clinics.html"
    class="MenuBarItemSubmenu">Clinics</a>
    <ul>
    <li><a href="clinic.html">Chambers
    Clinic</a></li>
    <li><a href="clinic7.html">Scenic 7
    Clinic</a></li>
    </ul>
    </li>
    Repeat for all the other <div align="left"> and
    </div> tags in the menu.
    Take care,
    Tim
    "Zim74" <[email protected]> wrote in message
    news:fv4vc0$r0t$[email protected]..
    > I'm having trouble with a Spry Menu Bar not displaying
    correctly in
    > Internet
    > Explorer, while it displays fine in every other browser
    I have available.
    > I've
    > done some searching on these boards, but the queries
    I've found with the
    > same
    > type of problem each has a knowledgeable person editing
    the code for the
    > poster...and I can't seem to make heads or tails of it.
    >
    > So, below is my link. What you'll see if viewed in
    Explorer is that the
    > "Clinics" listing and the "Services & Specialties"
    listing are each on the
    > same
    > horizontal line, rather than vertical like the rest of
    the menu. If
    > anyone can
    > help me in correcting this problem, I'd be very
    appreciative.
    >
    > Thanks in advance.
    >
    >
    http://www.chambershospital.com/temp/about.html
    >
    >

  • Embedding a Web Gallery in a html page with a Spry menu

    I am trying to embed a web gallery I created in Bridge into a web page that has a spry menubar as part of it's code. I was unable to see the gallery on the page and removed the html code associated with the gallery and was trying to start again.
    Somewhere along the way, I started getting error messages regarding the spry menu. Although the menu continues to work, I was seeing the message in Dreamweaver which is unusual.
    This prompted me to wonder if the code for the creation of the web gallery would interfere in any way with the spry menu.
    I don't want to try again to embed without finding out about this. I fortunately had backups of my documents in time machine and no more error messages appear.
    Thank you.

    You should ask this question in the DreamWeaver forum instead. This is the Bridge forum.
    Also see this http://foundationphp.com/tutorials/gallery/embed1.php

  • Help with Horizontal Sub Menu Position

    I am building a horizontal spry menu, the default is set so that the submenu displays vertically.  However, I would like the submenu to display horizontally as well, so that it is flush with the bottom of the main menu.  Does anyone know how to do this?

    add this style rule to your page:
    <style type="text/css">
    <!--
    ul.MenuBarHorizontal ul {
        width: auto;
    -->
    </style>
    Ben

  • Horizontal spry menu floats around differently in FF and IE

    Hi there !!
    I would like to ask you about the following:
    When I use a horizontal spry menu and have it adjusted for FireFox, I get a result I can live with.
    Except that the submenu's under the heading 'cultuur' and 'projekt' do not slide down altogether, but are horizontal as well...
    How can I fix it so that they are positioned under its 'parent' ??
    But that's my minor question, actually...
    When I open my site in Internet Explorer (7 & 8) the spry menu looks different; it is far more stretched. First it also floated left, but I managed to fix that. The major problem is that the submenu's appear on the left of the page. I can't get them under their respective parents at all.
    Can you please help me with that?
    My site:
    www.mnette.nl
    (if you need more info, I'm glad to provide it )

    When I use the original SpryMenuBarHorizontal.css, your page behaves extremely well. I realise that you wish to customise the menu to suit your site, but these modifications are to be made under strict rules so that the cross browser functionality is not compromised.
    Have a look at the following 10 commandments http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
    May I suggest that you ressurrect the original style sheet and work your way from there making sure that you keep to the above commandments.
    If you still have problems, please come back here for further assistance.
    Go Aussies and Hup Holland!
    Ben

Maybe you are looking for