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/> (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 <http://twitter.com/#%21/brandtleymcminn> <http://giggleboxstudios.net>
Lawrence Farrell <mailto:lawrence.farr...@gmail.com> Tuesday, April 17, 2012 2:37 PMI 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-unsubscr...@googlegroups.com
-- -- 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-unsubscr...@googlegroups.com
<<inline: compose-unknown-contact.jpg>>
