wrong colours

[David Graham]

http://www.w3.org/TR/CSS2/box.html#margin-properties

The image illustrating the article on my screen has a yellowish background
for the the ul element - should be green and blue/purple for the background
of the li's - which should be grey. The dashed border on the second li is
green and this should be black!
Anyway, it says the content width of the li boxes is calculated top down - I
click on the link 'content width' but I don't really get what it is trying
to tell me. In simple terms please, what dictates how wide this will be?
thanks
David

 

[David Graham]

http://www.w3.org/TR/CSS2/box.html#margin-properties

The image illustrating the article on my screen has a yellowish background
for the the ul element - should be green and blue/purple for the background
of the li's - which should be grey. The dashed border on the second li is
green and this should be black!
Anyway, it says the content width of the li boxes is calculated top down - I
click on the link 'content width' but I don't really get what it is trying
to tell me. In simple terms please, what dictates how wide this will be?
thanks
David

Also, printed off the diagram and put my ruler on it and the 'content width
of li' arrow at the top of the diagram does not seem to line up with the
left edge of the Li content boxes!

 

[David Dorward]

http://www.w3.org/TR/CSS2/box.html#margin-properties

The image illustrating the article on my screen has a yellowish background
for the the ul element - should be green and blue/purple for the
background of the li's - which should be grey. The dashed border on the
second li is green and this should be black!

This is a known bug and is mentioned in the errata.

http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x8

Anyway, it says the content width of the li boxes is calculated top down -
I click on the link 'content width' but I don't really get what it is
trying to tell me. In simple terms please, what dictates how wide this
will be?

The core of it is...

If the width is specified, then it is that.
Otherwise, it is whatever is left over after margins, borders, and paddings
have been accounted for.

 

[David Graham]

The core of it is...

If the width is specified, then it is that.
Otherwise, it is whatever is left over after margins, borders, and paddings
have been accounted for.

Perhaps you thought I meant BOX width, the box width includes the margins,
borders and padding but from what i have read the content width excludes all
of these. I think the confusion arises because I don't understand what you
mean by 'left over after....'
I agree that if the content width is explicitly specified then it will
definitly be that width but in the example at
http://www.w3.org/TR/CSS2/box.html#margin-properties it is not stated and
yet when you look at the diagram you can see the content of each Li outlined
by a thin line (which can't be a border because that lies around the outside
perimeter of each Li's padding - so not sure what the line is!) and there is
some space left at the right of each Li's text - making me think something
is dictating that the Li's width should be a bit wider than it's text. Boy
am I confused and I guess I am not interpreting your answer properly but if
you can be so good could you follow up and put me out of my misery with this
box model stuff.

 

[David Dorward]

Perhaps you thought I meant BOX width, the box width includes the margins,
borders and padding but from what i have read the content width excludes
all of these. I think the confusion arises because I don't understand what
you mean by 'left over after....'

#container { width: 100px; }
#element { margin: 10px; padding: 10px; border: solid black 1px; }

You have a space 100px wide.
You have a left margin of 10px. That leaves 90px.
You have a right margin of 10px. That leaves 80px.
You have a left border of 1px. That leaves 79px.
You have a right border of 1px. That leaves 78px.
You have left padding of 10px. That leaves 68px.
You have a right padding of 10px. That leaves 58px.

Thus you end up with a content width of 58px.

 

[David Graham]

#container { width: 100px; }
#element { margin: 10px; padding: 10px; border: solid black 1px; }

You have a space 100px wide.
You have a left margin of 10px. That leaves 90px.
You have a right margin of 10px. That leaves 80px.
You have a left border of 1px. That leaves 79px.
You have a right border of 1px. That leaves 78px.
You have left padding of 10px. That leaves 68px.
You have a right padding of 10px. That leaves 58px.

Thus you end up with a content width of 58px.

Thank you David. I am a bit of a concrete thinker and I appreciate your
time. I would of appreciated what was going on in the diagram in the article
if they had stated somewhere that the UL element (effectively the container
in this case) was lets say 100px wide, then I could have gone through the
process you just showed me - for some strange reason the code that appears
before the diagram has no width stated for the UL. I guess they do state a
width but forgot to add it to the code for everyone to see.
Many thanks
Another David