Re: [css-d] why are ems rendering large?

[Jukka K. Korpela]

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 we have in that 
toolkit?


100% means, when used as the value of the font-size property, exactly 
the font size of the parent element. Nothing more, nothing less.


If you so intensely want to have 1em equal 16px no matter what, why are 
you using the em unit at all? To keep the numeric values smaller? But 
for that, you can use the pc (pica) unit, since, according to the 
definitions in modern CSS, 1pc = 12pt = 16px, as an identity.


Yucca


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

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 the div has a font-size of 110%, then the span would have a 
font-size that is 120% of 110% the divs calculated font-size would be of the 
body font-size.
Stay with me.. :)

Example 1:
http://designdrumm.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Mike & Martha]

-- Original Message --
From: "Karl DeSaulniers" 
To: "CSS-Discuss Discuss" 
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 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 the div has a font-size of 110%, then the span would have a 
font-size that is 120% of 110% the divs calculated font-size would be 
of the body font-size.

Stay with me.. :)

Example 1:
Well, your math is correct, but it shows that the calculated font size 
is based on the span's parent font size which is the div.


Now if you had used a rem in your calculation this wouldn't have 
occurred because the font size would have been base on the Root font 
size; that's the definition of rem, a root-based em.


That's beauty of using rems, they are stable in that they're based on 
the root font-size, but they are dynamic and relate to size changes of 
objects and screens.


/* Example3: */
body {
font-size: 16px;
}
   /* (1.2 * 16px)   = 19.2 px  
*/

Michael Rose


HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com
__







__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

On Jul 25, 2014, at 6:02 AM, "Mike & Martha"  wrote:

> 
> 
> -- Original Message --
> From: "Karl DeSaulniers" 
> To: "CSS-Discuss Discuss" 
> 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 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 the div has a font-size of 110%, then the span would have a 
>> font-size that is 120% of 110% the divs calculated font-size would be of the 
>> body font-size.
>> Stay with me.. :)
>> 
>> Example 1:
>> > >  > 
>> Example2:
>> > >  > 
>> Please someone correct me if I am wrong.
> Well, your math is correct, but it shows that the calculated font size is 
> based on the span's parent font size which is the div.
> 
> Now if you had used a rem in your calculation this wouldn't have occurred 
> because the font size would have been base on the Root font size; that's the 
> definition of rem, a root-based em.
> 
> That's beauty of using rems, they are stable in that they're based on the 
> root font-size, but they are dynamic and relate to size changes of objects 
> and screens.
> 
> /* Example3: */
> body {
>font-size: 16px;
> }
>/* (1.2 * 16px)   = 19.2 px  */
> Michael Rose
> 


My apologies, I was speaking about ems.
Just made reference real quick to rems being the one based on the body only.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Philippe Wittenbergh]

Le 25 juil. 2014 à 20:06, Karl DeSaulniers  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 thread. The root 
element in your html document is .

Try this:


body { font-size: .8em; }
p.a { font-size: 1em; color: red; }
p.b { font-size: 1rem; color: blue; }


 test - font-size: 1em specified
 test - font-size: 1rem specified

Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

On Jul 25, 2014, at 6:24 AM, Philippe Wittenbergh  wrote:

> 
> Le 25 juil. 2014 à 20:06, Karl DeSaulniers  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 thread. The root 
> element in your html document is .
> 
> Try this:
> 
> 
> body { font-size: .8em; }
> p.a { font-size: 1em; color: red; }
> p.b { font-size: 1rem; color: blue; }
> 
> 
>  test - font-size: 1em specified
>  test - font-size: 1rem specified
> 
> Philippe
> --
> Philippe Wittenbergh

Correct. I should have said root.

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

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 | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

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 users
preference for font size - without the compounding issues (and any
other) of the em.



--
Chris F.A. Johnson, 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Fri, Jul 25, 2014 at 2:27 PM, Chris F.A. Johnson
 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%;
> 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.
>
>

Why use rem at all if you are going to fall back to em? You are
probably going to have to do a lot of extra coding to overcome any
issues that arise should the fallback ems come into play. If you code
and structure your pages without worrying about compounding issues
etc, and then the ems kick in on a browser that doesn't support rems,
you're most likely going to have more issues to overcome than if you
fall back to pixels.



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Richard Wendrock Forum]

This is a handle chart.
http://jerekdain.com/fontconversion.html


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher
Sent: Thursday, July 24, 2014 9:53 PM
To: Tom Livingston
Cc: Chris F.A. Johnson; CSS-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 
> mailto: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, correct ?
>
> Tom Livingston wrote:
>> On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
>> 
  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 would be 19px (rounded down) or
>> 1.188em;
>>
>>
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] FireFox issues displaying height of div

[Richard Wendrock Forum]

Does anyone know of an issue with FireFox not displaying the height of a div
properly?

The column on the right with the blue background appears correct in IE and
Chrome. For some reason the column does not extend below the link.
http://advres.thehomepagestore.com/consulting_unconventional_resources.php



Thanks,

Richard

 

 

 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox issues displaying height of div

[David Laakso]

On Fri, Jul 25, 2014 at 3:13 PM, Richard Wendrock Forum <
fo...@thehomepagestore.com> wrote:

> Does anyone know of an issue with FireFox not displaying the height of a
> div
> properly?
>
> The column on the right with the blue background appears correct in IE and
> Chrome. For some reason the column does not extend below the link.
> http://advres.thehomepagestore.com/consulting_unconventional_resources.php
>
>
>
> Thanks,
>
> Richard
>
>

Richard,

I see no difference in the blue column height in the current versions of
Chrome and Firefox  in OS X 10.9.4.

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox issues displaying height of div

[Mike Manley]

Richard Wendrock Forum wrote:

Does anyone know of an issue with FireFox not displaying the height of a div
properly?

The column on the right with the blue background appears correct in IE and
Chrome. For some reason the column does not extend below the link.
http://advres.thehomepagestore.com/consulting_unconventional_resources.php

I don't see the issue you are referring to in my browsers.
Seamonkey-2.26.1 or Firefox-24.6.0 on Gentoo-Linux-x86_64

Mike
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox issues displaying height of div

[Chris F.A. Johnson]

On Fri, 25 Jul 2014, Richard Wendrock Forum wrote:


Does anyone know of an issue with FireFox not displaying the height of a div
properly?

The column on the right with the blue background appears correct in IE and
Chrome. For some reason the column does not extend below the link.
http://advres.thehomepagestore.com/consulting_unconventional_resources.php


   This is what I see:  

--
Chris F.A. Johnson, 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Eric]

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 a fixed value fallback or an EM if
you don't mind the hassle that imposes. But, of course that raises the question
why support ancient UAs when their usage is so low these days? :-)


> On July 25, 2014 at 7:39 AM Tom Livingston  wrote:
>
>
> 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 | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

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 media query. 

Karl

Sent from losPhone

> On Jul 25, 2014, at 4:44 PM, Eric  wrote:
> 
> 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 a fixed value fallback or an EM if
> you don't mind the hassle that imposes. But, of course that raises the 
> question
> why support ancient UAs when their usage is so low these days? :-)
> 
> 
>> On July 25, 2014 at 7:39 AM Tom Livingston  wrote:
>> 
>> 
>> 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 | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox issues displaying height of div

[Philippe Wittenbergh]

Le 26 juil. 2014 à 04:13, Richard Wendrock Forum  a 
écrit :

> Does anyone know of an issue with FireFox not displaying the height of a div
> properly?
> 
> The column on the right with the blue background appears correct in IE and
> Chrome. For some reason the column does not extend below the link.
> http://advres.thehomepagestore.com/consulting_unconventional_resources.php

Do you have different font-size settings in Firefox than other browsers? (I 
personally see no issues at default settings)

Why do you lock the height of div#article (the blue box)? Remove the height 
declaration will certainly improve things for people who don't have the same 
font-size set as you…

Oh, and do try your page while zooming in (text-only zoom menu item) in 
Firefox, or Safari. You’ll see more breakage.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/