2 Replies Latest reply on Apr 25, 2011 5:30 PM by John Waller

    Type Changes From Serif to Sans Serif?

    Comp. 792 Level 1

      http://www3.telus.net/~jessum/PAGES/gallery1.html

       

      Hi, I want the font to remain as "sans serif" all the time but when I hover over my text it changes from serif to sans serif and I don't know why?

        • 1. Re: Type Changes From Serif to Sans Serif?
          osgood_ Level 8


          Comp. 792 wrote:

           

          http://www3.telus.net/~jessum/PAGES/gallery1.html

           

          Hi, I want the font to remain as "sans serif" all the time but when I hover over my text it changes from serif to sans serif and I don't know why?

           

          The text doesn't change from serif to sans-serif, assuming we are talking about the naviagtion
          menu at the top of the page? Both fonts are sans-serif.

          But the fonts are different and that is why you are seeing a variation in style when you mouse over the links.

          You have 'Lucida Sans' set on your body css and 'Arial' set on the 'a' hover css style (see below)

          body {
          width: 100%;
          min-width: 1100px; /*containment*/
          margin:0 auto; /**centers page**/
          padding:0;
          background: #000;
          color: #FFF;
          font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";

          }


          /**TEXT LINKS**/
          a img {border:none}
          a {text-decoration:none}
          a:link {color:#99FF00;}
          a:visited {color:#999900}
          a:hover, a:active, a:focus {
          font-family: Arial, Helvetica, sans-serif;
          }


          If you want the fonts to appear the same then you have to change one or the other, so they are the same.

          • 2. Re: Type Changes From Serif to Sans Serif?
            John Waller Adobe Community Professional & MVP

            You have Lucida Sans defined for body

             

            body {
            width: 100%;
            min-width: 1100px; /*containment*/
            margin:0 auto; /**centers page**/
            padding:0;
            background: #000;
            color: #FFF;
            font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";

            }

             

            Anyone who doesn't have Lucida Sans installed locally (e.g. my iPad) will see their default browser font = serif font.

             

            Your menu defines Arial but only for the hover, active and focus states.

             

            /**TEXT LINKS**/
            a img {border:none}
            a {text-decoration:none}
            a:link {color:#99FF00;}
            a:visited {color:#999900}
            a:hover, a:active, a:focus {
            font-family: Arial, Helvetica, sans-serif;
            }

             

            Put the font-family attribute into the "a" rule instead so it reads like:

             

            /**TEXT LINKS**/
            a img {border:none}
            a {

            text-decoration:none;

            font-family: Arial, Helvetica, sans-serif;
            }
            a:link {color:#99FF00;}
            a:visited {color:#999900}
            a:hover, a:active, a:focus {
            color: #FFFFFF;

            }