9 Replies Latest reply on Jul 3, 2006 6:30 AM by Newsgroup_User

    Different font sizes in Explorer and Safari

    Elle_V
      Hi there, before I go completely nuts can someone give me a hand with figuring out how I can get my plain old body text to display at the same size in both Explorer and Safari.

      I am using a Mac myself, but when entering text at size 1, it is displaying larger in Explorer (at about the size I want) and very small in Safari (too small to be easily readable). I have done some research and thought cascading style sheets might be the way to go but I have also read that the some text problems occur when using cascading style sheets.

      I haven't bothered with them previously as there hasn't been that much text to bother with them.

      Has anyone got any tips, or has used CSS to fix this problem?

      Regards,

      Elle V

      p.s. if you are using a mac, you can check out what I mean by viewing www.homestylefinance.com.au/company.html in both browsers. I would be interested in hearing from a PC user to see if they are seeing the same thing.
        • 1. Re: Different text sizes in Explorer and Safari
          Level 7
          You can define your text sizes in many different ways: points, pixels, em,
          percentages, etc.

          I personally use a percentage to define my base font-size in my style sheet,
          and then declare different text sizes in em's for different selectors. I'd
          stay away from points (which it sounds like you're using them - due to the
          fact that cross-browser display varies). I'd also stay away from pixels,
          because IE users can not resize their browser text size.

          My personal suggestion would be to use em's to declare your font sizes. Here
          is an example of something you could put in your CSS document (which you'll
          want to start using):

          body { font-size: 100%; }

          .text1 { font-size: .75em }

          HTH, take care.

          --
          Shane H
          shane@NOSPAMavenuedesigners.com
          http://www.avenuedesigners.com

          =============================================
          Proud GAWDS Member
          http://www.gawds.org/showmember.php?memberid=1495

          Delivering accessible websites to all ...
          =============================================


          "Elle V" <webforumsuser@macromedia.com> wrote in message
          news:e89ngu$ga6$1@forums.macromedia.com...
          > Hi there, before I go completely nuts can someone give me a hand with
          > figuring
          > out how I can get my plain old body text to display at the same size in
          > both
          > Explorer and Safari.
          >
          > I am using a Mac myself, but when entering text at size 1, it is
          > displaying
          > larger in Explorer (at about the size I want) and very small in Safari
          > (too
          > small to be easily readable). I have done some research and thought
          > cascasing
          > style sheets might be the way to go but I have also read that the some
          > text
          > problems occur when using cascading style sheets.
          >
          > I haven't bothered with them previously as there hasn't been that much
          > text to
          > bother with them.
          >
          > Has anyone got any tips, or has used CSS to fix this problem?
          >
          > Regards,
          >
          > Elle V
          >
          >


          • 2. Re: Different text sizes in Explorer and Safari
            Diane123456
            I'll second Shane's reply - I almost always define everything using ems and it seems to be the most consistent in IE, Netscape, firefox and Opera (I don't have a mac to test on regularly but my safari user friends seem to see about the same rendering as I see on IE)
            • 3. Re: Different text sizes in Explorer and Safari
              Elle_V Level 1
              Hi Shane,

              thanks for your reply. I have created a CSS now with the settings you gave me as an experiment -

              body { font-size: 100%; }

              .text1 { font-size: .75em }

              however even though I have applied the style sheet to the paragraphs in question (and i can see it is referencing the .css page in the source code) when I preview the pages in Explorer and Safari they look the same as they did before - Safari is still displaying the text in very small font. I have reset the cache too just in cache it was a memory issue.

              any ideas?

              Regards,

              Elle V
              • 4. Re: Different text sizes in Explorer and Safari
                Level 7
                Does your code look something like this:

                <p class="text1">This is my text</p>

                If yes, show me your code please.

                --
                Shane H
                shane@NOSPAMavenuedesigners.com
                http://www.avenuedesigners.com

                =============================================
                Proud GAWDS Member
                http://www.gawds.org/showmember.php?memberid=1495

                Delivering accessible websites to all ...
                =============================================


                "Elle V" <webforumsuser@macromedia.com> wrote in message
                news:e89s03$l10$1@forums.macromedia.com...
                > Hi Shane,
                >
                > thanks for your reply. I have created a CSS now with the settings you
                > gave me
                > as an experiment -
                >
                > body { font-size: 100%; }
                >
                > .text1 { font-size: .75em }
                >
                > however even though I have applied the style sheet to the paragraphs in
                > question (and i can see it is referencing the .css page in the source
                > code)
                > when I preview the pages in Explorer and Safari they look the same as they
                > did
                > before - Safari is still displaying the text in very small font. I have
                > reset
                > the cache too just in cache it was a memory issue.
                >
                > any ideas?
                >
                > Regards,
                >
                > Elle V
                >


                • 5. Re: Different text sizes in Explorer and Safari
                  Elle_V Level 1
                  Hi Shane,

                  I really appreciate your help!

                  Here is the code you asked for......

                  <p class="A1"><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif">Tech
                  Credit is a member of the Versura Capital finance group and operates
                  nationally across Australia. </font></p>
                  • 6. Re: Different text sizes in Explorer and Safari
                    Level 7
                    You need to remove the font tag from your code, it is overriding your
                    stylesheet... make it look like this:

                    <p class="A1">Tech Credit is a member of the Versura Capital finance group
                    and operates nationally across Australia.<p>

                    --
                    Nadia
                    Adobe� Community Expert : Dreamweaver
                    --------------------------------------------
                    http://www.csstemplates.com.au - CSS Templates | Free Templates
                    --------------------------------------------
                    http://www.perrelink.com.au - Web Dev
                    http://www.DreamweaverResources.com - Dropdown Menu Templates|Tutorials
                    http://www.adobe.com/devnet/dreamweaver/css.html
                    -------------------------------------------------



                    "Elle V" <webforumsuser@macromedia.com> wrote in message
                    news:e89u63$nap$1@forums.macromedia.com...
                    > Hi Shane,
                    >
                    > I really appreciate your help!
                    >
                    > Here is the code you asked for......
                    >
                    > <p class="A1"><font color="#FFFFFF" size="1" face="Arial, Helvetica,
                    > sans-serif">Tech
                    > Credit is a member of the Versura Capital finance group and
                    > operates
                    > nationally across Australia. </font></p>
                    >


                    • 7. Re: Different text sizes in Explorer and Safari
                      Elle_V Level 1
                      Hi Nadia,

                      I removed the font tag & code as you suggested.....the text then displayed as Times New Roman and was black in colour (when my style sheet says Arial/Helvetica and white for colour) and it was still larger in Explorer than in Safari.

                      Regards,

                      Elle V
                      • 8. Re: Different text sizes in Explorer and Safari
                        Level 7
                        On Mon, 3 Jul 2006 03:36:57 +0000 (UTC), "Elle V"
                        <webforumsuser@macromedia.com> wrote:

                        > I removed the font tag & code as you suggested.....the text then displayed as
                        >Times New Roman and was black in colour (when my style sheet says
                        >Arial/Helvetica and white for colour) and it was still larger in Explorer than
                        >in Safari.

                        Then you need to post a link to the page so someone can see what's
                        actually happening.

                        Gary
                        • 9. Re: Different text sizes in Explorer and Safari
                          Level 7
                          That is because you are using a percentage to establish the text size.
                          The size 100% means make the text 100% of the normal size, *whatever
                          that is for that browser.* Ems and a few obscure metrics will work the
                          same way. They both establish size relative to the browser defaults.

                          There are in fact good reasons for sizing text this way. For example,
                          someone may have established a large default text size in their
                          browser's preferences because of vision problems. But if you want to set
                          an absolute size, the best metric to use is px (pixels.)

                          p {
                          text-size: 12px;
                          }

                          for example.

                          Note: All browsers will allow viewers to change text size. Using pixels
                          as the metric doesn't prevent IE6/Win from allowing viewers to change
                          the size, it's just a bit harder to do than in other browsers, and I
                          suspect IE7 will make this easy. It is best to design your page so that
                          it doesn't fall apart when the text is resized.

                          --
                          James M. Shook
                          http://www.jshook.com