Element positioning

They have: 7 posts

Joined: Mar 2004

I've be working with websites less than a year now and had a question regarding element posititioning via CSS2. I've tried relative, absolute, fixed, static, etc. but have reluctantly come to use absolute due to various problems with the others. For units, I've tried in, px, em, %, etc. Again, I have reluctantly come to use "px" due to various problems with the others. In trying to accomadate various user font sizes, screen widths, screen resolutions, web browsers, etc., I thought the "in" physical unit of measurement would be resolution independent, unlike say "px" where say 50px using 800x600 resolution would be a larger physical size than the same number of pixels using 1024x768 resolution. Please correct me where I'm wrong but the way I thought it worked (and should work) is when you specify Xin of an element in your code, you should physically see Xin of your element on your screen. For my discussion, in comparing "px" and "in", "px" is a elemental relative unit of measurement (i.e. 10px = 10px, regardless of the screen resolution; however, 10px (WxX screen resolution) physical size != 10px (YxZ screen resolution) physical size, understandably whereas "in" is a derived (from pixels per inch) unit of measurement in that 3" should = 3" regardless of screen resolution; however, this is not the case. Otherwise, I don't see the point of having a "in" unit of measurement; might as well do everyting in "px", which is what I have resorted to.

Please does anyone have any helpful advice? Thanks.

webspinner

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Yes, true that 1px is different on other screens and that 10px is not equal to 10px in physical size, that is a good reason for that - pixels is a screen measurement (I think).

I think what your problem is, is that you are trying to get everything looking pixel perfect. That way of thinking is not wrong as such, but one must keep in mind is that the way things are viewed on screen and viewed on paper are very different, and so they should be - they are different mediums.

There probably isn't anything wrong with using px but keep in mind though, since you are using CSS to layout your content, you have probably thought of accessibility as well. Having said that, it is probably better to use a relative unit...wait, is px then, a relative unit?

They have: 5,633 posts

Joined: Jan 1970

I gave up on "in" long time ago and i think you should also. "px" is the only thing you should use, especialy if you want to change the size using javascript later. "px" or pixels are the little dots of light on your computer screen. If you get close enough you can count them. (I wouldent sugest it)

In other words use px, its a better bet. The question i want to know is font size. pt or px?

Roo's picture

She has: 840 posts

Joined: Apr 1999

Quote: The question i want to know is font size. pt or px?

pt (points) are used for print.
px (pixels) are used for screen.

He has: 1,758 posts

Joined: Jul 2002

Although... specifying font sizes in pixels prevents the user (i.e. people with bad eyesite) from changing the font size in their web browser. This is an accessability issue and should really be avoided.

It's a bit hypocritical me saying that though, because I use pixels myself!

Andy

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I had good success with using % values for fonts, although others say that ems are better. You could try this for your layout as well if you want it to scale. Or maybe a combination of px and % would work. As always with CSS, it'll take some fiddling to get it to work right. A List Apart has some good articles on scalable CSS layouts (and they're old design was a good example).

I really don't know how ins work as a screen measurement. My guess is that they're probably like pts in that they don't work well on a screen (may be useful for print stylesheets though).

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.