PDA

View Full Version : Resolved Ummmm... EMS?



ajhauser
Jan 31st, 2010, 09:33 AM
Hey guys,
After reading several articles on A List Apart I decided I should try to style my new layout using ems. Well, within about 3 minutes I came across a problem that has led me to believe that I have no idea how to use thems.

Thems ems, that is.

I have recreated the standard (no changes - starting point), desired (look), and problematic code pages with the CSS included instead of in an external link. I have not tested this is anything other than FF3 and IE8 so the problem should reproduce itself. I know compatibility isn't the issue here but I don't know if the older browsers with display this incorrectly as well.

Here is the standard header section (nicely color coded) - 1_standard.html (http://www.temp3.hangnailproductions.com/1_standard.html)
As you can see I set the pages line height in the "body" tag to 1.125 em - which I understood was 16x1.125 for a total of 18 pixels. However, I need the quote to fit in the white box a little better, like this - 2_desired.html (http://www.temp3.hangnailproductions.com/2_desired.html)

UNFORTUNATELY, when I change the line height for that section with ems, it squashes the text WAY far down - 3_problem.html (http://www.temp3.hangnailproductions.com/3_problem.html)

So, in order to get the DESIRED line height I had to set it to 1.3 ems, but in my head this should not work because the line height is set in the body tag to 18 pixels, and 18x1.3 should be 23 pixels - or larger lines, right?

Any help on understanding them ems would really be appreciated guys and gals.
Thanks,
-AJ

abduraooft
Jan 31st, 2010, 01:16 PM
Have you checked the article at http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css ?

Margin, line height, padding etc. in ems are all relative to the font size of the element they belong to

ajhauser
Feb 1st, 2010, 06:49 AM
So many MATHS.

Thanks for the great article, I think this (and the linked material) will explain my issue. Good stuff.

Also I read in a few posts that we are marking threads resolved now? If someone could let me know what's up with that I'd be happy to do that with all my posts.

Thanks again - really appreciate the time.
-AJ

ajhauser
Feb 1st, 2010, 07:11 AM
Actually after reading I think my problem was this:

Even though I set the line height in my body tag with CSS to 18 pixels (1.125em) - and even though this was inherited by everything throughout my page - when I went to adjust the line height within another section, that adjustment was based off the current font size - NOT the line height that was set in the body tag.

So when I set line height of my 10 pixel font to .875em (which I THOUGHT would give me 16, because the body line height of 18 x 0.875 = approx 16) - it was actually setting the line height to 9 and reducing by WAY too much.

Hopefully this helps someone else out down the line.

abduraooft
Feb 1st, 2010, 07:12 AM
Also I read in a few posts that we are marking threads resolved now?
Check the last one at http://www.codingforums.com/postguide.htm

ajhauser
Feb 1st, 2010, 07:56 AM
Many thanks