Skip navigation
Currently Being Moderated

Spry Menu Bar 2.0 and positioning of arrows

Jul 25, 2012 12:56 PM

Hello again,

 

I'm now trying to incorporate Spry Menu Bar 2.0 into a client site, using CS6. Two things are occurring: in Live View, for long lines of menu text, the text wraps to a second line (as I would prefer) and the arrows to submenus line up in a readable fashion. But when I view it in IE or Firefox, the text spills outside (off to the right) of the vertical menu container and the submenu arrows are hidden underneath the text. As far as width, I've tried auto and inherit.

 

So, out of frustration I finally decided I would just shorten my menu text to solve the spilling over problem, and  a set pixel width that accommodated my longest line of text. But still, even if the text just fills the container, the arrow is hidden underneath the text. I'm pulling my hair out trying to figure out how to adjust the positioning of the arrow so that it's off to the far right, as it should be. I assume it is this set of rules that controls the arrow:

 

}

.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{

    background-image:url("images/ArrowMenuRight.gif");

    background-position:right center;

    background-repeat:no-repeat;

}

.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{

    background-image:url("images/ArrowMenuRight.gif");

    background-position:right center;

    background-repeat:no-repeat;

}

.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{

    background-image:url("images/ArrowMenuRight.gif");

    background-position:right center;

    background-repeat:no-repeat;

}

 

...but I don't know how to adjust these to bump the arrow over. Any ideas out there?

 

Ideally, I'd like to get back to wrapping my menu text as well, and I don't understand why it appears this way in Live View but not in a browser. But I'll settle for the arrow in the correct position as second prize. Thanks for your help,

 

Gail

 
Replies
  • Currently Being Moderated
    Jul 25, 2012 5:05 PM   in reply to gbergan52

    Gail,

     

    You may want to check my posting today regarding Spry Menubar 2 horizontal menus.  If you have submenus that are two levels deep, your customers are likely going to have problems with IE 8 and IE 9. 

     

    http://www.gerberanalytics.com/tennis/tennis_header_test.php

     

    As I mentioned in my posting, this is a known problem at Adobe and they do not have a solution for it (other than for us to tell our customers to switch to a different browser).

     

    Regards,

    Scott

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 6:14 PM   in reply to Scott - Columbus, OH

    @Scott,

     

    When you tell a story, tell the whole story including the fact that the page that you link to is SERIOUSLY FLAWED. I have never seen so many errors on a simple page.

     

    This sends IE into Quirks Mode as in

    _Capture.jpg

     

    Now, I know that the MenuBar does work in IE when installed properly, so whatever others say, be they so-called employees or not, they are wrong.

     

    GRUMPS!!!

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 6:24 PM   in reply to gbergan52

    @Gail,

     

    Please provide a link to the site so that I can help you.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 7:39 PM   in reply to Ben Pleysier

    @Gail

     

    Sorry, I decided to spend a bit more time on your problem and made a couple of changes as per highlighted

    #MenuBar  .MenuItem  .MenuItemLabel {

        text-align: center;

        line-height: 1.4em;

        color: #333333;

        background-color: #cccccc;

        padding: 6px 15px 6px 39px;

        width: 10em; /* set to suit */

        /*width:auto;*/ /* or delete*/

        white-space: normal; /* add this line */

    }

    You can see it working here http://pleysier.com.au/SpryMenuBar2/. Try it in IE where Scott seems to have a problem and also try it in a touch screen device.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 9:42 PM   in reply to gbergan52

    It looks like I did not realise that you are using a vertical menu bar. I have been working on a horizontal bar, hence the example will not work for you.

     

    Gramps

     
    |
    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