Prev: CSS hack for IE8?
Next: Lack of end tag messes up form styling - a known bug?
From: howa on 9 Apr 2008 23:00
Hi,

In Yahoo YUI Grid CSS,

It specified the relative width of a container (e.g. 750px) by, e.g.

width : 57.6293em; /* 750 div 13 */
*width : 56.25em; /* 750 div 13.3333 for IE */

1. Is this the standard way to define the width if we are using
relative width?
2. Should we also define the relative padding, margin using the above
formula?

Thanks.

From: Bergamot on 10 Apr 2008 00:30
howa wrote:
>
> In Yahoo YUI Grid CSS,
>
> It specified the relative width of a container (e.g. 750px) by, e.g.
>
> width : 57.6293em; /* 750 div 13 */

Huh? There is *no* such correlation between screen pixels and ems. Em is
a measure of font size, which could be any value. I don't know where the
13 comes from, but it is an arbitrary number at best.

> 1. Is this the standard way to define the width if we are using
> relative width?

Relative to what? If it's relative to window size, use %.

I strongly advise against setting anything to 60em, unless it's
max-width. If you used a large default type size like I do, you'd
understand why.

--
Berg
From: howa on 10 Apr 2008 04:50
On 4$B7n(B10$BF|(B, $B2<8a(B12$B;~(B30$BJ,(B, Bergamot <berga...(a)visi.com> wrote:
> howa wrote:
>
>
> Huh? There is *no* such correlation between screen pixels and ems. Em is
> a measure of font size, which could be any value. I don't know where the
> 13 comes from, but it is an arbitrary number at best.

13 mean the default font-size being used by YUI CSS, so the width is
relative to the current font size, this is how YAHOO/YUI currently
work. The advantage is when you zoom in using a larger font, the width
of your container also increase.

I found the above formula really work (hence..IE suck)

I just wonder if any other has used this method if not.


Howard
From: Bergamot on 10 Apr 2008 09:45
howa wrote:
> On 4月10日, 下午12時30分, Bergamot <berga...(a)visi.com> wrote:
>>
>> There is *no* such correlation between screen pixels and ems. Em is
>> a measure of font size, which could be any value. I don't know where the
>> 13 comes from, but it is an arbitrary number at best.
>
> 13 mean the default font-size being used by YUI CSS,

So they are setting a fixed font-size, which is a bad beginning. I
assume that is 13px. BTW, my default text size is 20px, with a 17px
minimum. 13px is intolerably small to me.

> so the width is
> relative to the current font size, this is how YAHOO/YUI currently
> work. The advantage is when you zoom in using a larger font, the width
> of your container also increase.

I'm sorry, but that isn't necessarily an advantage when you set a fixed
width at near 60ems. That just creates a huge amount of horizontal
scrolling for those of us using a larger than average default text size
and/or smaller window sizes. A fixed width in ems can be tolerable for
things like a column down one side of the page as long as it isn't
excessive.

60em may be good for a max-width setting, but never for a fixed width.

> I found the above formula really work

I found the formula really sucks. It's not so noticeable when you use a
small default font size, or very large window sizes.

--
Berg
From: howa on 11 Apr 2008 14:05
On 4$B7n(B10$BF|(B, $B2<8a(B9$B;~(B45$BJ,(B, Bergamot <berga...(a)visi.com> wrote:
> howa wrote:
> > On 4$B7n(B10$BF|(B, $B2<8a(B12$B;~(B30$BJ,(B, Bergamot <berga...(a)visi.com> wrote:
>
> >> There is *no* such correlation between screen pixels and ems. Em is
> >> a measure of font size, which could be any value. I don't know where the
> >> 13 comes from, but it is an arbitrary number at best.
>
> > 13 mean the default font-size being used by YUI CSS,
>
> So they are setting a fixed font-size, which is a bad beginning. I
> assume that is 13px. BTW, my default text size is 20px, with a 17px
> minimum. 13px is intolerably small to me.
>

Nope, default font-size is 13px, but they will use relative font size
relative to this default, e.g. write 12px as 93%.

Their way to use CSS is very flexible and nice with different zoom
level, e.g. you can zoom in or zoom out in Yahoo.com and see.



 |  Next  |  Last
Pages: 1 2
Prev: CSS hack for IE8?
Next: Lack of end tag messes up form styling - a known bug?