Relative width in CSS

[howa]

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.

[Bergamot]

Re: Relative width in CSS

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

[howa]

Re: Relative width in CSS

On 4$B7n(B10$BF |(B, $B2<8a(B12$B ;~(B30$BJ,(B , Bergamot <berga...@visi. comwrote:

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

[Bergamot]

Re: Relative width in CSS

howa wrote:

On 4月10æ—¥, 下午12時30åˆ †, Bergamot <berga...@visi. comwrote:

>>
>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

[howa]

Re: Relative width in CSS

On 4$B7n(B10$BF |(B, $B2<8a(B9$B; ~(B45$BJ,(B, Bergamot <berga...@visi. comwrote:

howa wrote:

On 4$B7n(B10$BF |(B, $B2<8a(B12$B ;~(B30$BJ,(B , Bergamot <berga...@visi. comwrote:

>

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.

[Jonathan N. Little]

Re: Relative width in CSS

howa wrote:

On 4$B7n(B10$BF |(B, $B2<8a(B9$B; ~(B45$BJ,(B, Bergamot <berga...@visi. comwrote:

>howa wrote:

>>On 4$B7n(B10$BF |(B, $B2<8a(B12$B ;~(B30$BJ,(B , Bergamot <berga...@visi. comwrote:
>>>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%.

What do you mean "nope"? Setting the base font in pixels and then
defining other rules in "%" from that absolute value is *not* relative
font sizes! Relative font sizes are using %, em, ex, from the user's
default! I.e., default "body { font-size: 100%; }"

He just wrote 13px is too small for him to read so why would 93% of 13px
be any more legible? Especially if he is stuck using IE6.

>
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.
>

Which browser here? IE7? If they have IE6 your 13px will be 13px...no
zoom. I guess he could change his monitor resolution for your page, now
that would be "flexible"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[Bergamot]

Re: Relative width in CSS

howa wrote:

On 4月10日, 下午9時45分 , Bergamot <berga...@visi. comwrote:

>>
>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

Excuse me? *My* default font size in *my* browser is 20px. What they set
in their stylesheet as a default is irrelevant.

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

Um, if I have trouble reading 13px, how do you expect me to read 12px?

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.

All I see when I go to yahoo.com is a whole bunch of horizontal
scrolling. How is that "very flexible and nice"? Must be like beauty -
in the eye of the beholder. :-\

BTW, the whole thing would be quite unreadable if I didn't enforce that
17px minimum font size. The only good thing I can say about it is that
there don't seem to be a bunch of overlapping elements like I find at
many other sites.

--
Berg