Loading ...
Sorry, an error occurred while loading the content.
 

Re: [NH] indent

Expand Messages
  • Ed Brown
    Hi Don, I am more into photography right now than I am into HTML. While I keep plodding along in HTML I limit my time to 2 - 4 hrs daily and spend the rest of
    Message 1 of 19 , Feb 23, 2005
      Hi Don,
      I am more into photography right now than I am into HTML. While I keep
      plodding along in HTML I limit my time to 2 - 4 hrs daily and spend the
      rest of the time with my Speed Grahics, Kodak Medalists, Mamiya TLR,
      and searching for a mint Nikon F4 and lenses I use digital a lot, but
      for my purposes I find film much better at the present time. I am
      searching the internet trying to find out just how good Tamron lenses
      are. They are affordable and the Nikkors are not. I certainly did not
      go away mad.

      Can I use this then. <p class="indented"> with this in the css
      p.indented {text-indent: 3em; font-size: 0.7em}
      This font-size matches the rest of the paragraphs that are not indented.
      Ed

      Since the mathematicians have invaded the theory of relativity, I do not understand it myself any more.
      -- Albert Einstein



      Don - htmlfixit.com wrote:

      > Ed Brown wrote:
      > > Is there a way to indent in HTML, Other than using ' ' ?
      > > Ed
      > >
      > Ed, use CSS
      > p {text-indent:3em}
      > or
      > <p style='text-indent:3em'>
      >
      > You could also class the p tag so only some are indented and others
      > are not.
      >
      > p.indented {text-indent:3em}
      >
      > <p class='indented'>This will be indented<p/>
      >
      > Hope that helps. We never see you around http://htmlfixit.com in chat
      > any more. Hope you didn't go away mad.
      >
      > Don
      >
      >
      > CSE HTML Validator Lite - it's free:
      > http://home.earthlink.net/~5wink/dl/cselite652.exe
      > <http://home.earthlink.net/%7E5wink/dl/cselite652.exe>
      >
      > Fookes Software Home: http://www.fookes.us/redir
      >
      >
      >
      > ------------------------------------------------------------------------
      > *Yahoo! Groups Links*
      >
      > * To visit your group on the web, go to:
      > http://groups.yahoo.com/group/ntb-html/
      >
      > * To unsubscribe from this group, send an email to:
      > ntb-html-unsubscribe@yahoogroups.com
      > <mailto:ntb-html-unsubscribe@yahoogroups.com?subject=Unsubscribe>
      >
      > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
      > Service <http://docs.yahoo.com/info/terms/>.
      >
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      > avast! Antivirus <http://www.avast.com>: Inbound message clean.
      >
      > Virus Database (VPS): 0508-1, 02/22/2005
      > Tested on: 2/22/2005 1:19:39 PM
      > avast! - copyright (c) 2000-2004 ALWIL Software.
      >
      >


      ---
      avast! Antivirus: Outbound message clean.
      Virus Database (VPS): 0508-2, 02/23/2005
      Tested on: 2/23/2005 11:03:24 AM
      avast! - copyright (c) 2000-2004 ALWIL Software.
      http://www.avast.com
    • Don - htmlfixit.com
      ... Yes Ed, That is perfectly acceptable. I believe however that if you have p {font-size: 0.7em;} and don t specify a diffent font size for the indented
      Message 2 of 19 , Feb 23, 2005
        Ed Brown wrote:
        > Hi Don,
        > I am more into photography right now than I am into HTML. While I keep
        > plodding along in HTML I limit my time to 2 - 4 hrs daily and spend the
        > rest of the time with my Speed Grahics, Kodak Medalists, Mamiya TLR,
        > and searching for a mint Nikon F4 and lenses I use digital a lot, but
        > for my purposes I find film much better at the present time. I am
        > searching the internet trying to find out just how good Tamron lenses
        > are. They are affordable and the Nikkors are not. I certainly did not
        > go away mad.
        >
        > Can I use this then. <p class="indented"> with this in the css
        > p.indented {text-indent: 3em; font-size: 0.7em}
        > This font-size matches the rest of the paragraphs that are not indented.
        > Ed
        >
        > Since the mathematicians have invaded the theory of relativity, I do not understand it myself any more.
        > -- Albert Einstein
        >
        Yes Ed,

        That is perfectly acceptable. I believe however that if you have p
        {font-size: 0.7em;} and don't specify a diffent font size for the
        indented class you will get the same font size because of inheritance.
        In otherwords, the p.indented is just a subclass of the general p class
        and only things set differently will override what you set for the
        general p class. So try leaving the font-size out of indented and see
        if all p's don't have the same font. I think they will.

        I had a Tamron 85-205 lense at one time, though that was 20 or more
        years ago for a Minolta I had (think I still do have the camera and lens
        actually -- very nice camera in its day -- automatic shutter, aperature,
        both or fully manual -- which at that time was very unusual). Make me
        an offer it could be yours. It was an okay lense once I got used to it.
        The focus on it took a little getting used to, but it was the offset
        above and below a line type of focus instead of the texture that goes
        away when you are in focus.

        best regards,
        Don
      • Scott Fordin
        ... Don t forget the lowly ! Scott
        Message 3 of 19 , Feb 23, 2005
          Ed Brown wrote:
          > Thanks to all of you who answered, I will be playing around with a
          > couple to see how things work out.

          Don't forget the lowly <blockquote>!

          Scott

          > Thanks again,
          > Ed
          >
          > Since the mathematicians have invaded the theory of relativity, I do not understand it myself any more.
          > -- Albert Einstein
          >
          >
          >
          > Rudolf Horbas wrote:
          >
          >
          >>Neil,
          >>
          >>
          >>>You can use margin class in css
          >>>
          >>>/*margin top right bottom left*/
          >>>.marg20 {margin: 0px 0px 0px 20px;}
          >>
          >>...
          >>
          >>Measurements in class names are not a good idea. Rather use descriptive
          >>names as .indented or .veryindented or the like.
          >>
          >>Imagine you'd want to change the left margin to 19px -- you'd end up
          >>editing all your files or have to live with a misleading name.
          >>
          >>But I guess we all agree that using css for the task that Ed requests is
          >>"state of the art".
          >>I just played around with the first-line and first-letter pseudo
          >>elements [1] -- they also work (example also uppercases first line):
          >>
          >><html>
          >> <head>
          >> <style type="text/css">
          >> /* This one is just for kicks -- you might
          >> not want this on every paragraph ;-) */
          >> p::first-line
          >> {
          >> text-transform: uppercase;
          >> }
          >> /* This one does the trick Ed wants */
          >> p::first-letter
          >> {
          >> padding-left: 15px;
          >> }
          >> </style>
          >> </head>
          >> <body>
          >>
          >> <p>This is a somewhat long HTML
          >> paragraph that will be broken into several
          >> lines. The first line will be identified
          >> by a fictional tag sequence. The other lines
          >> will be treated as ordinary lines in the
          >> paragraph.<br />
          >> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
          >>nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
          >>volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
          >>ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
          >>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit
          >>esse molestie consequat, illum dolore eu feugiat nulla facilisis at vero
          >>eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
          >>zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
          >>
          >> </body>
          >></html>
          >>
          >>Rudi
          >>
          >>[1] http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#first-line
          >>
          >>
          >>CSE HTML Validator Lite - it's free:
          >>http://home.earthlink.net/~5wink/dl/cselite652.exe
          >><http://home.earthlink.net/%7E5wink/dl/cselite652.exe>
          >>
          >>Fookes Software Home: http://www.fookes.us/redir
          >>
          >>
          >>
          >>*Yahoo! Groups Sponsor*
          >><http://us.ard.yahoo.com/SIG=129dgjsde/M=324658.6070095.7083352.3001176/D=groups/S=1705375618:HM/EXP=1109196374/A=2343726/R=0/SIG=12irkt1tl/*http://clk.atdmt.com/VON/go/yhxxxvon01900091von/direct/01/&time=1109109974969104>
          >>
          >>
          >>Get unlimited calls to
          >>
          >>U.S./Canada
          >>
          >><http://us.ard.yahoo.com/SIG=129dgjsde/M=324658.6070095.7083352.3001176/D=groups/S=1705375618:HM/EXP=1109196374/A=2343726/R=1/SIG=12irkt1tl/*http://clk.atdmt.com/VON/go/yhxxxvon01900091von/direct/01/&time=1109109974969104>
          >>
          >>
          >>
          >>------------------------------------------------------------------------
          >>*Yahoo! Groups Links*
          >>
          >> * To visit your group on the web, go to:
          >> http://groups.yahoo.com/group/ntb-html/
          >>
          >> * To unsubscribe from this group, send an email to:
          >> ntb-html-unsubscribe@yahoogroups.com
          >> <mailto:ntb-html-unsubscribe@yahoogroups.com?subject=Unsubscribe>
          >>
          >> * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
          >> Service <http://docs.yahoo.com/info/terms/>.
          >>
          >>
          >>
          >>
          >>------------------------------------------------------------------------
          >>
          >>avast! Antivirus <http://www.avast.com>: Inbound message clean.
          >>
          >>Virus Database (VPS): 0508-1, 02/22/2005
          >>Tested on: 2/22/2005 4:07:10 PM
          >>avast! - copyright (c) 2000-2004 ALWIL Software.
          >>
          >>
          >
          >
          >
          > ---
          > avast! Antivirus: Outbound message clean.
          > Virus Database (VPS): 0508-1, 02/22/2005
          > Tested on: 2/22/2005 7:28:37 PM
          > avast! - copyright (c) 2000-2004 ALWIL Software.
          > http://www.avast.com
          >
          >
          >
          >
          >
          > CSE HTML Validator Lite - it's free: http://home.earthlink.net/~5wink/dl/cselite652.exe
          >
          > Fookes Software Home: http://www.fookes.us/redir
          >
          > Yahoo! Groups Links
          >
          >
          >
          >
          >
          >
          >
          >
          > __________ NOD32 1.1006 (20050222) Information __________
          >
          > This message was checked by NOD32 antivirus system.
          > http://www.nod32.com
          >
          >
          >
        • Ed Brown
          Since the mathematicians have invaded the theory of relativity, I do not understand it myself any more. -- Albert Einstein ... I feel sure that you are right
          Message 4 of 19 , Feb 23, 2005
            Since the mathematicians have invaded the theory of relativity, I do not understand it myself any more.
            -- Albert Einstein



            Don - htmlfixit.com wrote:

            > > Can I use this then. <p class="indented"> with this in the css
            > > p.indented {text-indent: 3em; font-size: 0.7em}
            > > This font-size matches the rest of the paragraphs that are not indented.
            > > Ed
            > >
            > > Since the mathematicians have invaded the theory of relativity, I do
            > not understand it myself any more.
            > > -- Albert Einstein
            > >
            > Yes Ed,
            >
            > >That is perfectly acceptable. I believe however that if you have p
            > >{font-size: 0.7em;} and don't specify a diffent font size for the
            > >indented class you will get the same font size because of inheritance.
            > >In otherwords, the p.indented is just a subclass of the general p class
            > >and only things set differently will override what you set for the
            > >general p class. So try leaving the font-size out of indented and see
            > >if all p's don't have the same font. I think they will.

            I feel sure that you are right about the inheritance, I knew that but
            had forgotten how em depends on inheritance.

            >
            >
            >
            > best regards,
            > Don
            >
            >
            > CSE HTML Validator Lite - it's free:
            > http://home.earthlink.net/~5wink/dl/cselite652.exe
            > <http://home.earthlink.net/%7E5wink/dl/cselite652.exe>
            >
            > Fookes Software Home: http://www.fookes.us/redir
            >
            >
            >
            > ------------------------------------------------------------------------
            > *Yahoo! Groups Links*
            >
            > * To visit your group on the web, go to:
            > http://groups.yahoo.com/group/ntb-html/
            >
            > * To unsubscribe from this group, send an email to:
            > ntb-html-unsubscribe@yahoogroups.com
            > <mailto:ntb-html-unsubscribe@yahoogroups.com?subject=Unsubscribe>
            >
            > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
            > Service <http://docs.yahoo.com/info/terms/>.
            >
            >
            >
            >
            > ------------------------------------------------------------------------
            >
            > avast! Antivirus <http://www.avast.com>: Inbound message clean.
            >
            > Virus Database (VPS): 0508-2, 02/23/2005
            > Tested on: 2/23/2005 11:40:43 AM
            > avast! - copyright (c) 2000-2004 ALWIL Software.
            >
            >


            ---
            avast! Antivirus: Outbound message clean.
            Virus Database (VPS): 0508-2, 02/23/2005
            Tested on: 2/23/2005 11:46:28 AM
            avast! - copyright (c) 2000-2004 ALWIL Software.
            http://www.avast.com
          • loro
            ... Nah, that s not inheritance. In this case it works because the p rule matches all p elements and the font-size declaration isn t overridden in the more
            Message 5 of 19 , Feb 23, 2005
              Ed Brown wrote:
              > > >That is perfectly acceptable. I believe however that if you have p
              > > >{font-size: 0.7em;} and don't specify a diffent font size for the
              > > >indented class you will get the same font size because of inheritance.
              > > >In otherwords, the p.indented is just a subclass of the general p class
              > > >and only things set differently will override what you set for the
              > > >general p class. So try leaving the font-size out of indented and see
              > > >if all p's don't have the same font. I think they will.
              >
              >I feel sure that you are right about the inheritance, I knew that but
              >had forgotten how em depends on inheritance.

              Nah, that's not inheritance. In this case it works because the p rule
              matches all p elements and the font-size declaration isn't overridden in
              the more specific p.indented rule.

              Inheritance is whole other concept and works on the HTML level, so to
              speak. When the paragraphs below get the first line indented it's because
              of inheritance. The paragraphs inherit the text-indent from the DIV.

              #foo { text-indent: 1.5em }

              <div id="foo>
              <p>
              Bla bla...</p>
              <p>
              Bla bla...</p>
              </div>



              Lotta
            • jorigami
              ... Shame on you for even suggesting it! ;) Blockquote is semantically incorrect, and you don t know if browser styles it differently from normal text. It
              Message 6 of 19 , Feb 24, 2005
                --- In ntb-html@yahoogroups.com, Scott Fordin <sfordin@o...> wrote:

                > Don't forget the lowly <blockquote>!

                Shame on you for even suggesting it! ;)

                Blockquote is semantically incorrect, and you don't know if browser
                styles it differently from normal text. It might appear itealics,
                for examle.

                There's one thing worse than blockquote - nested blockquotes! 8O


                Jorma
              • Ed Brown
                Lotta, Text book says em s have inheritance and I have proved over and over, much to my chagrin . Go to this page and check out inheritance, there is a lot to
                Message 7 of 19 , Feb 24, 2005
                  Lotta,
                  Text book says em's have inheritance and I have proved over and over,
                  much to my chagrin . Go to this page and check out inheritance, there
                  is a lot to it. And em's and % is covered at the very end of the page
                  (bottom of page) that is to say last among many other things. This is a
                  good tutorial pg.

                  http://tutorials.alsacreations.com/heritage/

                  This was new to me so I had to check it out "imbricated" (imbrication)
                  that is overlapping as in shingles on a roof or in this case the author
                  was referring to HTML tags.

                  (Even if you knew this, I didn't, so to day at 7:30 AM I have learned
                  something new thus the day has already been a good day for me.)

                  That is why em's even when given the same size will actually change
                  size. I have been fighting with that until I am about ready to give up
                  on em's and change, as did Franki, to px. :-(
                  Ed

                  "Strength does not come from physical capacity.
                  It comes from an indomitable will."
                  -- Mahatma Gandhi



                  loro wrote:

                  > Ed Brown wrote:
                  > > > >That is perfectly acceptable. I believe however that if you have p
                  > > > >{font-size: 0.7em;} and don't specify a diffent font size for the
                  > > > >indented class you will get the same font size because of
                  > inheritance.
                  > > > >In otherwords, the p.indented is just a subclass of the general p
                  > class
                  > > > >and only things set differently will override what you set for the
                  > > > >general p class. So try leaving the font-size out of indented
                  > and see
                  > > > >if all p's don't have the same font. I think they will.
                  > >
                  > >I feel sure that you are right about the inheritance, I knew that but
                  > >had forgotten how em depends on inheritance.
                  >
                  > Nah, that's not inheritance. In this case it works because the p rule
                  > matches all p elements and the font-size declaration isn't overridden in
                  > the more specific p.indented rule.
                  >
                  > Inheritance is whole other concept and works on the HTML level, so to
                  > speak. When the paragraphs below get the first line indented it's because
                  > of inheritance. The paragraphs inherit the text-indent from the DIV.
                  >
                  > #foo { text-indent: 1.5em }
                  >
                  > <div id="foo>
                  > <p>
                  > Bla bla...</p>
                  > <p>
                  > Bla bla...</p>
                  > </div>
                  >
                  >
                  >
                  > Lotta
                  >
                  >
                  >
                  >
                  >
                  > CSE HTML Validator Lite - it's free:
                  > http://home.earthlink.net/~5wink/dl/cselite652.exe
                  > <http://home.earthlink.net/%7E5wink/dl/cselite652.exe>
                  >
                  > Fookes Software Home: http://www.fookes.us/redir
                  >
                  >
                  >
                  > *Yahoo! Groups Sponsor*
                  > ADVERTISEMENT
                  > click here
                  > <http://us.ard.yahoo.com/SIG=129se1dkk/M=298184.6018725.7038619.3001176/D=groups/S=1705375618:HM/EXP=1109308864/A=2593423/R=0/SIG=11el9gslf/*http://www.netflix.com/Default?mqso=60190075>
                  >
                  >
                  >
                  > ------------------------------------------------------------------------
                  > *Yahoo! Groups Links*
                  >
                  > * To visit your group on the web, go to:
                  > http://groups.yahoo.com/group/ntb-html/
                  >
                  > * To unsubscribe from this group, send an email to:
                  > ntb-html-unsubscribe@yahoogroups.com
                  > <mailto:ntb-html-unsubscribe@yahoogroups.com?subject=Unsubscribe>
                  >
                  > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
                  > Service <http://docs.yahoo.com/info/terms/>.
                  >
                  >
                  >
                  >
                  > ------------------------------------------------------------------------
                  >
                  > avast! Antivirus <http://www.avast.com>: Inbound message clean.
                  >
                  > Virus Database (VPS): 0508-2, 02/23/2005
                  > Tested on: 2/24/2005 7:04:43 AM
                  > avast! - copyright (c) 2000-2004 ALWIL Software.
                  >
                  >


                  ---
                  avast! Antivirus: Outbound message clean.
                  Virus Database (VPS): 0508-2, 02/23/2005
                  Tested on: 2/24/2005 7:32:37 AM
                  avast! - copyright (c) 2000-2004 ALWIL Software.
                  http://www.avast.com
                • loro
                  ... Ed, I m not sure I follow. What I meant is if you have something like so: p { font-size: .9em } p.indented { text-indent: 2em }
                  Message 8 of 19 , Feb 24, 2005
                    Ed Brown wrote:
                    >Text book says em's have inheritance and I have proved over and over,
                    >much to my chagrin . Go to this page and check out inheritance, there
                    >is a lot to it. And em's and % is covered at the very end of the page
                    >(bottom of page) that is to say last among many other things. This is a
                    >good tutorial pg.
                    >
                    > http://tutorials.alsacreations.com/heritage/
                    >
                    >This was new to me so I had to check it out "imbricated" (imbrication)
                    >that is overlapping as in shingles on a roof or in this case the author
                    >was referring to HTML tags.
                    >
                    >(Even if you knew this, I didn't, so to day at 7:30 AM I have learned
                    >something new thus the day has already been a good day for me.)
                    >
                    >That is why em's even when given the same size will actually change
                    >size. I have been fighting with that until I am about ready to give up
                    >on em's and change, as did Franki, to px. :-(

                    Ed, I'm not sure I follow. What I meant is if you have something like so:

                    p { font-size: .9em }
                    p.indented { text-indent: 2em }

                    <p class="indented"> will indeed have 0.9em text size and have the first
                    line indented. But it isn't because of inheritance. It's simple because the
                    p rule matches (and font-size isn't overtrumped by any other declaration).

                    Inheritance means an element inherits a property form its parent. One CSS
                    rule doesn't inherit from another. So you have to look at the HTML structure.

                    The problem you are having with em and % -- you mean the incremental effect
                    that sometimes occurs, don't you? I'm afraid that isn't inheritance either.
                    The font-size property is inherited, but it's the *computed value* that's
                    inherited.

                    When em is used for font-size it's relative to the size of the parent
                    element, but that is when it's explicitly declared, not when it is
                    inherited. And that's when the incremental effect can occur.

                    This hopefully shows the difference.
                    ----------------------------
                    CSS:
                    div { font-size: 2em }

                    HTML:
                    <div>
                    This text is affected once by 'font-size: 2em'.
                    <p>
                    This text is affected once by 'font-size: 2em'.</p>

                    <div>
                    This text is affected 2 times by 'font-size: 2em'.
                    <div>
                    This text is is affected 3 times by 'font-size: 2em'.
                    <div>
                    This text is is affected 4 times by 'font-size: 2em'.
                    </div>
                    </div>
                    </div>
                    </div>
                    ----------------------------

                    The can be seen here so you don't have to copy-paste. :-)
                    http://web.telia.com/~u18115339/em.html

                    The paragraph inherits the text size from the outer DIV. That is the
                    *computed value*. That's why the text directly in the outer DIV and the
                    text in the P have the same size when you view it in the browser.

                    The text in the inner DIVs gets larger and larger and larger because the
                    DIVS are all nested one within the other. The CSS rule matches all of them
                    and makes each of them have twice as big text as the parent element. It's
                    the same as adding style="font-size: 2em" to each DIV tag. That's not the
                    case with the P that only inherits the font-size...

                    Ouch! I'm afraid this got really confusing but it's the best I can do. :-o

                    Lotta
                  • Ed Brown
                    loro, Thanks for the information. It is back to the drawing board and perhaps I wii get it all straightened out. The only way to learn is to make some
                    Message 9 of 19 , Feb 24, 2005
                      loro,
                      Thanks for the information. It is back to the drawing board and perhaps
                      I wii get it all straightened out. The only way to learn is to make
                      some errors. The nice thing about this board is someone will help you
                      get it straight. I really appreciate you taking time to explain this to
                      me. Many Thanks
                      Ed

                      "Strength does not come from physical capacity.
                      It comes from an indomitable will."
                      -- Mahatma Gandhi



                      loro wrote:

                      > Ed Brown wrote:
                      > >Text book says em's have inheritance and I have proved over and over,
                      > >much to my chagrin . Go to this page and check out inheritance, there
                      > >is a lot to it. And em's and % is covered at the very end of the page
                      > >(bottom of page) that is to say last among many other things. This is a
                      > >good tutorial pg.
                      > >
                      > > http://tutorials.alsacreations.com/heritage/
                      > >
                      > >This was new to me so I had to check it out "imbricated" (imbrication)
                      > >that is overlapping as in shingles on a roof or in this case the author
                      > >was referring to HTML tags.
                      > >
                      > >(Even if you knew this, I didn't, so to day at 7:30 AM I have learned
                      > >something new thus the day has already been a good day for me.)
                      > >
                      > >That is why em's even when given the same size will actually change
                      > >size. I have been fighting with that until I am about ready to give up
                      > >on em's and change, as did Franki, to px. :-(
                      >
                      > Ed, I'm not sure I follow. What I meant is if you have something like so:
                      >
                      > p { font-size: .9em }
                      > p.indented { text-indent: 2em }
                      >
                      > <p class="indented"> will indeed have 0.9em text size and have the first
                      > line indented. But it isn't because of inheritance. It's simple
                      > because the
                      > p rule matches (and font-size isn't overtrumped by any other declaration).
                      >
                      > Inheritance means an element inherits a property form its parent. One
                      > CSS
                      > rule doesn't inherit from another. So you have to look at the HTML
                      > structure.
                      >
                      > The problem you are having with em and % -- you mean the incremental
                      > effect
                      > that sometimes occurs, don't you? I'm afraid that isn't inheritance
                      > either.
                      > The font-size property is inherited, but it's the *computed value* that's
                      > inherited.
                      >
                      > When em is used for font-size it's relative to the size of the parent
                      > element, but that is when it's explicitly declared, not when it is
                      > inherited. And that's when the incremental effect can occur.
                      >
                      > This hopefully shows the difference.
                      > ----------------------------
                      > CSS:
                      > div { font-size: 2em }
                      >
                      > HTML:
                      > <div>
                      > This text is affected once by 'font-size: 2em'.
                      > <p>
                      > This text is affected once by 'font-size: 2em'.</p>
                      >
                      > <div>
                      > This text is affected 2 times by 'font-size: 2em'.
                      > <div>
                      > This text is is affected 3 times by 'font-size: 2em'.
                      > <div>
                      > This text is is affected 4 times by 'font-size: 2em'.
                      > </div>
                      > </div>
                      > </div>
                      > </div>
                      > ----------------------------
                      >
                      > The can be seen here so you don't have to copy-paste. :-)
                      > http://web.telia.com/~u18115339/em.html
                      > <http://web.telia.com/%7Eu18115339/em.html>
                      >
                      > The paragraph inherits the text size from the outer DIV. That is the
                      > *computed value*. That's why the text directly in the outer DIV and the
                      > text in the P have the same size when you view it in the browser.
                      >
                      > The text in the inner DIVs gets larger and larger and larger because the
                      > DIVS are all nested one within the other. The CSS rule matches all of
                      > them
                      > and makes each of them have twice as big text as the parent element.
                      > It's
                      > the same as adding style="font-size: 2em" to each DIV tag. That's not the
                      > case with the P that only inherits the font-size...
                      >
                      > Ouch! I'm afraid this got really confusing but it's the best I can do. :-o
                      >
                      > Lotta
                      >
                      >
                      >
                      > CSE HTML Validator Lite - it's free:
                      > http://home.earthlink.net/~5wink/dl/cselite652.exe
                      > <http://home.earthlink.net/%7E5wink/dl/cselite652.exe>
                      >
                      > Fookes Software Home: http://www.fookes.us/redir
                      >
                      >
                      >
                      > *Yahoo! Groups Sponsor*
                      > ADVERTISEMENT
                      > click here
                      > <http://us.ard.yahoo.com/SIG=129d0gp2f/M=298184.6018725.7038619.3001176/D=groups/S=1705375618:HM/EXP=1109343038/A=2593423/R=0/SIG=11el9gslf/*http://www.netflix.com/Default?mqso=60190075>
                      >
                      >
                      >
                      > ------------------------------------------------------------------------
                      > *Yahoo! Groups Links*
                      >
                      > * To visit your group on the web, go to:
                      > http://groups.yahoo.com/group/ntb-html/
                      >
                      > * To unsubscribe from this group, send an email to:
                      > ntb-html-unsubscribe@yahoogroups.com
                      > <mailto:ntb-html-unsubscribe@yahoogroups.com?subject=Unsubscribe>
                      >
                      > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
                      > Service <http://docs.yahoo.com/info/terms/>.
                      >
                      >
                      >
                      >
                      > ------------------------------------------------------------------------
                      >
                      > avast! Antivirus <http://www.avast.com>: Inbound message clean.
                      >
                      > Virus Database (VPS): 0508-2, 02/23/2005
                      > Tested on: 2/24/2005 8:50:35 AM
                      > avast! - copyright (c) 2000-2004 ALWIL Software.
                      >
                      >


                      ---
                      avast! Antivirus: Outbound message clean.
                      Virus Database (VPS): 0508-2, 02/23/2005
                      Tested on: 2/24/2005 10:54:43 AM
                      avast! - copyright (c) 2000-2004 ALWIL Software.
                      http://www.avast.com
                    • loro
                      ... You are welcome, but I m afraid I m not very good at explaining. It s not easy for us foreigners, you know. :-p I think part of the confusion with em and %
                      Message 10 of 19 , Feb 24, 2005
                        Ed Brown wrote:
                        >Thanks for the information. It is back to the drawing board and perhaps
                        >I wii get it all straightened out.

                        You are welcome, but I'm afraid I'm not very good at explaining. It's not
                        easy for us foreigners, you know. :-p

                        I think part of the confusion with em and % comes from the fact that it's
                        hard to let go of the HTML way of doing things. It's easily done to specify
                        a font-size for everything just out of habit, because with HTML we had to
                        (if we did it at all).

                        With CSS it's often enough to use font-size for a few key elements --
                        thanks to inheritance. :-) When pixels are used the result is the same even
                        if we overdo it. With em and % it can bite back.

                        Don't give up on them. Try to find out where to use them instead. The
                        easiest and most effective approach is IMO to primarily set the text-size
                        for larger containers (or leave it at the browser's default). Then let
                        inheritance work and just make small changes when needed. The beauty is
                        that these small changes always are related to surrounding text. A little
                        bigger? 1.1 or 1.15 em takes care of that. No need for exact measurements.
                        Same with headings. Make h3 say 1.2 em and all level 3 headings are1.2
                        times as big as the surrounding text, whatever size that text has. Makes
                        sense to me.

                        BTW percent doesn't suffer from the IE bugs that affect em, so if you want
                        to keep it simple and hack-free percent is a good choice.

                        Lotta
                      Your message has been successfully submitted and would be delivered to recipients shortly.