8 Replies Latest reply: Jun 14, 2011 6:04 PM by thersher RSS

    Submenu not displaying properly in IE

    thersher Community Member

      My submenu is way off on the right side of the page in IE, and I can't figure out why. I know I've had this problem before, but my previous fix doesn't seem to be working.....assuming I found the correct fix I did the last time. Not sure about that .

       

      I compared the CSS from another site that is working properly in IE, but I can't find the difference, so I need another set of eyes.

       

      The URL is www.veir.net, I'm using CS4.

       

      Thank you!

        • 1. Re: Submenu not displaying properly in IE
          Ben Pleysier CommunityMVP

          The modified SpryMenuBarHorizontal.css is so much beyound recognition that I advise you to remove it and re-instate the original CSS.

           

          Then read http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one before adding the following to your document. Please leave the original SpryMenuBarHorizontal.css in tact.

          <style>
          ul.MenuBarHorizontal {
               width: 555px;
               height: 42px;
               font-size: 80%;
               background-image: url(http://www.veir.net/images/nav_bg.png);
               font-weight: bold;
               float: right;
          }
          ul.MenuBarHorizontal li {
               width: 16.6%;
               margin: 4px 0 0 0;
          }
          ul.MenuBarHorizontal ul {
               width: 15.5em;
               margin-top: 7px;
          }
          ul.MenuBarHorizontal ul li {
               margin: 0;
          }
          ul.MenuBarHorizontal a  {
               color: #FFF;
               text-align: center;
               background-color: transparent;
          }
          ul.MenuBarHorizontal ul li a {
               background: #154B84;
               width: 14em;
               text-align: left;
          }
          ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
               background-color: transparent;
               color: #F7E01E;
          }
          ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
               background-color: transparent;
               color: #F7E01E;
          }
          @media screen, projection {
               ul.MenuBarHorizontal li.MenuBarItemIE      {
                    background: transparent;
               }
          }
          </style>
          
          

           

          Gramps

          • 2. Re: Submenu not displaying properly in IE
            thersher Community Member

            How am I supposed to customize the menu then if I have to leave it intact?

             

            I figured out what the problem was, in this case. It was the second ul.MenuBarHorizontal ul, where I had put the placement of the sub menu. This is what confused me-

             

            If you go to the Adobe Live Docs and read about Spry menus, for positioning the submenus, this is what it tells you:

             

            Position submenus

            The position of Spry Menu Bar submenus is controlled by the margin property on submenu ul tags.

            1. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
            2. Change the margin: -5% 0 0 95%; default values to the desired values.

            So, my default spry CSS has this option under  ul.MenuBarHorizontal ul ul, NOT ul.MenuBarHorizontal ul, so I added it to the 2nd ul.MenuBarHorizontal ul where it actually had an effect. It had no effect if I put it under the first one either.

            If I change the position under ul.MenuBarHorizontal ul ul, where it is by default, it has no effect.

            How do I change the position of the sub menu then, because that was my main purpose, and now I am right back where I started?

            Also, I know you've told me before to not add margin or padding to some places, but then how do I position the menus exactly where I want them? If I take out the margin and padding on the top selector, then my menu is not where I want it, even with a float: right.
            • 3. Re: Submenu not displaying properly in IE
              Ben Pleysier CommunityMVP

              How am I supposed to customize the menu then if I have to leave it intact?

              By using overriding style rules as I described earlier

              I figured out what the problem was, in this case. It was the second ul.MenuBarHorizontal ul, where I had put the placement of the sub menu. This is what confused me-

               

              If you go to the Adobe Live Docs and read about Spry menus, for positioning the submenus, this is what it tells you:

               

              Position submenus

              The position of Spry Menu Bar submenus is controlled by the margin property on submenu ul tags.

              1. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
              2. Change the margin: -5% 0 0 95%; default values to the desired values.

              So, my default spry CSS has this option under  ul.MenuBarHorizontal ul ul, NOT ul.MenuBarHorizontal ul, so I added it to the 2nd ul.MenuBarHorizontal ul where it actually had an effect. It had no effect if I put it under the first one either.

              If I change the position under ul.MenuBarHorizontal ul ul, where it is by default, it has no effect.

              How do I change the position of the sub menu then, because that was my main purpose, and now I am right back where I started?

              Also, I know you've told me before to not add margin or padding to some places, but then how do I position the menus exactly where I want them? If I take out the margin and padding on the top selector, then my menu is not where I want it, even with a float: right.

              I am not sure what you are getting at. Have you tried my solution or are you changing your question?

               

              Gramps

              • 4. Re: Submenu not displaying properly in IE
                thersher Community Member

                So are you saying that I should add your overring style rules to the CSS, instead of changing those elements in the original CSS? I didn't think you could do that. And the Adobe documentation says to change the CSS, not add to it, so I'm really confused now.

                 

                 

                I guess I'm changing my question then.

                 

                Look at the location of the drop down menu where it is now. I want it moved over to the right a little bit.

                 

                By looking at the Spry help in Adobe Live Docs, they say to do this:

                 

                1. ul.MenuBarHorizontal ul rule.
                2. Change the margin: -5% 0 0 95%; default values to the desired values.

                 

                However, this option is not available in my default CSS. Changing the margin default values is only available in the ul.MenuBarHorizontal ul ul

                rule, however it has no effect when I change it here. I'm not sure why the default CSS isn't as it's described in the Adobe documentation.

                 

                So, my question is this:

                 

                How do I change the position of the sub menus without screwing up the CSS then? The only thing that works for me ends up breaking it in IE.

                • 5. Re: Submenu not displaying properly in IE
                  Ben Pleysier CommunityMVP

                  I guess that puts you in a bit of a dilemma. You have the choice of waiting for Adobe to answer your question or you can try my solution.

                   

                   

                  To help you in the decision making process, please copy and paste the following code in a new document and view the result in IE. Make sure you do link the document to a virgin copy of SpryMenuBarHorizontal.css

                   

                  <!DOCTYPE HTML>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <title>Untitled Document</title>
                  <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
                  <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
                  <style>
                  ul.MenuBarHorizontal {
                       width: 555px;
                       height: 42px;
                       font-size: 80%;
                       background-image: url(http://www.veir.net/images/nav_bg.png);
                       font-weight: bold;
                       float: right;
                  }
                  ul.MenuBarHorizontal li {
                       width: 16.6%;
                       margin: 4px 0 0 0;
                  }
                  ul.MenuBarHorizontal ul {
                       width: 15.5em;
                       margin-top: 7px;
                  }
                  ul.MenuBarHorizontal ul li {
                       margin: 0;
                  }
                  ul.MenuBarHorizontal a  {
                       color: #FFF;
                       text-align: center;
                       background-color: transparent;
                  }
                  ul.MenuBarHorizontal ul li a {
                       background: #154B84;
                       width: 14em;
                       text-align: left;
                  }
                  ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
                       background-color: transparent;
                       color: #F7E01E;
                  }
                  ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
                       background-color: transparent;
                       color: #F7E01E;
                  }
                  @media screen, projection {
                       ul.MenuBarHorizontal li.MenuBarItemIE      {
                            background: transparent;
                       }
                  }
                  </style>
                  </head>

                  <body>
                  <ul id="MenuBar1" class="MenuBarHorizontal">
                        <li><a href="services.html" title="Services" class="MenuBarItemSubmenu">Services</a>
                          <ul>
                            <li><a href="esa.html" title="Phase I &amp; Phase II ESA">Phase I &amp; Phase II ESA</a></li>

                            <li><a href="situ.html" title="SITU Treatment &amp; Remediation">SITU Treatment &amp; Remediation</a></li>
                            <li><a href="ust_removals.html" title="UST Removals &amp; Remediation">UST Removals</a></li>
                          </ul>
                        </li>
                        <li><a href="equipment.html" title="Equipment">Equipment</a></li>
                        <li><a href="projects.html" title="Projects">Projects</a>      </li>

                        <li><a href="clients.html" title="Our Clients">Our Clients</a></li>
                        <li><a href="contact.html" title="Contact Us">Contact</a></li>
                        <li><a href="index.html" title="Home">Home</a></li></ul>
                  <script type="text/javascript">
                  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
                  </script>
                  </body>
                  </html>

                   

                  Cheers,

                   

                  Gramps

                  • 6. Re: Submenu not displaying properly in IE
                    thersher Community Member

                    Okay, I did what you asked, only I copied/pasted in to my DW template. It's not much better than what I had. Actually, it's worse. The drop down is further to the left and further down (my purpose was to move it over to the right a bit so it would be offset from the parent item a little), when you mouse over it the background goes to transparent and you can't see what you're hovering over, and one item in the menu is wrapped to 2 lines. You can see the changes for yourself. www.veir.net.

                     

                    Why does it work on this site then? www.rainbowmorganhorseassoc.com I did the same thing with the ul. MenuBarHorizontal ul ul, that I did here, only it works in IE, and for the life of me, I can't figure out why.

                     

                    Also, why is the information on this page from Adobe incorrect then? http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US

                     

                    It says to alter the margin position on the ul. MenuBarHorizontal ul, but those margins aren't there in either location of the virgin CSS.

                     

                    Here's what I copied/pasted from the virgin CSS -

                     

                    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
                    ul.MenuBarHorizontal ul ul
                    {
                        position: absolute;
                        margin: -5% 0 0 95%;

                     

                    Please explain this to me, because I'm just trying to figure this out and learn it once and for all.

                     

                    And why can't I edit the original CSS? I do it all the time and most of the time my menus don't break.

                     

                    Thank you for your help,

                     

                    Very Confused

                    • 7. Re: Submenu not displaying properly in IE
                      Ben Pleysier CommunityMVP

                      Just once more and I promise I will not bother you again.

                       

                      I repeat what I said

                      To help you in the decision making process, please copy and paste the following code in a new document and view the result in IE. Make sure you do link the document to a virgin copy of SpryMenuBarHorizontal.css

                       

                      Gramps

                      • 8. Re: Submenu not displaying properly in IE
                        thersher Community Member

                        http://www.veir.net/untitled-1.html

                         

                        It still doesn't help me. The sub menu is not where I want it. This is linked to a virgin copy of the CSS. I renamed the old spry assets folder, installed a new spry and did not alter it in any way, and it is linked in this document. What do I need to do to the overrides to get the submenu up and over to the right.

                         

                        Is there something else I'm supposed to be doing that I'm not? I've tried this in my actual page, and floating it right overflows my main content div and it's not positioned correctly.

                         

                        Also, it would really help me out immensely, if you would be so nice as to answer my other questions, so I don't keep running into this problem, and then I won't have to bother you any more.

                         

                        Thank you.