Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Howdy,
I'm currently working on a fluid Css layout for my site and I'm confused between using em or px.
The question is which one should I use? and why?
Thanks. -
I'm not confused about those, but I am confused about em and ex. When does one use ex?
px -- 12px is a static value
em -- 12em is a dynamic value -- it can mean 12px or 1200px. -
Sam -
In my reading, there appears to be as much difference of opinion about this as there are denominations on Christians. That being said, here's what I understand about them.
If you want to be precise in your measurements and not have the dimensions change on a DIV, use px which stands for pixels.
Em is a relative measurement and has different impacts in its use. If you want your site to very scalable, with DIVs adjusting along with the text , use ems. Be aware of the fact that, because ems are relative, your may get unexpected results in the case of some parent child relationships, such as nested unordered lists. If you set the font size of the LI to more or less than 1.0em, each nested level will be factored by the same amount. The end result is successive levels getting smaller or larger.
So, have I sufficiently muddied the waters for you? :^{> -
- CommentAuthorNick Presta
- CommentTimeFeb 21st 2006
There is no comparison, really.
Pixels should only be used for percise designs where you have everything fixed width. And then, you can still use EMs for fonts.
EMs are good because they allow a site to be resized with text.
Take my site, for example, http://infinity-stuff.com. If you resize the font, the tabs, box and text all get bigger. I can increase the size by 3 before it starts to break off the page. Even then, it's still usable.
The worst thing about using pixels is something like this, http://www.buy.com/ is that if you increase text size, the tabs don't increase (which are probably one of the most important pieces of text on the size) so increasing the text is useless in this case. Also, on sizes like this, http://www.cafepress.com/cp/info/, EMs used incorrectly cause them to be a waste entirely. Finally, you get things like, tabs which break entirely as the text becomes too large for them and whatnot.
I would stick with EMs unless you have a good reason to use pixels. For fonts, relative fonts like x-large, and such work too.
http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm -
Thanks guys !
I now understand what to use em or px for the body font etc, what about margin, padding and height? are the same rules applied too? and what's the impact of that when designing a fluid layout?
@nick1presta
I checked your site source and noticed how well you used EMs, you webpage looks fine in FF and doesn't in IE. My screen resolution is 1024x768, so I wonder if this because of the use of EMs?!
(sorry for the too many noob's questions :) ) -
- CommentAuthorNick Presta
- CommentTimeFeb 22nd 2006
It's not.
The line that IE fails to interpret is:
ul#navigation li a:hover { background: #fff; border-bottom-color: #fff; color: #ff9960; }
Which is just wack for some reason. I'm upgrading designs in the near future so I'm too lazy/tired to debug my CSS now. -
Interesting to note that 4 1/2 years later the http://infinity-stuff.com site Nick Presta referenced as his own and using "em" now uses only "px"...
-
Maybe Presta switched to px because it's easier to maintain the dimensions of the page that way. I generally prefer px unless if I know the site will be used by readers who prefer to change the size of the text.
1 to 8 of 8