Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: css - px & em  (Read 4071 times)

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
css - px & em
« on: April 03, 2009, 11:06:40 AM »

In working on getting my little text wrapping project to operate, I had reason to look at px===em values.
This was an interesting find.
http://www.astahost.com/info.php/sizes-webdesign-em-vs-px_t8926.html
Logged
Of all the things I have lost, it is my mind that I miss the most.

funlw65

  • Hero Member
  • *****
  • Karma: 96
  • Posts: 771
    • Country Lab
Re: css - px & em
« Reply #1 on: April 03, 2009, 04:09:01 PM »

A reference article, thank you!
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: css - px & em
« Reply #2 on: April 03, 2009, 04:34:58 PM »

What people don't tell you is that browsers convert your ems or percentages or whatever into pixels when rendering so you could just as well use pixels from the start anyway. Of course, there's the "can't resize text set in pixels" thing in IE.older to consider.
Personally I use ems for everything except the base (body) font style these days, but only because I'm used to it.
With FF and Safari (and IE?) adopting Opera's page zoom technique (finally!), text size method is less important, imho.
Logged

jlhaslip

  • Sr. Member
  • ****
  • Karma: 16
  • Posts: 374
    • My snews with AEF Forum site
Re: css - px & em
« Reply #3 on: April 03, 2009, 11:18:27 PM »

Good link.
Did you notice that I had a reply on that topic you linked to?
Well, subsequent to the reply, and following some further investigations, trying to standardise the font rendering across browsers, the approach that has worked the best for me is the following:
Code: [Select]
/*
 * as per http://clagnut.com/blog/348/ and http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
 */

 body {font-size:62.5%}

 // suggested sizes of fonts

 #navigation {font-size:1em; }              /* displayed at 10px */
 #content {font-size: 1.2em; }              /* displayed at 12px */
 #sidebar1 {font-size: .9em; }              /* displayed at 9px */
 #sidebar2 {font-size: .9em; }              /* displayed at 9px */
 #sidebar3 {font-size:  1em; }              /* displayed at 10px */
 #footer {font-size:  0.8em; }              /* displayed at  8px */
 input, select, th, td {font-size:1em}      /* displayed at 10px */

 // use this formula for calculating em sizing in child elements
 // child pixels / parent pixels = child ems
has been working flawlessly for me. All the Browsers I have tested follow the above rules to the Tee... resizeable and common font sizing are displayed on all Browsers I have tested. Safari, Firefox, IE, Opera, Konquerer.
(running Linux, so can't test Chrome)

Logged
Yes! I have no siggy.

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: css - px & em
« Reply #4 on: April 04, 2009, 12:59:14 AM »

Good link.
Did you notice that I had a reply on that topic you linked to?
Actually, yes I did notice ;)

Now, here is something else I didn't know about, and effects my little project...
line-height can be expressed as a fixed size (length), percentage, number (multiplier) [and inherit but not worried about that]

so
Code: [Select]
body {font-size:62.5%; line-height:1.25; }can really make a big difference when trying to limit the number of stacked floats text is to sit against... but that is another story..
Logged
Of all the things I have lost, it is my mind that I miss the most.

jlhaslip

  • Sr. Member
  • ****
  • Karma: 16
  • Posts: 374
    • My snews with AEF Forum site
Re: css - px & em
« Reply #5 on: April 04, 2009, 02:33:31 AM »

When you specify the line-height in the fashion you show above, does the line-height change with the Font-sizing specified in the more specific rules?

(The Astahost Forum site is a sister site to the one I usually hang around on (trap17). Got some good info on there.)
« Last Edit: April 04, 2009, 02:35:46 AM by jlhaslip »
Logged
Yes! I have no siggy.

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: css - px & em
« Reply #6 on: April 04, 2009, 03:30:40 AM »

http://archivist.incutio.com/viewlist/css-discuss/7678
.. from above, short answer is yes.
Quote from: 'Eric Meyer'
    body {font-size: 1em; line-height: 1.5;}

Now the multiplier of '1.5' is inherited downward to descendant
elements, and so each element's 'line-height' will be calculated as
1.5 times the value of 'font-size' for each element.
Logged
Of all the things I have lost, it is my mind that I miss the most.

jlhaslip

  • Sr. Member
  • ****
  • Karma: 16
  • Posts: 374
    • My snews with AEF Forum site
Re: css - px & em
« Reply #7 on: April 04, 2009, 05:47:37 AM »

Perfect.
That technique will be added to the list.

Thanks for the tip.
Logged
Yes! I have no siggy.