Tag Archives: css

CSS font size chart ( by px => percent )

This is very useful and provided by YUI (Yahoo! UI Library).

I didn’t have any good impression toward to Yahoo! before.

But i am very glad they could share their UI database to open source.

Check out the original documents from here

http://developer.yahoo.com/yui

If you want this size in pixels (px) Declare this percent (%)
10 77
11 85
12 93 (was 93)
13 100
14 108 (was 107)
15 116 (was 114)
16 123.1 (was 122)
17 131 (was 129)
18 138.5 (was 136)
19 146.5 (was 144)
20 153.9 (was 152)
21 161.6 (was 159)
22 167
23 174
24 182
25 189
26 197

CSS Hacks (for IE 7, IE 6, Opera, etc)

The following CSS selectors are considered workarounds and hacks for specific web browsers.

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Source: CSS Hacks

Usage
If you want to add 5px padding to a div element called #comments specifically for IE 7, then you can use the following hack:

*:first-child+html #comments {
padding: 5px;
}

But if you want to apply the padding just for IE 6, then the following will do the trick:

* html #comments {
padding: 5px;
}

Note that CSS Hacks are not recommended due to their dependence on browser bugs and therefore they should only be used as the last resort.

A more comprehensive article on CSS Hacks can be found here.

Source: http://eisabainyo.net/weblog/2007/04/18/css-hacks-for-ie-7-ie-6-opera-etc/

Convert em,px,pt and % in css

Very useful chart for who cares and designs with web standard.

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

http://sureshjain.wordpress.com/2007/07/06/53/
by Suresh kumar