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

2014-07-23 Thread Chris F.A. Johnson 

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 19[.2]px.


Chris F.A. Johnson wrote:

On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher 
 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 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%.


--
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?

2014-07-23 Thread Crest Christopher 
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 
 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 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%.

__
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?

2014-07-23 Thread Chris F.A. Johnson 

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  
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 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%.


   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?

2014-07-23 Thread Chris F.A. Johnson 

On Wed, 23 Jul 2014, John wrote:

On Jul 23, 2014, at 8:38 PM, Crest Christopher  
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 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%.

--
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?

2014-07-23 Thread John 

On Jul 23, 2014, at 8:38 PM, Crest Christopher  
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 em size will change, but an em here 
should be the same as an em there..

J
__
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?

2014-07-23 Thread Crest Christopher 

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 
looks 2-3 times that. if I put in 20px, I get a visually correct result.

So, something is affecting how the browser is interpreting an “em,” right?

Any suggestions as to what is at work here? Have I unwittingly told the browser 
that an em is more than an em in some locations, but normal-value in others? 
that is what it feels like working with this code.

Thank you,

John
__
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] why are ems rendering large?

2014-07-23 Thread John 
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 result.

So, something is affecting how the browser is interpreting an “em,” right?

Any suggestions as to what is at work here? Have I unwittingly told the browser 
that an em is more than an em in some locations, but normal-value in others? 
that is what it feels like working with this code.

Thank you,

John
__
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] make image bottom-align?

2014-07-23 Thread John 

On Jul 23, 2014, at 7:38 PM, Chris F.A. Johnson  wrote:

> On Wed, 23 Jul 2014, John wrote:
>> it is:  http://www.coffeeonmars.com/170_su/template/home.html
>> the image is controlled by #social-main and it’s containing div is 
>> #main_header
> 
>  http://t.cfaj.ca/pictest/

Chris, thank you for that excellent and illuminating example..

I notice you don’t put your class names in “  “   I had no idea this was OK to 
do..

John
__
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] make image bottom-align?

2014-07-23 Thread Chris F.A. Johnson 

On Wed, 23 Jul 2014, John wrote:

it is:  http://www.coffeeonmars.com/170_su/template/home.html
the image is controlled by #social-main and it’s containing div is #main_header


  http://t.cfaj.ca/pictest/

--
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] make image bottom-align?

2014-07-23 Thread John 

On Jul 23, 2014, at 7:23 PM, Philippe Wittenbergh  wrote:
> As someone already mentioned, this will work fine in this case:
> #main_header { position: relative; }
> #social-main { position: absolute; bottom: 0; right: 0; } /* <-- the image */

Yes, and thank you, Rod and Philippe…that does work.

John
__
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] make image bottom-align?

2014-07-23 Thread Philippe Wittenbergh 

Le 24 juil. 2014 à 11:09, John  a écrit :

> *so* sorry to have not given a link…
> 
> it is:  http://www.coffeeonmars.com/170_su/template/home.html
> the image is controlled by #social-main and it’s containing div is 
> #main_header

As someone already mentioned, this will work fine in this case:
#main_header { position: relative; }
#social-main { position: absolute; bottom: 0; right: 0; } /* <-- the image */


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] make image bottom-align?

2014-07-23 Thread John 
*so* sorry to have not given a link…

it is:  http://www.coffeeonmars.com/170_su/template/home.html
the image is controlled by #social-main and it’s containing div is #main_header

Thank you,

John
__
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] make image bottom-align?

2014-07-23 Thread Tom Livingston 
On Wednesday, July 23, 2014, John  wrote:

> Is there a way to make an image inside a parent div bottom-align? Or
> top-align for that matter?
>
> my method has been to give margin-top values to the image until it lands
> where I want but it’s kind of silly if there’s a declaration that will have
> it go to the bottom and be done with it!
>
> I have tried vertical-align:bottom; but this either isn’t working on my
> page or I mis-understand the implementation.
> tried on both image, then on its parent; neither has an effect.
>
>

Not knowing your exact situation, could you try display:table; and
vertical-align:bottom; on the parent ?


-- 

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] make image bottom-align?

2014-07-23 Thread Rod Castello 
John,
give the parent div:
position: relative; in it's styling, then use absolute positioning for the
image: img { position: absolute; bottom: 0; left: 0;}

Rod Castello



On Wed, Jul 23, 2014 at 4:26 PM, John  wrote:

> Is there a way to make an image inside a parent div bottom-align? Or
> top-align for that matter?
>
> my method has been to give margin-top values to the image until it lands
> where I want but it’s kind of silly if there’s a declaration that will have
> it go to the bottom and be done with it!
>
> I have tried vertical-align:bottom; but this either isn’t working on my
> page or I mis-understand the implementation.
> tried on both image, then on its parent; neither has an effect.
>
> thank you for any clues!
>
> John
> __
> 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] make image bottom-align?

2014-07-23 Thread John 
Is there a way to make an image inside a parent div bottom-align? Or top-align 
for that matter?

my method has been to give margin-top values to the image until it lands where 
I want but it’s kind of silly if there’s a declaration that will have it go to 
the bottom and be done with it!

I have tried vertical-align:bottom; but this either isn’t working on my page or 
I mis-understand the implementation.
tried on both image, then on its parent; neither has an effect.

thank you for any clues!

John
__
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] header float issues

2014-07-23 Thread John 

On Jul 21, 2014, at 10:10 AM, Chris Rockwell  wrote:

> There are a few options.  Try adding `float:left` to #lock-up and then
> removing the margin-top from your image.  You'll need to do some tweaking
> from there.  Also, you could add display: inline-block to both.  If you
> want to try something else, and take advantage of vertical-align, you could
> use display:table on  and then display:table-cell on both #lock-up
> and .

Chris, thank you…I played around with float:left; on the lock-up and that plus 
overflow:hidden; on the parent div seemed to put things right…then a little 
twiddling for that social link.

Thank you for the tips!

John
__
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/