2 Replies Latest reply on Jun 2, 2010 7:40 AM by james.belsher

    Spry Drop Down Problem in Internet Explorer

    james.belsher

      I have built my spry drop down and it is working in all browsers except for IE.  I really need help with this. Attached is my code or you can view it at roemtech.com/menubarattempt.html.  It is rendering it vertically and stacking the buttons on top of each other.  Check it out in Internet explorer to see what I mean. Thanks so much for the help.

       

      JBelsher

       

      <!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" />

      <title>Template Model</title>

      <link href="webelements.css" rel="stylesheet" type="text/css" />

      <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

      <style type="text/css">

      .BulletAlignment { text-align: left;

      }

      </style>

      </head>

       

      <body>

      <div class="container">

        <div class="header">

          <div align="right" class="FirstNameText"><strong><em>The First Name in Classroom Audio Systems</em></strong></div>

          <div style="background-color:#000; width:1024px; float: left;">

            <div>

      <ul id="DropDown" class="MenuBarHorizontal">

                          <li><a href="index.html">Home</a></li>

                <li><a href="Classroom-Audio-Systems.html" class="MenuBarItemSubmenu">Products</a>

                  <ul>

                    <li><a href="classroom-audio-amplifiers.html">Amplifiers</a></li>

                    <li><a href="classroom-audio-speakers.html">Speakers</a></li>

                    <li><a href="classroom-audio-accessories.html">Accessories</a></li>

                  </ul>

                </li>

                <li><a href="classroom-audio-specs.html">Specs</a> </li>

                <li><a href="classroom-audio-tips.html">Tech Tips</a></li>

                <li><a href="classroom-audio-contacts.html">Contacts</a></li>

              </ul>

            </div>

          </div>

          <div style="height:30px;"></div>

        </div>

       

      <!--End Header-->

       

      </div>

       

      <!--End of Content-->

        <div class="footer"><span style="padding-top:10px; font-size: 12px;">&copy; 2010 Roemtech LLC, All Rights Reserved 1491 N. Kealy Ave. Suite 8, Lewisville, Texas 75057</span></div>

      </div>

      <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("DropDown", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

        </script>

      </body>

      </html>

        • 1. Re: Spry Drop Down Problem in Internet Explorer
          Mylenium Most Valuable Participant

          What version of IE? You may simply need to edit some of the CSS rules. has nothing to do with the page code itself...

           

          Mylenium

          • 2. Re: Spry Drop Down Problem in Internet Explorer
            james.belsher Level 1

            It needs to be versions 6 and higher of Internet Explorer.  I will attach my CSS below.  Just note all of the notes are still in there from dreamweaver.  Thanks for looking at this.

             

            James

             

             

            @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: 120%;

            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: 120px;

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

            cursor: default;

            width: 8.5em;

            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.5em;

            }

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

            {

            }

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

            ul.MenuBarHorizontal a

            {

            display: block;

            cursor: pointer;

            background-color: #000;

            padding: 0.5em 0.75em;

            color: #09F;

            text-decoration: none;

            text-align: center;

            }

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

            color: #09F;

            font-size: 100%;

            text-align: center;

            }

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

            color: #09F;

            text-align: center;

            }

             

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

             

            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: repeat-x;

            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: none;

            background: #FFF;

            }

            }