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

issue with grid layout on IE 6 when changing font size

Expand Messages
  • Sanjiv Jivan
    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
    Message 1 of 7 , Apr 30, 2007
    • 0 Attachment
      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

       
    • Sanjiv Jivan
      This behaviour is reproducible on the YUI examples too. Go to http://developer.yahoo.com/yui/examples/grids/example_t5.html and using IE dev toolbar, set the
      Message 2 of 7 , Apr 30, 2007
      • 0 Attachment
        This behaviour is reproducible on the YUI examples too. Go to 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@...> 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  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

         

      • dav.glass@yahoo.com
        Sanjiv -- Try changing the CSS declaration to this: #doc2 { font-family:georgia; font-size:77%; } Hope that helps :) Dav Dav Glass dav.glass@yahoo.com
        Message 3 of 7 , Apr 30, 2007
        • 0 Attachment
          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@...>
          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

           

        • 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 4 of 7 , Apr 30, 2007
          • 0 Attachment
            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 5 of 7 , Apr 30, 2007
            • 0 Attachment
              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 6 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 7 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.