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

7484RE: [ydn-javascript] Shrinking & restoring font sizes

Expand Messages
  • Nate Koechley
    Dec 13, 2006
      Hi Peter,

      The answer to your underlaying question is: Use arithmetic to determine
      which size to declare in your nested context so that the "result" matches
      the percentages provided for default contexts.

      For example, in a default context 11px should be 85%; since you're in a 92%
      context you need to declare what % of 92 = 85% of the default context. In
      this case, it's 92.39%. (.85/.92 = .9239).


      Even though I think you're asking about the conceptual case, let me suggest
      an alternative in your example's specific case: consider modifying your
      markup so that your CSS tagets content instead of containers:

      #example p {font-size:92%}
      #example li {font-size:85%}

      If you target content instead of containers, you'll need to worry about
      nested contexts much less frequently.

      I added a P around the "12px content", instead of having it be a direct
      child of the container:

      <div id="example">
      <p>This is 92%, or 12px font.</p>
      <li>This should be 11px font</li>


      > -----Original Message-----
      > From: ydn-javascript@yahoogroups.com
      > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of
      > foti-1@...
      > Sent: Monday, November 27, 2006 1:39 PM
      > To: Yahoo Developer Network
      > Subject: [ydn-javascript] Shrinking & restoring font sizes
      > Using the YUI Fonts css, suppose I set the font-size to 92%
      > on a particular container. According to the fonts page:
      > http://developer.yahoo.com/yui/fonts/
      > <http://developer.yahoo.com/yui/fonts/>
      > 92% = 12px
      > Now suppose I want something else within that container to
      > have an 11px font size. If I try to set the font-size to 85%
      > (11px), that's going to adjust the font size from the parent
      > container, thereby giving me something smaller than 11px.
      > Is there an easy way to adjust for this scenerio? For example:
      > <div id="example">
      > This is 92%, or 12px font.
      > <ul>
      > <li>This should be 11px font</li>
      > </ul>
      > </div>
      > Thanks,
      > Peter
    • Show all 2 messages in this topic