browser sizing

[robv]

Hi,
I am new to css. I would like to know if there is a rule of thumb so to speak about sizing everything. I am starting to think that using % over pixels for width,height,margins,padding etc. is the way to go to accomodate everyones
browser resolution, however I also don't think its that simple either. Any feedback would be helpful and appreciated.
Thanks
Robv

[kapp3rs]

Using % is definitely not ideal for most all scenarios.

Designers work hard to create designs that they want pixel perfect most times, so if they want a 10px gap between two containers with a 20px padding can you accurately give them the exact 10px they want based on a %? Not usually.

It's very likely that you'll run into situations where browsers will interpret a % width differently than in another browser. So that pretty 960px layout with a 300px column and a 660px column might not render correctly if the browser doesn't output the right pixel amount to meet that exact pixel value. Even if a browser rounds up and adds just 1 pixel extra.. your entire layout will be broken. :(

Generally, the sizing mechanism you use should be selected on a per project basis. It's important to know them all, however. % can be a powerful tool if used correctly and with moderation, but in my opinion, it is definitely not ideal for most designs.

[robv]

Would you or anyone reccomend creating in a 800 x 600 px resolution? I created a form in
1024 x 768 px reolution, and when I viewed it in the 800x600 it was all wrong, all over the place.

[kapp3rs]

Very seldom have I had a project where it was a requirement to support an 800x600 resolution. Most people nowadays can at least run 1024x768. Also, most (probably all) computers purchased now can support 1024x768 also.

I can't say that it's wrong to support it, because taking that extra step to make sure you create a great user experience for everyone is definitely not a bad thing, but most screens are at 1024x768, so you won't really be hurting too many folks :)

[robv]

Thanks, That's the answer I was hoping for.

[greenguy109]

I personally tend to put all my stuff in a container around 760px wide and 100% high with two drop shadows on the left and right borders. If you're designing for commercial purposes (or if you've ever suffered an 800px screen), it makes no sense to lose business over something easily avoidable.

So I center the box too (aka margin-left: auto; margin-right: auto;).

Within the 760px box, I use tend to use percentages and em's because they seem flexible to me. Obviously for absolute positioning needs, I use px. This site sort of uses the look I'm talking about: http://www.colorschemer.com/

[robv]

Thanks greenguy109,
that makes good sense to me.