3 Replies Latest reply on May 8, 2012 8:00 AM by Elevate_Me

    SPRY Vertical Menu/Submenu positioning issue in IE


      I have updated an old "tabled" site that was generated from Fireworks to incorporate SPRY vertical menus. There are two seperate SPRY vertical menu bars on both the home page and contant pages. I though I had it perfect until I tested the site on a PC using IE (Chrome on the PC worked fine as well as all browsers on Mac).


      The issue I'm having is the submenu for the 2nd/right menu does not align with the parent menu, IE throws the submenu off to the upper right on the home page and off to the left on the content pages.


      The site is: stride.on.ca


      Any help is greatly appreciated!

        • 1. Re: SPRY Vertical Menu/Submenu positioning issue in IE
          Nancy OShea Adobe Community Professional & MVP

          To begin with, you have no document type declaration (DTD) on your page(s).  This sends IE into Quirks Mode which is geek speak for total confusion.  Why no document type?  Probably because you relied on Fireworks to generate your code.  A bad idea.   Fireworks doesn't generate terrific code.


          To fix the first problem in DW, go to Modify > Page Properties (Ctrl+J) > Title/Encoding > Select a document type (DTD) that fits your coding skills.  I recommend HTML 4 or XHTML 1 Transitional.   Save.  Repeat with other site pages.


          The other problem I see is you're using a pre-release version of the Spry Menu from 2006.  You will get better cross browser results if you use Spry Menu 2.0 from the Adobe Exchange.  Log-in with Widget Browser to grab it.






          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 




          • 2. Re: SPRY Vertical Menu/Submenu positioning issue in IE
            BenPleysier Adobe Community Professional & MVP

            To add to Nancy's suggestion, but staying with the original SpryMenuBar do the following:


            1. Add a DOCTYPE like <!doctype html> on the very first line of your document

            2. Re-instate the original SpryMenuBarVertical.css

            3. Remove the 2 in <ul id="MenuBar2" class="MenuBarVertical2">

            4. Remove the DIV element <div align="right">. Don't forget the ending DIV tag </div>

            5. Add the following style rules to override the original CSS. You can place these rules at the bottom of SpryMenuBarVertical.css

            ul.MenuBarVertical {width: 16em; position: relative;} /* change width and add position so that we can use z-index */
            ul.MenuBarVertical li {width: 16em;} /* change width same as the container */
            ul.MenuBarVertical a {background-color: #3365CC; color: #FFF;} /* change colour from gray in original CSS */
            ul#MenuBar1.MenuBarVertical {z-index: 20;} /* set a high index to override index in 2nd menu bar */
            ul#MenuBar2.MenuBarVertical {z-index: 1;} /* set low index so that it can be overridden by 1st menu bar */
            ul#MenuBar2.MenuBarVertical a {background-color: #6699FC;} /* set colour for 2nd menu bar */




            • 3. Re: SPRY Vertical Menu/Submenu positioning issue in IE
              Elevate_Me Level 1

              Thank you both very, very much for your help and suggestions.  Still working at implementing them - first crack didn't take and had to move the files into a new directory until I get this working (www.stride.on.ca/2012). Will be updating the widget as soon as possible. Unfortunately this is being done on the side, and I can't concentrate large amounts of time to it consectutively.


              Gramps, you truely are altrustic!


              Thank you and I'll continue to try to resolve the issue.