This Planet is a Tedious Place...

27/03/08 Better post something for this month...

Right - I've sussed it.

1. Never use percentages for placing stuff using CSS.
2. Always use ems.
3. Decide on one part of the page (or section of the page) that will stretch with the window resizing, then fix the size of everything else.

At least that's the strategy for now. It'll probably break in Explorer because it's got a different idea of the size of an em!

posted by Gruntfuggly # 21:42 5 comments

1. Agreed.
2. Pixels are far more predictable.
3. Meh! Lock it all in - you can't trust browsers!

JoJo # 28/03/08 19:21

1. How do you achieve elastic layouts without percentages...?
2. Ems are good for keeping things looking OK when font sizes are changed, but there are cross browser issues (and I don't mean IE particularly, I had annoying differences between Firefox and Safari).
3. OK, sort of answers (1): You can have elastic layouts, but not completely elastic!

The main thing I would say about sussing CSS is: get to understand positioning and how positioning contexts work (absolute, relative, etc). And then, using this knowledge, avoid using floats (unless a float is really what you need, i.e. you need to understand what floats are meant for too). You'll find your layouts are much more robust and cope with resizing better, etc, etc.

@Jo: Yes, pixels are far more predictable, but how do you cope with font size changes?

Generally, web design is still a bit of a nightmare. I've made some progress in that I can usually get pages to look how I want, but never first time, and never first time in all browsers!

Chris # 02/04/08 17:29

My mum had an Auntie Em.

Steve # 03/04/08 15:11

The trouble with using CSS positioning is that it takes the object out of the flow of the page. Then you're back to all your horrible potential overlap issues. At least with floats, they fit 'in' the document...

Gruntfuggly # 03/04/08 15:18

Ah ha! That's what I meant about getting to understand CSS positioning properly.

Each time you add a position attribute to a container (e.g. div), you create a new positioning context for its children, which can then have their own positioning modes.

So, for example...

div.my_div { position: relative }

...will have no effect on the normal flowed position of my_div, but children of my_div, if positioned absolutely, will have their origin at the origin of my_div, not the page.

Difficult to explain without pictures!

Having said all that, there are problems (as you say) with sizing a parent div to enclose its children if the children are all positioned absolutely (the parent div size will collapse to zero unless explicitly sized).

Chris # 03/04/08 18:06

Somebody # 16/07/24 04:51


Add Comment