Skip navigation
bryankook
Currently Being Moderated

Spry Menu Bar Bug in IE10

Mar 26, 2013 2:47 AM

Tags: #help #html #dreamweaver #spry #css #layout #internet_explorer #cs6 #spry_menu_bar #ie10 #menubar_behavior

Hi guys! 

I have spent ours looking for an answer to my question in this forum and elsewhere, but to not bore you: Website works fine, but the Submenu (below "Locomotives") pops up way too low in IE. I tried a few things but ended up discarding changes.

 

I hope you may be able to find the error!

 

Thank you in advance!   

 

Website:

http://centurius.de/html/engl/WWA_engl.html

 

Code:

ul.MenuBarHorizontal

{

          margin: 0 auto;

          padding: 0;

          list-style-type: none;

          font-size: 100%;

          cursor: default;

          width: 800px;

}

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

          padding: 0;

          list-style-type: none;

          font-size: 100%;

          position: relative;

          text-align: center;

          cursor: pointer;

          width: 130px;

          float: left;

          white-space: nowrap;

}

/* 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: 12em;

          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;

  margin: 5% 0 0 0%;

 

}

/* Menu item containers are same fixed width as parent */

ul.MenuBarHorizontal ul li

{

          width: 12em;

          text-align:left;

}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

ul.MenuBarHorizontal ul ul

{

          position: relative;

          margin: -5% 0 0 100%;

}

/* 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 #EFC39C;

 

}

/* Menu items are a light gray block with padding and no text decoration */

ul.MenuBarHorizontal a

{

          display: block;

          cursor: pointer;

          background-color: #d8dffc;

          padding: 0px 0.75em;

          color: #055CA8;

          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: #055CA8;

}

/* 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: #EFC39C;

          color: #055CA8;

}

 

 

/********************************************************************* **********

 

 

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;

          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;

          }

}

 

Nachricht geändert durch bryankook

 
Replies
  • Currently Being Moderated
    Mar 26, 2013 3:37 AM   in reply to bryankook

    Add/modify

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {

        left: auto;

        margin: 0;

    }

    ul.MenuBarHorizontal ul ul {

       position: absolute;

        margin: -5% 0 0 100%;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 5:14 AM   in reply to bryankook

    bryankook wrote:

     

    Thank you, but now, the menu appears on the second horizontal dividing line. I would like it to appear (as it did in Chrome and Firefox before) a few pixels below that dividing line. I now tried to change the margin: 0; to margin: 5 0 0 0; but that does not change anything.  Thanks again for your quick help!

    Try margin:5px 0 0 0; - you must have units on all non-zero values.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 5:25 AM   in reply to bryankook

    Hello Bryan (Klaus?),

     

    there is an interesting form of appearance using IE10's "Compatibility View" (Kompatibilitätsansicht):

     

    drSpryLOk.JPG

     

    It doesn't look all to bad, or?

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 3:22 PM   in reply to hans-g.

    Hi All

     

    I have a related issue with Spry sub-menu and IE10.  The sub-menu instead of showing directly below the main navigation only show and coninues across the screen - see screen grab below.

     

    The navigation shows fine in Firefox, Safari, Chrome, Opera and older versions of IE.  It seems that IE10 is the only problem browser.  Can anyone point me in the right direction to fix this issue.

     

    Many thanks.

     

    See link www.havering-sfc.ac.uk/web/home.cfm

     

    screehshot.jpg

     

    This is the .css code

     

    @charset "UTF-8";

     

     

     

     

    ul.MenuBarHorizontal

    {

              margin: 0;

              padding: 0;

              opacity:80%;

              list-style-type: none;

              font-size: 93%;

              cursor: default;

              /*width: auto !important;*/

    }

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

    {

              /*display:inline-block;*/

              margin: 0;

              padding: 0;

              list-style-type: none;

              font-size: 92%;

              opacity:80%;

              position: relative;

              text-align: left;

              cursor: pointer;

              width: 20%;

              float: left;

              font-family:Century Gothic, Arial, Helvetica, sans-serif;

    }

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

    {

              display:block;

              margin: 0;

              padding: 0;

              list-style-type: none;

              font-size: 100%;

              opacity:80%;

              z-index: 1020;

              cursor: default;

              width:inherit;

              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;

              background-color:#999;

              opacity:80%;

     

     

    }

    /* Menu item containers are same fixed width as parent */

    ul.MenuBarHorizontal ul li

    {

              width: 100% !important;

    background-color:#999;

    opacity:80%;

    padding:5px 0;

    }

    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

    ul.MenuBarHorizontal ul ul

    {

              position: absolute;

              margin: 0 5% 2% 99%;

    }

    /* 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:#F3551F;*/

              padding: 0.4em 0.75em;

              color: #FFF;

              opacity:80%;

              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:#FC0;

              color: #FFF;

              opacity:80%;

    }

    /* 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:#F90;

              color: #FFF;

              opacity:80%;

    }

     

     

    /********************************************************************* **********

     

     

    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);

    }

     

     

     

     

     

    Jill Hughes

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 3:28 PM   in reply to haveringsfc

    Spry is dead.  Owing to it's age and lack of development for several years, Adobe finally abandoned the framework late last year.   IMO, trying to get Spry to work right in IE10, Touch Screen devices and responsive layouts is not worth the effort.  Time to find a better menu system.  See links below:

     

    Pop Menu Magic 3 (new commercial extension for DW)

    http://www.projectseven.com/products/menusystems/pmm2/

     

    jQuery Mega Menus

    http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/ex amples/

     

    jQuery Superfish

    http://users.tpg.com.au/j_birch/plugins/superfish/

     

    10 Responsive Menus

    http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and -tutorials/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 3:52 PM   in reply to Nancy O.

    Hi Nancy

     

    Thank you for that.

     

    I'll take a look at the options you mentioned above.

     

    Jill H

     
    |
    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