|
»
»
Grids Problem when font-size is set.
|
View:
New views
6 Messages
—
Rating Filter:
Alert me
|
 |
Grids Problem when font-size is set.
by Shishir Jain
::
Rate this Message:
Hi,
Take a look at the code below. Defining font-size for body breaks the 300px right block. Any idea why does it happen? Thanks & Regards, Shishir <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <head> <link rel="stylesheet" href=" http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> <style> body { font-size: 1em; } </style> </head> <body class="yui-skin-sam"> <div id="doc3" class="yui-t6"> <div id="hd"> </div> <div id="bd"> <div id="yui-main"> <div class="yui-b" style="border:1px solid #cccccc;height:300px;"> </div> </div> <div class="yui-b" style="border:1px solid #cccccc;height:300px;"> </div> </div> <div id="ft"> </div> </div> </body> </html> |
|
|
Re: Grids Problem when font-size is set.
by wally.ritchie
::
Rate this Message:
--- In ydn-javascript@..., "Shishir Jain"
<shishir.jain@...> wrote: > > Hi, > > Take a look at the code below. Defining font-size for body breaks the 300px > right block. Any idea why does it happen? > > Thanks & Regards, > Shishir > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " > http://www.w3.org/TR/html4/strict.dtd"> > > <head> > <link rel="stylesheet" href=" > > type="text/css"> > <style> > body { > font-size: 1em; > } > </style> > </head> > > <body class="yui-skin-sam"> > > <div id="doc3" class="yui-t6"> > <div id="hd"> > </div> > > <div id="bd"> > <div id="yui-main"> > <div class="yui-b" style="border:1px solid > #cccccc;height:300px;"> > </div> > </div> > <div class="yui-b" style="border:1px solid > #cccccc;height:300px;"> > </div> > </div> > > <div id="ft"> > </div> > > </div> > </body> > </html> > The font-size is already precisely set in pixels and line height by reset-font-grids and the docX divisions depend on this definition of em for their calculations, most of which are done in ems (but some in pixels). There are rather complicated interactions with zooming of text sizes by the user. If you want to change font-size, do it with percentage values. This will allow it to scale properly. If you want to change font sizes, do it with CSS applied to classes or to id's inside of the docX. For example, you could change the font size of the "#bd" to 125% or some other value to make everything larger. |
|
|
Re: Re: Grids Problem when font-size is set.
by Shishir Jain
::
Rate this Message:
Hi,
Whatever I do with the font-size (whether specify it in pixels, em or %) for *body* the fixed width column breaks and start rendering at different sizes. Just try it and let me know if there is something wrong I'm doing? Why should the grid block size mis-behave when the font-size is set? Thanks & regards, Shishir On Sat, Jul 5, 2008 at 5:16 AM, wally.ritchie <wally.ritchie@...> wrote: > --- In ydn-javascript@... <ydn-javascript%40yahoogroups.com>, > "Shishir Jain" > > <shishir.jain@...> wrote: > > > > Hi, > > > > Take a look at the code below. Defining font-size for body breaks > the 300px > > right block. Any idea why does it happen? > > > > Thanks & Regards, > > Shishir > > > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " > > http://www.w3.org/TR/html4/strict.dtd"> > > > > <head> > > <link rel="stylesheet" href=" > > > > http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css > " > > type="text/css"> > > <style> > > body { > > font-size: 1em; > > } > > </style> > > </head> > > > > <body class="yui-skin-sam"> > > > > <div id="doc3" class="yui-t6"> > > <div id="hd"> > > </div> > > > > <div id="bd"> > > <div id="yui-main"> > > <div class="yui-b" style="border:1px solid > > #cccccc;height:300px;"> > > </div> > > </div> > > <div class="yui-b" style="border:1px solid > > #cccccc;height:300px;"> > > </div> > > </div> > > > > <div id="ft"> > > </div> > > > > </div> > > </body> > > </html> > > > I'm not sure what you are intending to achieve with font-size 1em:. > The font-size is already precisely set in pixels and line height by > reset-font-grids and the docX divisions depend on this definition of > em for their calculations, most of which are done in ems (but some in > pixels). There are rather complicated interactions with zooming of > text sizes by the user. > > If you want to change font-size, do it with percentage values. This > will allow it to scale properly. If you want to change font sizes, do > it with CSS applied to classes or to id's inside of the docX. For > example, you could change the font size of the "#bd" to 125% or some > other value to make everything larger. > > > |
|
|
Re: Grids Problem when font-size is set.
by wally.ritchie
::
Rate this Message:
--- In ydn-javascript@..., "Shishir Jain"
<shishir.jain@...> wrote: > > Hi, > > Whatever I do with the font-size (whether specify it in pixels, em or %) for > *body* the fixed width column breaks and start rendering at different sizes. > > Just try it and let me know if there is something wrong I'm doing? Why > should the grid block size mis-behave when the font-size is set? > > Thanks & regards, > Shishir > > On Sat, Jul 5, 2008 at 5:16 AM, wally.ritchie <wally.ritchie@...> > wrote: > > > --- In ydn-javascript@... > > "Shishir Jain" > > > > <shishir.jain@> wrote: > > > > > > Hi, > > > > > > Take a look at the code below. Defining font-size for body breaks > > the 300px > > > right block. Any idea why does it happen? > > > > > > Thanks & Regards, > > > Shishir > > > > > > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " > > > http://www.w3.org/TR/html4/strict.dtd"> > > > > > > <head> > > > <link rel="stylesheet" href=" > > > > > > > > > " > > > type="text/css"> > > > <style> > > > body { > > > font-size: 1em; > > > } > > > </style> > > > </head> > > > > > > <body class="yui-skin-sam"> > > > > > > <div id="doc3" class="yui-t6"> > > > <div id="hd"> > > > </div> > > > > > > <div id="bd"> > > > <div id="yui-main"> > > > <div class="yui-b" style="border:1px solid > > > #cccccc;height:300px;"> > > > </div> > > > </div> > > > <div class="yui-b" style="border:1px solid > > > #cccccc;height:300px;"> > > > </div> > > > </div> > > > > > > <div id="ft"> > > > </div> > > > > > > </div> > > > </body> > > > </html> > > > > > I'm not sure what you are intending to achieve with font-size 1em:. > > The font-size is already precisely set in pixels and line height by > > reset-font-grids and the docX divisions depend on this definition of > > em for their calculations, most of which are done in ems (but some in > > pixels). There are rather complicated interactions with zooming of > > text sizes by the user. > > > > If you want to change font-size, do it with percentage values. This > > will allow it to scale properly. If you want to change font sizes, do > > it with CSS applied to classes or to id's inside of the docX. For > > example, you could change the font size of the "#bd" to 125% or some > > other value to make everything larger. > > > > > > > only for normal font size. If the user changes the browser text size, the size of the sidebar will scale accordingly. This is by design, to allow the user to increase font size for accessibility (or because her screen resolution is say 1600 x 1200 which makes 13 pixels a bit on the small size. If you set the body size yourself your results will be browser dependent. You'll break cross browser text-size behavior. I think on IE you will override the browsers setting and break the users ability to change text-size. On FF you may start out the same as IE, but the user will still be able to increase/decrease text size. The main point is that in the grids template the sidebars are of fixed em width but they are not a fixed pixel width. They remain fixed across changes in .yui-tx class and #doc id's which can be done on the fly. If you want to understand better how it works look at the grids.css and play with the styles using Firebug. Dav Glass's gridbuilder running under firebug is a good way to experiment (at least on FF). YUI grids is attempting a very difficult job dealing with the css mess and browser compatibility mess and it does a remarkable job at it. To appreciate this you need only look at behavior across different browsers, especially when text size is changed. The grids css also holds up to additions (e.g. adding a 5 column layout). It's not perfect for every possible application, but it solves many problems with a light footprint. |
|
|
Re: Re: Grids Problem when font-size is set.
by Nate Koechley
::
Rate this Message:
Hey,
On Jul 5, 2008, at 12:26 PM, wally.ritchie wrote: > --- In ydn-javascript@..., "Shishir Jain" > <shishir.jain@...> wrote: >> >> Hi, >> >> Whatever I do with the font-size (whether specify it in pixels, em >> or %) for *body* the fixed width column breaks and start >> rendering at different sizes. >> >> Just try it and let me know if there is something wrong I'm doing? >> Why >> should the grid block size mis-behave when the font-size is set? >>> > The size of the sidebar is defined in "ems". The size will be 300px > only for normal font size. If the user changes the browser text size, > the size of the sidebar will scale accordingly. This is by design, to > allow the user to increase font size for accessibility (or because her > screen resolution is say 1600 x 1200 which makes 13 pixels a bit on > the small size. > > If you set the body size yourself your results will be browser > dependent. You'll break cross browser text-size behavior. I think on > IE you will override the browsers setting and break the users ability > to change text-size. On FF you may start out the same as IE, but the > user will still be able to increase/decrease text size. > > The main point is that in the grids template the sidebars are of fixed > em width but they are not a fixed pixel width. They remain fixed > across changes in .yui-tx class and #doc id's which can be done on the > fly. > > If you want to understand better how it works look at the grids.css > and play with the styles using Firebug. Dav Glass's gridbuilder > running under firebug is a good way to experiment (at least on FF). > > YUI grids is attempting a very difficult job dealing with the css mess > and browser compatibility mess and it does a remarkable job at it. To > appreciate this you need only look at behavior across different > browsers, especially when text size is changed. The grids css also > holds up to additions (e.g. adding a 5 column layout). It's not > perfect for every possible application, but it solves many problems > with a light footprint. > Wally, thanks for the nice words about Grids :) And yes, you're giving Shishir accurate information. Shishir, let me explain it another way so you understand the background more thoroughly. Here is the basic DOM structure that Grids uses for the overall width and for the "template presets" which give you the two column layout with one fixed column: <div id="doc" class="yui-t1"> <div id="yui-main"> <div class="yui-b"> <!-- main content block --> </div> </div> <div class="yui-b"> <!-- / secondary content block --> </div> </div> Note the classes and ids used. #doc, .yui-t1, #yui-main, and .yui-b are all impacted by the page's base font size because the dimensions of all those DOM nodes are specificed in using EM units. EMs are a relative unit where 1em always equals the size of the user's current base font size. If you're using YUI Fonts -- as you should be if you're using YUI Grids -- the base font size for the page is 13px or 13.3333px (where the latter is for IE browsers). If the users adjusts their font size (view the browser menu, keyboard shortcut, and click +mousewheel) the size of the Grids layout will change in response. This is a usability and accessibility feature. You can use whatever font size you wish, but you need to ensure that it's only applied to DOM nodes below the ones in the snippet above. Since div.yui-b is the deepest of those nodes, your font size must apply to children of that. Here is one way to do that that impacts all your content but not any of the Grids-important nodes: <style> .yui-b * {font-size:20px;} </style> Hope that helps. Thanks, Nate |
|
|
Re: Re: Grids Problem when font-size is set.
by Shishir Jain
::
Rate this Message:
Thanks Nate. That explains it very well.
Best regards, Shishir. On Tue, Jul 8, 2008 at 11:59 PM, Nate Koechley <natek@...> wrote: > Hey, > > > On Jul 5, 2008, at 12:26 PM, wally.ritchie wrote: > > > --- In ydn-javascript@... <ydn-javascript%40yahoogroups.com>, > "Shishir Jain" > > <shishir.jain@...> wrote: > >> > >> Hi, > >> > >> Whatever I do with the font-size (whether specify it in pixels, em > >> or %) for *body* the fixed width column breaks and start > >> rendering at different sizes. > >> > >> Just try it and let me know if there is something wrong I'm doing? > >> Why > >> should the grid block size mis-behave when the font-size is set? > >>> > > > The size of the sidebar is defined in "ems". The size will be 300px > > only for normal font size. If the user changes the browser text size, > > the size of the sidebar will scale accordingly. This is by design, to > > allow the user to increase font size for accessibility (or because her > > screen resolution is say 1600 x 1200 which makes 13 pixels a bit on > > the small size. > > > > If you set the body size yourself your results will be browser > > dependent. You'll break cross browser text-size behavior. I think on > > IE you will override the browsers setting and break the users ability > > to change text-size. On FF you may start out the same as IE, but the > > user will still be able to increase/decrease text size. > > > > The main point is that in the grids template the sidebars are of fixed > > em width but they are not a fixed pixel width. They remain fixed > > across changes in .yui-tx class and #doc id's which can be done on the > > fly. > > > > If you want to understand better how it works look at the grids.css > > and play with the styles using Firebug. Dav Glass's gridbuilder > > running under firebug is a good way to experiment (at least on FF). > > > > YUI grids is attempting a very difficult job dealing with the css mess > > and browser compatibility mess and it does a remarkable job at it. To > > appreciate this you need only look at behavior across different > > browsers, especially when text size is changed. The grids css also > > holds up to additions (e.g. adding a 5 column layout). It's not > > perfect for every possible application, but it solves many problems > > with a light footprint. > > > > Wally, thanks for the nice words about Grids :) And yes, you're giving > Shishir accurate information. > > Shishir, let me explain it another way so you understand the > background more thoroughly. > > Here is the basic DOM structure that Grids uses for the overall width > and for the "template presets" which give you the two column layout > with one fixed column: > > <div id="doc" class="yui-t1"> > <div id="yui-main"> > <div class="yui-b"> > <!-- main content block --> > </div> > </div> > <div class="yui-b"> > <!-- / secondary content block --> > </div> > </div> > > Note the classes and ids used. #doc, .yui-t1, #yui-main, and .yui-b > are all impacted by the page's base font size because the dimensions > of all those DOM nodes are specificed in using EM units. EMs are a > relative unit where 1em always equals the size of the user's current > base font size. If you're using YUI Fonts -- as you should be if > you're using YUI Grids -- the base font size for the page is 13px or > 13.3333px (where the latter is for IE browsers). If the users adjusts > their font size (view the browser menu, keyboard shortcut, and click > +mousewheel) the size of the Grids layout will change in response. > This is a usability and accessibility feature. > > You can use whatever font size you wish, but you need to ensure that > it's only applied to DOM nodes below the ones in the snippet above. > Since div.yui-b is the deepest of those nodes, your font size must > apply to children of that. > > Here is one way to do that that impacts all your content but not any > of the Grids-important nodes: > > <style> > .yui-b * {font-size:20px;} > </style> > > Hope that helps. > > Thanks, > Nate > > > |
| Free Forum Powered by Nabble | Forum Help |