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

Re: [ydn-javascript] Re: issue with grid layout on IE 6 when changing font size

Expand Messages
  • Sanjiv Jivan
    Mike, Thanks for the explanation. I was able to get the desired result by adding a rule p { 95%; } to get my font size to 10px. Note that based on the font
    Message 1 of 7 , Apr 30, 2007
    • 0 Attachment
      Mike,
      Thanks for the explanation. I was able to get the desired result by adding a rule

      p {
        95%;
      }

      to get my font size to 10px. Note that based on the font adjustment chart here : http://developer.yahoo.com/yui/fonts/#fontsize

      a font-size property of 77% corresponds to 10px, but with a p { font-size :77%;}  rule the fonts get really small (like 6 or 7px). I guess that the percentage value I put in here is a percentage of the fonts that are already scaled to em's. I'm just guessing here, and would love an explanation.

      Thanks,
      Sanjiv

      On 4/30/07, Mike Lee (YUI) <mikelee@...> wrote:

      Hi Sanjiv,

      Yes, this is the expected behavior. The rationale is that the entire
      layout can scale with font size changes.

      Another developer had a similar issue. This previous message shows the
      fix:
      http://tech.groups.yahoo.com/group/ydn-javascript/message/11120

      I hope this helps!

      ________________________________

      From: ydn-javascript@yahoogroups.com
      [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Sanjiv Jivan
      Sent: Monday, April 30, 2007 6:07 AM
      To: ydn-javascript@yahoogroups.com
      Subject: [ydn-javascript] Re: issue with grid layout on IE 6 when
      changing font size

      This behaviour is reproducible on the YUI examples too. Go to
      http://developer.yahoo.com/yui/examples/grids/example_t5.html
      <http://developer.yahoo.com/yui/examples/grids/example_t5.html> and
      using IE dev toolbar, set the font-size property of the body element to
      77% and you'll see that the overall width of the content body "bd"
      reduces. If this is the expected behaviour, how do I get to display a
      font size of 77% and have a width of ,say, doc2 that works consistently
      across browsers.

      Thanks,
      Sanjiv

      On 4/30/07, Sanjiv Jivan <sanjiv.jivan@...
      <mailto:sanjiv.jivan@...> > wrote:

      Hi,
      I'm using a YUI grid layout with total width of 950px (div
      #doc2) and template of yui-t5 and so I have panels of width 710px and
      240px. I would like to use the font "georgia" with a pixel size of 10px,
      and so as recommended by the YUI docs, I added the following declaration
      to my CSS definition.

      body {
      font-family:georgia;
      font-size:77%;
      }

      The layout remains fine and the fonts display correctly on FF
      and IE 7, but after adding font-size:77%, in IE 6 the today width of my
      layout reduces from 950px to 880px, with the main panel reducing from
      710px to ~660px. You can take a look at this by changing the font size
      declaration of my page http://www.jroller.com/page/sjivan
      <http://www.jroller.com/page/sjivan> to 77%. This can be done using
      IE Web Developer toolbar --> view DOM--> select BODY tag --> add
      'fontSize' property with value 77%.

      Any idea how I can fix this?

      Thanks,
      Sanjiv



    • Mike Lee (YUI)
      Hi Sanjiv, Cool, I m glad you were able to resolve the issue. And yes, because of the relative nature of measurements such as percentages and ems, they are
      Message 2 of 7 , Apr 30, 2007
      • 0 Attachment
        Hi Sanjiv,

        Cool, I'm glad you were able to resolve the issue. And yes, because of
        the relative nature of measurements such as percentages and ems, they
        are additive. So a 95% on the body and a 77% on a paragraph will give
        you 77% of 95% - and that's why it gets so small.



        ________________________________

        From: ydn-javascript@yahoogroups.com
        [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Sanjiv Jivan
        Sent: Monday, April 30, 2007 4:29 PM
        To: ydn-javascript@yahoogroups.com
        Subject: Re: [ydn-javascript] Re: issue with grid layout on IE 6 when
        changing font size


        Mike,
        Thanks for the explanation. I was able to get the desired result by
        adding a rule

        p {
        95%;
        }

        to get my font size to 10px. Note that based on the font adjustment
        chart here : http://developer.yahoo.com/yui/fonts/#fontsize
        <http://developer.yahoo.com/yui/fonts/#fontsize>

        a font-size property of 77% corresponds to 10px, but with a p {
        font-size :77%;} rule the fonts get really small (like 6 or 7px). I
        guess that the percentage value I put in here is a percentage of the
        fonts that are already scaled to em's. I'm just guessing here, and would
        love an explanation.

        Thanks,
        Sanjiv
      Your message has been successfully submitted and would be delivered to recipients shortly.