Skip navigation
RepulseMonkey
Currently Being Moderated

Text has different 'weights' in Spry Menu

Apr 11, 2012 8:51 AM

Tags: #menu-based #cs.55

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

 
Replies
  • Currently Being Moderated
    Apr 11, 2012 9:03 AM   in reply to RepulseMonkey

    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'

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 10:39 AM   in reply to RepulseMonkey

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

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 10:43 AM   in reply to osgood_

    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.">

     
    |
    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