Converting em to pixels

[team1504]

Hi,
I wanted to convert all the units of one of my projects to either percentages or pixels and I was wondering what the conversion between em and pixels are.

Here is my understanding that 1.0 em is the letter em at 16 pixels.
So, am I correct in assuming that, 1.6 em is equal to 1.6 * 16 pixels, which is 25.6 pixels?

Also, isn't it impossible to use less than a whole pixel, so what would you recommend in the case that I want an element's heigh to be 25.6 pixels?

Thanks in Advance,
Team 1504

[ScallioXTX]

1 em is defined as the text size of the browser. The fact that (most) browsers are by default set to 16 px does not mean that 1em=16px. It's not.
em, like percentages are only defined relatively, not absolutely. That is the very reason percentages and ems are recommended over px in web design; if I have set my browser to a larger text size than the default, your website should also be a bit bigger than the default.
Of course there are some situations where this is impractical, but as a general rule of thumb you should stay clear from px.
At least that's my opinion.

[felgall]

Most modern screens don't have 16px equal to 1em. They have a wide range of different values depending on the screen. 16px was common at one point but even then it wasn't all that common.

The conversion is somewhat similar to asking how long is a piece of string. Or how to convert between oranges and apples.

[dresden_phoenix]

think of ems as a variable. 1em= font size, in px, of the container element.

if you srat with a div, whose font size is set to 20px, inside that div there is a P whose font size is 50% ( or even .5em) THEN the value 1em for any tag INSIDE that P will be 10px.

20px(1em inside div) * 50%= 10px ( =1em inside div p)

So you have to follow the values of the text throught the cascade in order to know what 1m is equivalent if you like that 16px starting point you could set HTML{font-size:16px;} That creates a consistent starting point for all browsers, but it also means all your other tags change proportional to this, so you have to be careful.


BTW, there is no such thing as a half pixel. so if you calculations lead you to a measure like 12.6 px, it is best to allow for some wiggle room in the design as some browsers will round up some will round down and some will show behavior which will make you wonder if the programmers even bothered to get a GED before they applied for work at M$....

[team1504]

Ahh okay. Well then I guess I will keep the units at em then.

However, the one propagating force against not using em's was the invalidity in the W3C validator.

Is there a way to convert between ems and percentages or is that like green and red apples?

Also, personally, I prefer hybrid layouts that use px and %(or other relative units) when necessary. Another thing I favour is min and max dimensions in pixels so that I can exhibit some control over the wireframing /layout of my page.

Another reason why I do not like soley %'s is because of the possibility of being maximised on a huge resolution composed of multiple monitors. Although this would rarely happen, I do not want to take the risks of my text being stung out in one line.

[dresden_phoenix]

when applied to an element's width, ems are percentages. Except the percentage is based on the base font size rather than the container elements width. It's not to much about comparing apples to apples is using the right tool for the right job to begin with.

When you think percentages, you are basing your calcs on the parent, but when you are using ems, to a degree, you are thinking content.

When talking fonts-size.. ems and % are essentially the same font-size:2em and font-size:200% do the same thing.

it seems that what you want to do could be accomplished with min/max width



hope that helps

[team1504]

It did help a little, but what I am using the em as the unit for the line-height for a horizontal list that in a way determines the height of the container of that horizontal list.

It is this way because the container only contains those list items.

When I was validating said page, I saw that the W3C validator did not recognise or recognised the em unit an invalid.

So I was looking for what other unit could I use for the line-height:1.6em; to maintain the dimensions of the horizontal list container with valid units.

I hope that helped explain what I am trying to achieve more. I apologise if I am being confusing, but please let me know if you have any questions or confusions.

I really appreciate all the help!

[ScallioXTX]

You can use line-height "unit-less" so to speak: line-height: 1.6;

[dresden_phoenix]

Scallio beat me to it. Line height is a proportion or a fixed number. In essence it demonstrates what I said about ems being a ratio. Line height 1=1em or 100%.. I never realized W3C wouldn't validate if you used em or percentages but maybe they are just saving you some extra typing? lol

[team1504]

At first I was like oh wonderful! But, then I realised I also have the height set to 1.6em.

So I misspoke when I said the line-height acts as the height Both line-height and height are set to 1.6em.

So taking Scallio's advice and I removed em. This gets rid of the error for the line-height attribute, but causes one for the height attribute because height needs units. And I can't use ems, so what other unit and value should I substitute it with?

Any suggestions?

Edit:

Scallio beat me to it. Line height is a proportion or a fixed number. In essence it demonstrates what I said about ems being a ratio. Line height 1=1em or 100%.. I never realized W3C wouldn't validate if you used em or percentages but maybe they are just saving you some extra typing? lol

hmm so would

line-height:1.6;
height:160%;

be sufficient and equal to 1.6 em for both attributes then?

[team1504]

Edit:


hmm so would

line-height:1.6;
height:160%;

be sufficient and equal to 1.6 em for both attributes then?

Oh No, another Edit.
I tested it and just realised that dresden_phoenix's conversion 1em = 1 = 100% only works for the line-height attribute.

So I guess we are back to the original question before any of the edits

Instead of 1.6em, which is invalid, or 1.6, which is not possible, for the height attribute, what other unit and value should I substitute it with?

[Becky84]

Which validator are you using which says that em units for height is invalid?

I tend to use ems much more than any other unit unless I have fixed width images so that as much as possible all the elements are relative to each other.

I just tried the following through the W3C Unicorn validator and it came out fine, are you sure you don't have a different error above the statement which is causing the error?

div {
line-height: 1;
height: 150%;
background-color: red;
margin-bottom: 1em;
}
 
span {
    height: 2em;
    line-height: 0.5;
    background-color: green;
    display: block;
}

[xhtmlcoder]

Off Topic:

team1504 meant; line-height verses height and the fact line-height doesn't strictly need units - I suspect the sentence got slightly muddled.

[Stevie D]

hmm so would

line-height:1.6;
height:160%;

be sufficient and equal to 1.6 em for both attributes then?

Nope

Setting a percentage on an element dimension sets it relative to the parent element. So if you have width:50%, it makes it half the width of the parent element; if you have height:160%, it makes it 1.6 times the height of the parent element.

There's nothing wrong with having height:1.6em, which would set it to the size you want, although I think in this context you might be better to leave it off altogether. The problem is if the text runs onto a second line, you've got a fixed height that isn't enough for the second line.

[team1504]

Which validator are you using which says that em units for height is invalid?

I tend to use ems much more than any other unit unless I have fixed width images so that as much as possible all the elements are relative to each other.

I just tried the following through the W3C Unicorn validator and it came out fine, are you sure you don't have a different error above the statement which is causing the error?

div {
line-height: 1;
height: 150%;
background-color: red;
margin-bottom: 1em;
}
 
span {
    height: 2em;
    line-height: 0.5;
    background-color: green;
    display: block;
}

What is the difference between the Unicorn Validator and the normal validator at validator.w3c.org?

Off Topic:

team1504 meant; line-height verses height and the fact line-height doesn't strictly need units - I suspect the sentence got slightly muddled

I probably did. Sorry guys.

Here is what the CSS Validator shows:
W3C CSS Validator results for TextArea (CSS level 3)

Sorry! We found the following errors (2)
URI : TextArea
46 ul#navigationList ul Parse Error [empty string]
47 ul#navigationList ul Parse Error [empty string]


When I 'd that error (Parse Error [empty string]), here is what I got:

Thats because the validator only shows valid CSS hence this part
Valid CSS information
The font: .8em isn't valid CSS so it doesn't show on the validator page.
bazz
10-26-2008, 07:02 PM
Blimey!!
I missed that.
bazz

from this page

However, now that I am actually looking at lines 46 and 47 border-radius is defined...
But when I googled the error, it had nothing to do with border-radius and everything to do with using em's.

Here is a segment of that css lines 43-47.

height:1.6em;
    			line-height:1.6em;
    			z-index:2;
			border-bottom-left-radius:55px;
			border-bottom-right-radius:55px;

So essentially, I was hoping you guys could help me fix this error, which I thought was due to using ems as the unit.

I apologise if I made things more confusing and I hope you guys can still help me.

Thanks in Advance,
Team 1504

[ScallioXTX]

Do you have a website we can see this in action and explain what you need? All this theory is making me a bit dizzy

[team1504]

Do you have a website we can see this in action and explain what you need? All this theory is making me a bit dizzy

Unfortunately not
This is all just small experiments / projects I am doing to refine my skills.

Can I clarify on anything or do you want me to restate it in a clearer fashion?

[dresden_phoenix]

why are you setting the height?
if you set the height to 1.6em it will be 1.6 tall even if the line wraps ( essentially cutting off the second line), if you dont want this to happen then DONT set the height at all. the height of the object will be whatever it needs to be to contain the whole content. so if it's one line it will be 1.6em.. if its 2 it will 3.2em and so forth.

[team1504]

when I removed the height:1.6em, I still got the error on lines 46 and 47, which have to do with border-radius.

So I 'd the parse error with border radius and found this sp forum thread:
http://www.sitepoint.com/forums/css-...or-731686.html

I think looked in the reported bugs with the W3C validator and other have had this problem too.

I am really sorry for wasting your time, but I did learn a lot about the em unit

I would have searched SP forums, but nothing came up when I searched for Parse Error dealing with the em unit, which Google results said the parse error dealt with.

I sincerely apologise and I thank you for your help and time