CSS: absolute v relative

[JuniorOnline]

Hi All,

I am a little confused as what to use and what not to use when it comes to coding my site with css. I am not a big fan of tables and therefore would like ot shift away from that to using containers in CSS.

Could you please shed some light on these questions:

- what do I need to use for text sizes (absolute? relative? and do I use em? or %?

- what do I need to follow to ensure the site would show ok in most browsers? are there websites that you would recommend to read before I make a start?

- do I use relative? or absolute? or BOTH for the containers on the site?

I am getting worried to make a start on my website incase I start off designing and end up finding out I need to start again because the choice I made was incorrect.

thanks for your time.
T

[KeithO]

Originally Posted by JuniorOnline

Hi All,

I am a little confused as what to use and what not to use when it comes to coding my site with css. I am not a big fan of tables and therefore would like ot shift away from that to using containers in CSS.

Could you please shed some light on these questions:

Originally Posted by JuniorOnline

- what do I need to use for text sizes (absolute? relative? and do I use em? or %?

font-size: 11px;
Then just adjust it the same way you would in a document editor like Word.

Originally Posted by JuniorOnline

- what do I need to follow to ensure the site would show ok in most browsers? are there websites that you would recommend to read before I make a start?

depends on what you mean. ie has cherrypicked its interpretation of some css that is being addressed with IE7.

Originally Posted by JuniorOnline

- do I use relative? or absolute? or BOTH for the containers on the site?

depends on how you are setting your margins and padding. there are many articles on alistapart.com and hundreds of samples on csszengarden.com where you can learn things.

Originally Posted by JuniorOnline

I am getting worried to make a start on my website incase I start off designing and end up finding out I need to start again because the choice I made was incorrect.

thanks for your time.
T

design the site first, then go for the coding side.

[ADAM Web Design]

Originally Posted by JuniorOnline

- what do I need to use for text sizes (absolute? relative? and do I use em? or %?

I use %s so that people can adjust accordingly. Browsers such as Firefox ignore fixed sizes (e.g. 11px) and let the user resize anyway, so it might as well be consistent across the board.

Originally Posted by JuniorOnline

- what do I need to follow to ensure the site would show ok in most browsers? are there websites that you would recommend to read before I make a start?

There really aren't any clearly defined rules in this regard, contrary to published opinion. But here's what I do:

1. I open IE and Firefox side by side.
2. I code a section.
3. I look at the section in both browsers.
4. I adjust accordingly.

This ensures that most browsers will interpret the site correctly. About the only "modern" one (and I use that term very loosely) that doesn't seem to is IE for the MAC, but it's obsolete anyway.

1. - do I use relative? or absolute? or BOTH for the containers on the site?

This really depends on your site. Sometimes you don't have to use either, sometimes you have to use relative, sometimes you have to use absolute, and sometimes both.

The thing to remember about absolute positioning is that your positioned element will be removed from the flow of the document and placed in the area you define for it, regardless of what's in that area already...so make sure there's nothing there.

If used properly, absolute positioning can be a godsend. If used incorrectly, it can be hell in high heels.

Originally Posted by JuniorOnline

I am getting worried to make a start on my website incase I start off designing and end up finding out I need to start again because the choice I made was incorrect.

That's because you haven't done it yet. But you have to take a learning curve and sometimes screw something up in order to figure stuff out. So dive in, get your hands dirty, get annoyed with the code...it's part of the mystical journey of CSS.

[JuniorOnline]

- do a lot of people use Netscape? and do I need to go around and look for netscape fixes at a later stage?

- if I use font sizes that change, and I use absolute positioning for the containers on the page, doesnt this make the text extend and look out of proportion from the surrounding borders? or is there usually a solution for that?

- what do you think of this code?

the replies for this post are great:) - thanks a lot

I will make a start on the design and do like you said, keep testing using both browsers instead of just one..this should keep me heading in the right direction.

[Faglork]

Originally Posted by KeithO

font-size: 11px;
Then just adjust it the same way you would in a document editor like Word.

Fixing the size with px means that visitors with IE will be unable to change the font size.

You *need* fixed sizes only for rigid, fixed, print-oriented designs which fall apart on changing font size.

IMO, font size should be user-selectable, so relative units should be preferred. One way of doing this is pointed out at
http://alistapart.com/articles/relafont

faglork