3 Replies Latest reply on Nov 5, 2008 4:49 PM by Newsgroup_User

    Spry Menubar- reverse order in IE

    Janell1 Level 1
      Hi,
      Not sure what is causing this.
      I captured my Spry Horizontal MenuBar as an Asset so I can quickly update it and when I hit save, it updates all the pages that use the menu.
      However, it appears as: "About"--"Training"---etc --"Contact" in Firefox, but in IE it is backwards, the menu buttons read: "Contact"--"Training"--"About".
      Website Link

      Any clues you can give me to get it to read the same way in all browsers would be appreciated.
      Thanks,
      Janell
        • 1. Re: Spry Menubar- reverse order in IE
          Level 7
          Hello,

          FireFox has it right technically.
          Floated elements are listed in the code above the element they will float
          next to.
          Contact comes before Shop in your code, so Contact will go to the right of
          Shop.
          Shop comes before News, so Shop will go to the right of News.
          And so on through About, which is at the bottom so everything else above it
          goes to the right of it.

          Change float: right to float:left like so:

          ul.MenuBarHorizontal li
          {
          padding: 0;
          list-style-type: none;
          font-size: 12px;
          position: relative;
          cursor: pointer;
          width: 7em;
          float: left;
          color: #FFFFFF;
          margin: 0;
          }

          Note that text-align:center is also removed.
          Text-align:center does more than just align text center in IE.
          It also aligns the nested UL (the dropdowns) within the LI to the center,
          which is why in IE they don't drop down directly below the LI like they do
          in FireFox.
          The left edge of the UL (dropdown) is aligned to the center of the LI it
          drops down under because of the use of text-align:center in the LI CSS.

          The correct way to center the text in the Spry menu is to add
          text-align:center to the link CSS, like so:

          ul.MenuBarHorizontal a
          {
          display: block;
          cursor: pointer;
          padding: 0.5em 0.75em;
          color: #fff;
          text-decoration: none;
          background-image: url(../images/basic_images/menu_gradient.jpg);
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-right-style: outset;
          border-bottom-style: solid;
          border-left-style: solid;
          border-right-color: #999999;
          border-bottom-color: #333399;
          border-left-color: #333399;
          text-align:center;
          }

          Now all you have to do is reverse the order of your menu LI in the HTML code
          so that About comes first, then Personal Training, then Classes and so on.
          About will be left of PT, PT will be left of Classes, etc.

          Take care,
          Tim




          "Janell1" <webforumsuser@macromedia.com> wrote in message
          news:geqnu6$mfo$1@forums.macromedia.com...
          > Hi,
          > Not sure what is causing this.
          > I captured my Spry Horizontal MenuBar as an Asset so I can quickly update
          > it
          > and when I hit save, it updates all the pages that use the menu.
          > However, it appears as: "About"--"Training"---etc --"Contact" in Firefox,
          > but
          > in IE it is backwards, the menu buttons read:
          > "Contact"--"Training"--"About".
          > http://www.maverickfitness.com
          >
          > Any clues you can give me to get it to read the same way in all browsers
          > would
          > be appreciated.
          > Thanks,
          > Janell
          >


          • 2. Re: Spry Menubar- reverse order in IE
            Janell1 Level 1
            Absolutely Perfect. Thank you so very much for taking time to figure this out for me and write the code. You are a lovely person.
            Cheers,
            Janell
            • 3. Re: Spry Menubar- reverse order in IE
              Level 7
              You're Welcome.
              Happy to help.

              Tim
              "Janell1" <webforumsuser@macromedia.com> wrote in message
              news:get1lu$33m$1@forums.macromedia.com...
              > Absolutely Perfect. Thank you so very much for taking time to figure this
              > out for me and write the code. You are a lovely person.
              > Cheers,
              > Janell