CSS Not What I Thought It Would Be

[Tim Milstead]

In principle I like the idea of CSS. I want my content to be separate
from my formatting, but my experience of CSS is not a good one.

I guess it is not a criticism of CSS itself to say that different
browser implementations and levels of support are a pain, but there
comes a point when one has to take a pragmatic rather than idealistic
decision to ditch something right for something that works.

I also have a guilty secret - I miss tables. I know it's wrong but
things were so much easier back then...

Here are two things I find difficult in CSS.

1. The width of an object being width+margin+border+padding as opposed
to being just the width property! Suppose I want two columns one 25%
wide the other 75% wide. I want each column to have a margin of 5px a
1px border and padding of another 5px. I would like to do all this with
just two divs but I can't because the margin, border and padding make
the columns wider than 25% and 75% which means they appear under each
other. There appears to be no way of subtracting the 11px round the
edges off the percentage width of the column (an expression in my css).

I have done something wrong?

2. I find that I just end up having to add divs to get the layout right
which means that my document now contains formatting instructions mixed
with its content - exactly what CSS was meant to avoid.

It seems that JSP and XML with translation are the only ways to keep the
layout separate. Neither of these are particularly handy for simple web
page creation and hosting.

What do people think?

Tim.

 

[Barbara de Zoete]

Here are two things I find difficult in CSS.

1. The width of an object being width+margin+border+padding as opposed
to being just the width property! Suppose I want two columns one 25%
wide the other 75% wide.

Just set width on the narrow column (25%). Leave width:auto; for the other
one. It then should just take up the remaining width. Unless something
else is wrong.

2. I find that I just end up having to add divs to get the layout right
which means that my document now contains formatting instructions mixed
with its content - exactly what CSS was meant to avoid.

That might be because you don't use what is there. The page has many
elements, all off which you can style with CSS. But it is hard to know, if
you don't show us a page on-line. URL please?

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Tim Milstead
finally proclaimed:

1. The width of an object being width+margin+border+padding as opposed
to being just the width property!

That's the CSS Box Model. I personally think that it is badly
implemented and, to me at least, the IE5 "broken" box model makes more
sense! IIRC there is another CSS property that allows you to specify
that the width should be interpreted in that way. Google might help you
find what it is though as I forget.

 

[Alan J. Flavell]

I also have a guilty secret - I miss tables.

Tables are fine for presenting information which is tabular by nature.

What's wrong with (mis)using tables for layout is that tables persist
in "working" no matter /how/ inappropriate they may be to the
presentation situation.

The great thing about CSS is that - used well - it can either assist
(e.g by allowing stuff to float above or below when there's no room
for it at the side), or indeed get calmly and quietly out of the way,
when it's inappropriate to a particular display situation, while doing
a beautiful job in the situations that the designer meant it for.

I know it's wrong but things were so much easier back then...

And the results tended to be so much clumsier, when the browsing
situation varied just a bit too far from what the designer thought was
normal.

On the other hand, CSS is potentially so much more powerful that, when
used badly, it can produce a royal screw-up far worse that the worst
abuses of tables - but that's not the fault of CSS itself, but of the
way some folks attempt to apply it in the general WWW context. And
then there are browser bugs, but (aside from the operating system
component that thinks it knows better than to conform to mandatory
requirements of the specifications) that is all so much better
nowadays.

 

[Barbara de Zoete]

Pondering the eternal question of "Hobnobs or Rich Tea?", Tim Milstead
finally proclaimed:


That's the CSS Box Model.

To me it represents common sense. What if you ship stuff across the
Atlantic in your Ocean Steamer? What good will the deminsions of the items
of your delicate cargo do, if not also the packing itself is taken into
account or the distance the items in the cargo should remain between them
(or both)?

 

[Travis Newbury]

To me it represents common sense. What if you ship stuff across the
Atlantic in your Ocean Steamer?...

Analogies are pretty stupid as you can make one up that supports any
side to any argument. How about facts? Can you not support your
argument using facts?

 

[dorayme]

Analogies are pretty stupid as you can make one up that supports any
side to any argument. How about facts? Can you not support your
argument using facts?

Well, hang on there Travis. You have just thrown out a valuable
means of arguing things. BdeZ's analogy is not too bad to bring
across a concept. Often, assembling facts is quite stupid, the
other side can assemble the different facts or worse, the very
same ones!

You can see the point of an analogy in a way that you cannot see
the point of a fact.

 

[dorayme]

Just set width on the narrow column (25%). Leave width:auto; for the other
one. It then should just take up the remaining width. Unless something
else is wrong.

Yes, this seems sound advice.

A further thing, perhaps someone can talk about the best and
simplest technique they personally favour to get the two divs to
line up height-wise, (align at top being easy of course).

Personally I have given up bothering to design with such a
requirement, it seeming to be rather bothersome. But it can come
in handy when insistently asked to keep a tables layout effect
for some established page - minus the tables! I would not boast
any devices I use, but am all ears on good suggestions and
perhaps others would like to know this too...

 

[Good Man]

A further thing, perhaps someone can talk about the best and
simplest technique they personally favour to get the two divs to
line up height-wise, (align at top being easy of course).

this is ridiculously tricky and there is no 'easy' answer. which is
outrageous considering CSS is all about layout!! the 'equal height'
conundrum with two columns is indeed a huuuuge 'gotcha' when designing
using CSS.

even the CSS-guru site ALA has no CSS answer... they advise using a
background image.

http://www.alistapart.com/articles/fauxcolumns/


otherwise, you can use a combo of js/css as mentioned here:
http://www.paulbellows.com/getsmart/balance_columns/


but, as you will see from hunting around, there is no quick answer....
sucks.

 

[dorayme]

this is ridiculously tricky and there is no 'easy' answer. which is
outrageous considering CSS is all about layout!! the 'equal height'
conundrum with two columns is indeed a huuuuge 'gotcha' when designing
using CSS.

even the CSS-guru site ALA has no CSS answer... they advise using a
background image.

http://www.alistapart.com/articles/fauxcolumns/

Thank you for reminding me of this - good man!

 

[Travis Newbury]

Well, hang on there Travis....
You can see the point of an analogy in a way that you cannot see
the point of a fact.

Sorry dorayme, I disagee. If both you and I can take the same fact,
and use a different analogy to help someone see a fact the way we want
them to see it, then how does that help?

A fact is a fact. One does not need to explain it using something
completely unrelated.

 

[Els]

Sorry dorayme, I disagee. If both you and I can take the same fact,
and use a different analogy to help someone see a fact the way we want
them to see it, then how does that help?

A fact is a fact. One does not need to explain it using something
completely unrelated.

You mean, you've never tried to explain a fact to anyone?
You never said "it's like...." and then had a reply like "Ah! Now I
see what you mean!" ?

 

[Travis Newbury]

You mean, you've never tried to explain a fact to anyone?
You never said "it's like...." and then had a reply like "Ah! Now I
see what you mean!" ?

No, I am saying that someone's "understanding" of a fact can be swayed
via an analogy. which is why they don't allow them in court.

 

[Els]

No, I am saying that someone's "understanding" of a fact can be swayed
via an analogy. which is why they don't allow them in court.

Sorry, missed the 'allowed in court' bit in the above discussion.
I thought Barbara just used a valuable analogy to explain her opinion
on the logic of the box model.
(and I don't think there's anything wrong or stupid about swaying
someone's understanding of the box model in the direction of logic ;-)
)

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
proclaimed:

Sorry, missed the 'allowed in court' bit in the above discussion.
I thought Barbara just used a valuable analogy to explain her opinion
on the logic of the box model.

Yes, but in that analogy the logic of the box model was explained as
knowing the width of the item and then being told that padding is in
addition, so that the shipping company would know how much space to
allocate.

In the IE5 "broken" model, as in shipping, the dimensions of the "cargo"
are specified including the packaging. The shipping company isn't
expected to be told that they have an item measuring 1x1x1 feet with six
inches of padding around it. The expect to be told that the box is
2x2x2. The logic is flawed, or at least it is if you give an irrelevant
analogy that can be used to sway someone to both sides of the argument

 

[Els]

Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
proclaimed:


Yes, but in that analogy the logic of the box model was explained as
knowing the width of the item and then being told that padding is in
addition, so that the shipping company would know how much space to
allocate.

In the IE5 "broken" model, as in shipping, the dimensions of the "cargo"
are specified including the packaging.

Actually, I was thinking that when I first read the analogy

The shipping company isn't
expected to be told that they have an item measuring 1x1x1 feet with six
inches of padding around it. The expect to be told that the box is
2x2x2. The logic is flawed, or at least it is if you give an irrelevant
analogy that can be used to sway someone to both sides of the argument

So, it's not really a bad analogy, just applied to a bad fact (broken
box model)

I can see Barbara's reasoning though, as in width is of the object
inside the packaging (which really only is 1 x 1 x 1 foot), and
padding and packaging are added to know how much room it needs on a
cargo ship. Maybe the analogy should contain the order you place at
the packaging company: "1 x packaging for item of 1 x 1 x 1 feet to go
on cargo ship, preferably with room for 6 inches of padding" ;-)

 

[kchayka]

Maybe the analogy should contain the order you place at
the packaging company: "1 x packaging for item of 1 x 1 x 1 feet to go
on cargo ship, preferably with room for 6 inches of padding" ;-)

And don't forget to allow for the thickness of the container itself.
That would be your box border.

 

[Els]

And don't forget to allow for the thickness of the container itself.
That would be your box border.

Yup - the total size to go on the ship will be larger than the earlier
calculated 2 x 2 x 2 feet

 

[dorayme]

Sorry dorayme, I disagee. If both you and I can take the same fact,
and use a different analogy to help someone see a fact the way we want
them to see it, then how does that help?

A fact is a fact. One does not need to explain it using something
completely unrelated.

This is quite a misunderstanding. I thought BdeZ's analogy not
too bad. But others have pointed out it could be better. Fine!
But your point is about analogies in general.

Of course a fact is a fact! Is it less noteworthy that an analogy
is an analogy?

About explanation, (if I can add to Els' point on this): It is
impossible completely and utterly to explain some things by
reference to facts. These hard gritty little stones just do not
do the trick. In trying to understand most of biological or
computer or mechanical processes, one needs to think in terms of
them having purposes. As a matter of fact they do not have
purposes (let's not argue this for now). But try to explain even
how any control system in any plant (man-made factory or natural)
works to someone without making like it does this _so_ that it
can do that. Analogy with human purpose is built in writ large to
almost every explanation of so much. And we cannot easily or
practically do without it. Try to understand a computer program
in the factest of facts: assembly language! Almost no one can.

And - btw - who sez you can't use analogies in court? Want me to
ferret out transcripts of counsel speeches? Want to leave an
escrow bet on this?

 

[dorayme]

Sorry dorayme, I disagee. If both you and I can take the same fact,
and use a different analogy to help someone see a fact the way we want
them to see it, then how does that help?

A fact is a fact. One does not need to explain it using something
completely unrelated.

.... oh and I forgot to add that it is exquisite that a former
Bush voter should so love facts, not because Bush gets his right,
but rather because it shows a propensity of The Right.

(I can't explain this further here because I cannot risk Steve
Pugh asking me what I am on again... see what he said to me 18
years ago!)

You remind me of Dr. Johnson in your liking facts:

http://www.samueljohnson.com/refutati.html