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

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

Expand Messages
  • Sanjiv Jivan
    Dav, Unfortunately the fonts get really really small when I do this. As mentioned in my previosu email, I see the same behaviour when set the font-size to 77%
    Message 1 of 7 , Apr 30, 2007
      Dav,
      Unfortunately the fonts get really really small when I do this. As mentioned in my previosu email, I see the same behaviour when set the font-size to 77% on the YUI example page : http://developer.yahoo.com/yui/examples/grids/example_t5.html

      Thanks,
      Sanjiv

      On 4/30/07, dav.glass@... <dav.glass@...> wrote:

      Sanjiv --

      Try changing the CSS declaration to this:

      #doc2 {
          font-family:georgia;
          font-size:77%;
      }

      Hope that helps :)
      Dav
       
      Dav Glass
      dav.glass@...
      blog.davglass.com


      + Windows: n. - The most successful computer virus, ever. +
      + A computer without a Microsoft operating system is like a dog
      without bricks tied to its head +
      + A Microsoft Certified Systems Engineer is to computing what a
      McDonalds Certified Food Specialist is to fine cuisine +


      ----- Original Message ----
      From: Sanjiv Jivan <sanjiv.jivan@gmail.com>
      To: ydn-javascript@yahoogroups.com
      Sent: Monday, April 30, 2007 4:19:54 AM
      Subject: [ydn-javascript] issue with grid layout on IE 6 when changing font size

      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  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, 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 2 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 3 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 4 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.