Skip navigation
Currently Being Moderated

SPRY Vertical Menu/Submenu positioning issue in IE

May 5, 2012 7:15 AM

Tags: #problem #help #issue #internet #spry #explorer #submenus #menu #bar #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:


Any help is greatly appreciated!

  • Currently Being Moderated
    May 5, 2012 4:48 PM   in reply to Elevate_Me

    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

    Mark as:
  • Currently Being Moderated
    May 5, 2012 9:37 PM   in reply to Elevate_Me

    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 */




    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points