Whoa, I haven't kept track of this question due to other projects and a
new smart phone (too nice, might I add), and look at the replies.
Felix Miata wrote:
On 2014-07-26 21:40 (GMT-0400) Chris Rockwell composed:
... the original reason was to fix
some ie6/7 issues with em scaling.
Hence
jul 26 2014 01:24 Karl DeSaulniers k...@designdrumm.com:
I usually go px on the body and % everywhere else.
Why does px on body seems like a good idea for users?
__
css-discuss [css-d@lists.css-discuss.org]
Sent from losPhone
On Jul 26, 2014, at 8:34 AM, MiB digital.disc...@gmail.com wrote:
jul 26 2014 01:24 Karl DeSaulniers k...@designdrumm.com:
I usually go px on the body and % everywhere else.
Why does px on body seems like a good idea for users?
It's actually a method I learned
On Saturday, July 26, 2014, Karl DeSaulniers k...@designdrumm.com wrote:
Sent from losPhone
On Jul 26, 2014, at 8:34 AM, MiB digital.disc...@gmail.com
javascript:; wrote:
jul 26 2014 01:24 Karl DeSaulniers k...@designdrumm.com javascript:;
:
I usually go px on the body and %
Sent from losPhone
On Jul 26, 2014, at 4:59 PM, Tom Livingston tom...@gmail.com wrote:
On Saturday, July 26, 2014, Karl DeSaulniers k...@designdrumm.com wrote:
Sent from losPhone
On Jul 26, 2014, at 8:34 AM, MiB digital.disc...@gmail.com
javascript:; wrote:
jul 26 2014 01:24
On 2014-07-26 18:29 (GMT-0400) Karl DeSaulniers composed:
I usually go px on the body and % everywhere else.
Why does px on body seems like a good idea for users?
It's actually a method I learned online...
As is often the case where a page is trying to make it easy for stylists,
which
Sent from losPhone
On Jul 26, 2014, at 6:57 PM, Felix Miata mrma...@earthlink.net wrote:
On 2014-07-26 18:29 (GMT-0400) Karl DeSaulniers composed:
I usually go px on the body and % everywhere else.
Why does px on body seems like a good idea for users?
It's actually a method I
On Saturday, July 26, 2014, Karl DeSaulniers k...@designdrumm.com wrote:
Sent from losPhone
On Jul 26, 2014, at 6:57 PM, Felix Miata mrma...@earthlink.net
javascript:; wrote:
On 2014-07-26 18:29 (GMT-0400) Karl DeSaulniers composed:
I usually go px on the body and % everywhere
On 2014-07-26 19:43 (GMT-0500) Karl DeSaulniers composed:
Felix Miata wrote:
...CSS for the public web should never size text in px. Sizing text in
px means the optimal base size determined by each user, as embodied in
his browser default size, is totally disregarded, tyrannically usurped
if
Felix, admittedly I never questioned why setting font-size: 100% was a best
practice, it's just always something I've done. Based on your response I
did some quick research and, it appears, the original reason was to fix
some ie6/7 issues with em scaling.
Additionally, I checked normalize.CSS as
Nevermind, its not in normalize.CSS, I scanned too quickly - sorry!
On Jul 26, 2014 9:40 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Felix, admittedly I never questioned why setting font-size: 100% was a
best practice, it's just always something I've done. Based on your response
I did
On 2014-07-26 21:40 (GMT-0400) Chris Rockwell composed:
... the original reason was to fix
some ie6/7 issues with em scaling.
Hence my language in compliant browsers. :-)
Without looking further, there appear to be valid reasons for setting
font-size to 100% on body.
I can't think of any
Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?
Or is
body
{
font-size:100%;
}
—with the underlying hope and assumption that 100% is understood to mean 16px
and from there the leap that 1em equals the 16pixels — all we have in that
toolkit?
John
Le 25 juil. 2014 à 15:06, John j...@coffeeonmars.com a écrit :
Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?
Or is
body
{
font-size:100%;
}
—with the underlying hope and assumption that 100% is understood to mean 16px
and from there the leap
On 2014-07-25 08:15 (GMT+0300) Jukka K. Korpela composed:
The downside of the rem is...
While everything you wrote is or at least appears to be true, it entirely
misses the higher level point I was trying to make, which was to put forth in
simplistic terms the idea that thinking in px is
On Thu, 24 Jul 2014, John wrote:
Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?
Or is
body
{
font-size:100%;
}
—with the underlying hope and assumption that 100% is understood to
mean 16px and from there the leap that 1em equals the 16pixels — all
we
2014-07-25 9:06, John wrote:
Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?
No.
Or is
body
{
font-size:100%;
}
—with the underlying hope and assumption that 100% is understood to mean 16px
and from there the leap that 1em equals the 16pixels — all
Actually, I believe ems are based on the prior font-size of the element in
which its contained. rems are based on body.
For example, If you have a div in the body with no font-size set and a span
inside that div with font-size set to 120% then it will be 120% of the body
font-size.
However, if
-- Original Message --
From: Karl DeSaulniers k...@designdrumm.com
To: CSS-Discuss Discuss css-d@lists.css-discuss.org
Sent: 7/25/2014 4:59:48 AM
Subject: Re: [css-d] why are ems rendering large?
Actually, I believe ems are based on the prior font-size of the element
in which its
On Jul 25, 2014, at 6:02 AM, Mike Martha mmr...@comcast.net wrote:
-- Original Message --
From: Karl DeSaulniers k...@designdrumm.com
To: CSS-Discuss Discuss css-d@lists.css-discuss.org
Sent: 7/25/2014 4:59:48 AM
Subject: Re: [css-d] why are ems rendering large?
Actually, I
Le 25 juil. 2014 à 20:06, Karl DeSaulniers k...@designdrumm.com a écrit :
Just made reference real quick to rems being the one based on the body only.
No.
rems are not – repeat not – based on the font-size on body! They are based on
the font-size of the root element, as I note earlier in this
On Jul 25, 2014, at 6:24 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
Le 25 juil. 2014 à 20:06, Karl DeSaulniers k...@designdrumm.com a écrit :
Just made reference real quick to rems being the one based on the body only.
No.
rems are not – repeat not – based on the font-size on body!
Lack of rem support is easily taken care of with a fallback declaration
using px:
Font-size:16px;
Font-size:1rem;
This allows MOST browsers to use a relative font unit - honoring a users
preference for font size - without the compounding issues (and any
other) of the em.
--
Tom Livingston |
On Fri, 25 Jul 2014, Tom Livingston wrote:
Lack of rem support is easily taken care of with a fallback declaration
using px:
Font-size:16px;
Font-size:1rem;
Better still, using em or %:
font-size: 100%;
font-size: 1rem;
This allows MOST browsers to use a relative font unit - honoring a
On Fri, Jul 25, 2014 at 2:27 PM, Chris F.A. Johnson
ch...@cfajohnson.com wrote:
On Fri, 25 Jul 2014, Tom Livingston wrote:
Lack of rem support is easily taken care of with a fallback declaration
using px:
Font-size:16px;
Font-size:1rem;
Better still, using em or %:
font-size: 100%;
-Discuss; John
Subject: Re: [css-d] why are ems rendering large?
A font-size of 120% is 19px, is my math correct ?
Tom Livingston wrote:
I don't know about golden, but it equal to the browser default which,
if unchanged, is usually 16px.
On Thursday, July 24, 2014, Crest Christopher
Yep this is what I have done for a long time.
The support for the REM unit is now pretty much universal in modern UAs, except
for bugs (one of which I found and reported on pre-IE11). And, in that case the
REM unit was only being ignored for font-size.
If you have to support ancient UAs than use
I usually go px on the body and % everywhere else. Then when doing media
queries, most the time all I have to adjust is the body px size and everything
else sizes with it correctly. There is always some that are a little off, so
then I go an adjust the % for just that one element for just that
Now you confused me ?
Chris F.A. Johnson wrote:
On Thu, 24 Jul 2014, Crest Christopher wrote:
A 120% font-size is 140%, correct ? I rather verify then assume I
understand it correctly !
No. 120% is 120%, i.e. 20% larger than the body (actually than its
container's) size. 140% is 40%
On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Now you confused me ?
.
An em is the same as the font-size; if your font-size is 120%, an
em will be 20% larger than in a block where the font-size is 100%.
Christopher,
I think your question
On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Now you confused me ?
ems are relative to font size.
Given a browser default of 16px, 1em = 16px.
If you have something set at font-size: 120%;, that's 120% bigger than
16px (1em) so, like Chris said, it
On Jul 24, 2014, at 8:18 AM, Tom Livingston tom...@gmail.com wrote:
ems are relative to font size.
Given a browser default of 16px, 1em = 16px.
If you have something set at font-size: 120%;, that's 120% bigger than
16px (1em) so, like Chris said, it would be 19px (rounded down) or
On Thu, Jul 24, 2014 at 11:22 AM, John j...@coffeeonmars.com wrote:
On Jul 24, 2014, at 8:18 AM, Tom Livingston tom...@gmail.com wrote:
ems are relative to font size.
Given a browser default of 16px, 1em = 16px.
If you have something set at font-size: 120%;, that's 120% bigger than
16px
On Thu, 24 Jul 2014, John wrote:
On Jul 24, 2014, at 8:18 AM, Tom Livingston tom...@gmail.com wrote:
ems are relative to font size.
Given a browser default of 16px, 1em = 16px.
If you have something set at font-size: 120%;, that's 120% bigger than
16px (1em) so, like Chris said, it would
On Jul 24, 2014, at 8:35 AM, Tom Livingston tom...@gmail.com wrote:
Where, specifically on the page, are we talking about?
This spot:
http://www.coffeeonmars.com/170_su/template/home.html
this declaration:
#header-logo {
height: auto;
margin: 2em 0 0 16px;
width: 300px;
}
Notice
On Thu, Jul 24, 2014 at 11:38 AM, John j...@coffeeonmars.com wrote:
On Jul 24, 2014, at 8:35 AM, Tom Livingston tom...@gmail.com wrote:
Where, specifically on the page, are we talking about?
This spot:
http://www.coffeeonmars.com/170_su/template/home.html
this declaration:
#header-logo
John,
I don't think you're recognizing that em's inherit from their parent.
- #header-logo is a child of h1
- h1 has a font-size of 2em (set by user agent stylesheet)
- #header-logo therefore has a base font-size of 2em, or 32px (assuming
16px is the base)
- Padding #header-logo by 1.25em is
On Jul 24, 2014, at 8:40 AM, Chris Rockwell ch...@chrisrockwell.com wrote:
I don't think you're recognizing that em's inherit from their parent.
- #header-logo is a child of h1
- h1 has a font-size of 2em (set by user agent stylesheet)
- #header-logo therefore has a base font-size of 2em,
On Thu, Jul 24, 2014 at 11:45 AM, John j...@coffeeonmars.com wrote:
On Jul 24, 2014, at 8:40 AM, Chris Rockwell ch...@chrisrockwell.com wrote:
I don't think you're recognizing that em's inherit from their parent.
- #header-logo is a child of h1
- h1 has a font-size of 2em (set by user agent
So, I either have to keep track of the math, or…is there another, better
way I should have built that lock-up?
If you want to use em's, you'll need to be aware of parent font sizes.
Personally, I don't put img's in h1's, but I see it in practice all of
the time (and it's acceptable as far as
On Jul 24, 2014, at 8:53 AM, Tom Livingston tom...@gmail.com wrote:
Not really. You are currently making that the highest level head
element (h1) of the page. Is that what you want?
Not if the h1-wrapped element is a graphic whose only text opportunity is the
alt tag. if that logo were live
On Thu, 24 Jul 2014, John wrote:
On Jul 24, 2014, at 8:40 AM, Chris Rockwell ch...@chrisrockwell.com wrote:
I don't think you're recognizing that em's inherit from their parent.
- #header-logo is a child of h1
- h1 has a font-size of 2em (set by user agent stylesheet)
- #header-logo
On Jul 24, 2014, at 9:01 AM, Chris Rockwell ch...@chrisrockwell.com wrote:
If you want to use em's, you'll need to be aware of parent font sizes.
Personally, I don't put img's in h1's, but I see it in practice all of
the time (and it's acceptable as far as the standards bodies are
concerned).
Right on…the hide me from view method is one I was encouraged to explore;
have not yet done so.
Take a look at
https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L110
__
css-discuss
On Thu, Jul 24, 2014 at 12:00 PM, John j...@coffeeonmars.com wrote:
On Jul 24, 2014, at 8:53 AM, Tom Livingston tom...@gmail.com wrote:
Not really. You are currently making that the highest level head
element (h1) of the page. Is that what you want?
Not if the h1-wrapped element is a graphic
On Jul 24, 2014, at 9:49 AM, Tom Livingston tom...@gmail.com wrote:
You could, since that h1 is an image, spec it to be font-size: 1em; but I
tend to agree text trumps alt text.
OK..so for the css declaration, it could be:
#logo h1{
font-size:1em;
color:black;
blah;
On Thu, Jul 24, 2014 at 12:52 PM, John j...@coffeeonmars.com wrote:
On Jul 24, 2014, at 9:49 AM, Tom Livingston tom...@gmail.com wrote:
You could, since that h1 is an image, spec it to be font-size: 1em; but I
tend to agree text trumps alt text.
OK..so for the css declaration, it could be:
On 2014-07-24 08:45 (GMT-0700) John composed:
So, I either have to keep track of the math, or…is there another, better way I
should have built that lock-up?
If you are not in need to support ancient browsers, there is an easy way:
instead of 1.25em, use 1.25rem, which matches your
Le 25 juil. 2014 à 01:06, Chris F.A. Johnson ch...@cfajohnson.com a écrit :
Note that you can also specify font-size in rem, which is relative
to the BODY's font-size. See http://t.cfaj.ca/emsize.html.
Ahem, Chris:
rem unit
Equal to the computed value of font-size on the ***root
Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or
rounded down as mentioned 19px, correct ?
Tom Livingston wrote:
On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Now you confused me ?
ems are relative to font size.
Given a
I don't know about golden, but it equal to the browser default which, if
unchanged, is usually 16px.
On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com
wrote:
Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or
rounded down as mentioned 19px,
A font-size of 120% is 19px, is my math correct ?
Tom Livingston wrote:
I don't know about golden, but it equal to the browser default which,
if unchanged, is usually 16px.
On Thursday, July 24, 2014, Crest Christopher
crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote:
I believe so.
On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com
wrote:
A font-size of 120% is 19px, is my math correct ?
Tom Livingston wrote:
I don't know about golden, but it equal to the browser default which, if
unchanged, is usually 16px.
On Thursday, July
On 7/24/14, 19:53, Tom Livingston wrote:
I believe so.
On Thursday, July 24, 2014, Crest Christopher crestchristop...@gmail.com
wrote:
A font-size of 120% is 19px, is my math correct ?
Tom Livingston wrote:
I don't know about golden, but it equal to the browser default which, if
unchanged,
On 2014-07-24 22:47 (GMT-0400) Crest Christopher composed:
Is this a golden rule, 1em = 16px ?
Per happenstance, 16px is the most commonly shipped default. In some
browsers, the default is actually 12pt, but because the display density a
genuine traditional pt depends upon assumes a density
2014-07-25 6:50, Felix Miata wrote:
OTOH, the em unit at the document root, where it's equal to 1rem, is
also equal to the user's definition of optimal text size, as reflected
by the browser's default size setting.
The downside of the rem is lack of support in some old browsers. We need
to
back at this site: http://www.coffeeonmars.com/170_su/template/home.html
I am trying to adjust space to the left to be 1.25em but on some items, like
#header-logo a value of padding-left1.25em produces a space to the eye that
looks 2-3 times that. if I put in 20px, I get a visually correct
Large ? What is the size you want ?
Christopher
John wrote:
back at this site: http://www.coffeeonmars.com/170_su/template/home.html
I am trying to adjust space to the left to be 1.25em but on some items, like
#header-logo a value of padding-left1.25em produces a space to the eye that
On Jul 23, 2014, at 8:38 PM, Crest Christopher crestchristop...@gmail.com
wrote:
Large ? What is the size you want ?
I am hoping that ems will be the same size across the board throughout the
page…my understanding is that they’re appx equal to 16px.
Granted when the user zooms in or out the
On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher crestchristop...@gmail.com
wrote:
Large ? What is the size you want ?
I am hoping that ems will be the same size across the board
throughout the page…my understanding is that they’re appx equal to
16px.
An
On Thu, 24 Jul 2014, Chris F.A. Johnson wrote:
On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher crestchristop...@gmail.com
wrote:
Large ? What is the size you want ?
I am hoping that ems will be the same size across the board
throughout the page…my
A 120% font-size is 140%, correct ? I rather verify then assume I
understand it correctly !
Chris F.A. Johnson wrote:
On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Large ? What is the size you want ?
I am hoping that ems
On Thu, 24 Jul 2014, Crest Christopher wrote:
A 120% font-size is 140%, correct ? I rather verify then assume I understand
it correctly !
No. 120% is 120%, i.e. 20% larger than the body (actually than its
container's) size. 140% is 40% larger.
IOW, if the body size is 16px, 120% is
63 matches
Mail list logo
