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
  • Mike Lee (YUI)
    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.
    Message 1 of 7 , Apr 30, 2007
      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
    • 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 2 of 7 , Apr 30, 2007
        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 3 of 7 , Apr 30, 2007
          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.