Re: [Design with CSS 3709] em takes font-size from parent not body

Wednesday, April 18, 2012

Hey Larry,

Not sure if you've looked into rem values, but they're the same as em only they reference the parent value. Kinda like using inherit, but a bit different. I usually define my base like this:

body { ... font-size: 62.5%; line-height: 1em; ... }

So anything else I do from there is:

.example { ... font-size: 1.6rem; line-height: 2rem; }

The reason I use 62.5% is because it mods the browser's default font-size to around 10px (most browsers use 16pt as a base size) so any em/rem value I use is a base 10 multiple, which is easy for me to keep straight.

Normalize CSS (http://necolas.github.com/normalize.css/) sets all this up for you, but I would highly suggest using rems with a pixel based fall back prefacing your declarations:

.example2 (font-size: 16px; line-height: 20px; font-size: 1.6rem; line-height: 2rem; }

Just like vendor prefix fall-backs.

Hope this helps,

--
Brandtley McMinn - Owner/Creative Director
http://giggleboxstudios.net
@brandtleymcminn


Tuesday, April 17, 2012 2:37 PM
I have a bunch of pages on my site where the fonts are resizeable.  I am using JavaScript to change the font-size in the body and using em units throughout the pages to make the text proportional throughout.  I am using a control from a third part.  Actually quite a few of them.  These controls get nested.  I have test in the inner-most level that is set to 1em.  What SHOULD happen is that when the font-size is changed on the body, that change should cascade to these inner elements.  However, there is a problem (therefore, this post ;)  )  Somewhere along the line the 3rd party control is setting the font to 12px. No matter what I do to the body's font-size, the inner-most elements are unaffected.  Unfortunately, I think that is EXACTLY right in the way it was designed.  However, that doesn't mean I have to like it!  I want my em units to be based on the body's size not the containing element's.  Is there any way to get that done?


Thanks in advance!
--Larry--
--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii