7 Replies Latest reply: Apr 13, 2012 2:44 PM by RepulseMonkey RSS

    Text has different 'weights' in Spry Menu

    RepulseMonkey

      Here's the url:  http://davidcoshdesign.com/nea/

       

      If you go to 'Lighting' > Functional   You'll see the text looks rather fuzzy in the second submenu.

       

      Also, the submenus in 'Audio' and Control' look different from those in 'Lighting'.

       

      Any clues, greatfully received.  Can't wait for 'Muse' to take off!

       

      RP

        • 1. Re: Text has different 'weights' in Spry Menu
          osgood_ MVP

          Set the font size in your spry horizontal css file. At the moment I don't know what font-size the menu is being displayed at because nothing it set so it's most likely that the text is inheriting a font size from your main style sheet and you have some very small stuff in that....9px. At 9px the text will look fuzzy. I don't recommend going down below 11px. You can use 10px for unimportant text, like 'copyright' or 'terms'

          • 2. Re: Text has different 'weights' in Spry Menu
            RepulseMonkey Community Member

            Thanks, I'll give it a try.  Let you know how I get on.

             

            RP

            • 3. Re: Text has different 'weights' in Spry Menu
              RepulseMonkey Community Member

              Hi osgood_ I tried setting a text size in the ul.MenuBarHorizontal css rule, with no effect.

               

              The text in the secondary submenu's also seems to be split into two lines when viewed in a browser.  In Dreamweaver, it all looks OK.

               

              Very strange.  Any other thoughts always appreciated.

               

              RP

              • 4. Re: Text has different 'weights' in Spry Menu
                osgood_ MVP

                Heres your problem: Close the css selector with a bracket } which is currently missing and comment out text-indent and word-spacing (as shown below)

                 

                #navigation {

                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                    font-size: 9px;

                    height: 29px;

                    width: 450px;

                    float: right;

                    margin: 0px;

                    text-decoration: none;

                    border-top-width: 0px;

                    border-right-width: 0px;

                    border-bottom-width: 0px;

                    border-left-width: 0px;

                    position: relative;

                    right: 37px;

                    top: -50px;

                    color: #FFF;

                    text-align: left;

                    /* text-indent: 15px;*/

                    padding-top: 21px;

                    padding-right: 0px;

                    padding-bottom: 0px;

                    padding-left: 0px;

                   /*  word-spacing: 27px; */

                 

                 

                Delete the following css which appears after the selector above

                 

                    ul.MenuBarHorizontal {

                    text-align: left;

                }

                 

                 

                Setting the text to 9px is far too small and will look distorted but that's your call...personally I'd set it at a minimum of 11px.

                 

                ul.MenuBarHorizontal

                {

                    padding: 0;

                    list-style-type: none;

                    font-size: 9px;

                    cursor: default;

                    width: 450px;

                    float: right;

                    margin-top: -8px;

                    margin-right: 0;

                    margin-bottom: 0;

                    margin-left: 0;

                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                    font-style: normal;

                    color: #FFF;

                    text-decoration: none;

                }

                 

                 

                Comment out padding-right and padding-left (as shown below) otherwise the text will be to one side.

                 

                 

                ul.MenuBarHorizontal a

                {

                    display: block;

                    cursor: pointer;

                    background-color: #6C777D;

                    color: #FFF;

                    text-decoration: none;

                    text-align: center;

                    padding-top: 7px;

                    /*padding-right: 12px;*/

                    padding-bottom: 7px;

                    /* padding-left: 0px;*/

                }

                • 5. Re: Text has different 'weights' in Spry Menu
                  osgood_ MVP

                  Also noticed that you are missing opening quote marks after content="

                   

                  <meta name="description" content=Interior designs. Interior designers. Architectural designs. Audio systems. Audio and visual systems. AV systems. AV control systems. Loewe audio. Niko lighting control systems.">

                  • 6. Re: Text has different 'weights' in Spry Menu
                    RepulseMonkey Community Member

                    Thanks osgood_, I'll apply his lot in the morning... let you know how I get on.

                     

                    Really appreciate the help.  You can tell I'm a print designer!  Fish out of water time!  Can't wait for 'Muse' to take off!

                     

                    RP

                    • 7. Re: Text has different 'weights' in Spry Menu
                      RepulseMonkey Community Member

                      Thanks osgood_, that seems to have done the trick.

                       

                      Really appreciate it.

                       

                      RP