Help clarifying css width property

Guest · May 8, 2006

I've done my homework by reading the spec and searching the net, but I'm
still confused about the CSS width property as it relates to the ancestor.

Using the example: the nearest ancestor's (A) content area is 100px. The
box inside it (B) has a width of 100% with no other dimension properties. My
assumption is that the content width, the padding boundary width, the border
boundary width, and the margin boundary width are all 100px.

Now, if I add a left or right dimension to the margin, border, or padding
does the content width of B shrink by the sum of these widths? Or does the
content area "push" these dimensions out beyond 100px?

Using the same boxes, assume that B has a width property of 90% and assume
the sum of the widths of the padding, border, and margin are 6px. Is the
content width of B 90px or is it actually 94px?

Sorry for asking something this basic, but I got confused when trying to
understand it.

Thanks

Tom

John Malone · May 8, 2006

8) I was going to answer all the questions BUT...
That might not be much real help...
You have FrontPage so.... make a page.

Put your CSS in the heading and have at it.
It is far better to see it for your self. (at least for me).

To get you started here is some css...
Put this in the <head> Just before the </head> tag....

<style type="text/css">
body {
margin: o;
padding: 0;
}
#block_A {
width: 100px;
color: black;
background-color: red;
}
#block_B {
width: 100px;
color: black;
background-color: blue;
}

#block_AA {
width: 100px;
color: black;
background-color: red;
}
#block_BB {
margin:0px;
Border: 0px black;
padding: 0px;
width: 100px;
color: black;
background-color: blue;
}
</style>
===========================
NOTE: block_BB is set at "0" Change to suit your wants / needs
The blue block is in the red block
===========================
Now you can do the HTML like this...

<div id="block_A">
<div id="block_B">
</div>
</Div></td>

and or

<div id="block_AA">
<div id="block_BB">
</div>
</Div>
=======================

That puts block B (blue) inside A (red)

Now you can play with it all you want...

Here is one of the best easy explanations I have read
-----------------------------------
Real basic CSS in FP?

CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,

p { color:blue; }

That whole line is a rule. The color:blue is a style. The "p" is a selector.

Selectors can be of four different kinds -

1. a tag name
2. a custom class
3. an id selector
4. a descendent selector

The example above is using a tag name as a selector - all <p> tags on the
page will contain blue text.

A custom class would look something like this -

..special { color:green; }

So, all <p> tags containing that class specification would contain green
text instead of blue, e.g.,

<p class="special">this is green</p>

An id selector would look like this -

#reallySpecial { color:red; }

and you can apply it like this -

<p id="reallySpecial" class="special">this is red</p>

What you can see from this is that the id selector's rule has overridden the
class selector's rule, because the text is red. This illustrates one of the
fundamental differences between id selectors and custom classes - the former
have a 'greater specificity' and will 'trump' other rules that apply but
with a lower specificity, like custom classes.

Finally, a descendent selector will look like this -

..special span { color:black; }

It says to make any span tag's contents black when they occur inside a
container with a class of 'special', e.g.,

<p class="special">This text is blue except <span>for this, which is
black</span></p>

The selector specifies the 'descent' of the rule from container to content,
i.e., from 'ancestor' to 'child', where, in this case, the <p> tag is the
ancestor, and the <span> tag is the child.

One final thing. ID selectors must be unique, in that only a single element
on any given page can possess it, e.g.,

<p id="reallySpecial">whatever</p>
<p id="reallySpecial">whatever</p>

is an illegal instance of this, since there are two elements, each of which
has the id="reallySpecial" value.

A class selector can be used any number of times on a given page, e.g.,

<p class="special">This text is blue except <span>for this, which is
black</span></p>
<p class="special">This text is blue except <span>for this, which is
black</span></p>

would be perfectly valid.

In the scheme of things, there are rules for calculating the specificity of
the styles. Here are some of the rules -

1. The style that is closest to the element being styled wins in the absence
of other mitigating factors. This is why you cannot trump font tags with....

CSS, since the font styles are always closer.
2. A redefined tag has a specificity value of 1.
3. A custom class has a specificity of 10.
4. An id selector has a specificity of 100.

Thus, in this case, the green color would have a specificity of 1 and the
custom class of 10. The class wins.

h1 { color:green; }
..headline { color:red; }

<h1 class="headline">This is red</h1>
============================

It is nice that you are taking the time to learn some CSS
8)
Padding is inside the container
Margin is outside

Hope this helps some
--
John Malone
==============
| I've done my homework by reading the spec and searching the net, but I'm
| still confused about the CSS width property as it relates to the ancestor.
|
| Using the example: the nearest ancestor's (A) content area is 100px. The
| box inside it (B) has a width of 100% with no other dimension properties.
My
| assumption is that the content width, the padding boundary width, the
border
| boundary width, and the margin boundary width are all 100px.
|
| Now, if I add a left or right dimension to the margin, border, or padding
| does the content width of B shrink by the sum of these widths? Or does
the
| content area "push" these dimensions out beyond 100px?
|
| Using the same boxes, assume that B has a width property of 90% and assume
| the sum of the widths of the padding, border, and margin are 6px. Is the
| content width of B 90px or is it actually 94px?
|
| Sorry for asking something this basic, but I got confused when trying to
| understand it.
|
| Thanks
|
| Tom
|
|

Murray · May 8, 2006

Nice summary....

Guest · May 8, 2006

Thanks John

I had a copy of your syntax quote from another thread, but repitition is a
good thing.

Unfortunately the code you included in your post doesn't work in Firefox or
Netscape (and therefore I'm assuming is non-compliant). There are a couple
typos (an unnecessary </td>, o vs 0 in the body css rule), but even after
those are fixed FF and NS do not display boxex in boxes. IE does.

And, in the spirit of first hand learning, I'll let you find the problem.

I really do appreciate your post and have added it to a test web site I use
for just this type of experimentation.

Tom

Guest · May 8, 2006

John,

This is a good opportunity to point out why it can be difficult to run tests
in CSS/HTML to learn. Good 'ol browser compliance. If you create a page
with the following, which is based on the code you included in your post, and
then run it through multiple browsers (I use IE 6.0, Firefox 1.5, and
Netscape 7.0) people will quickly see why things can get so frustrating.

FF and NS will show Block BB (150% of Block AA) as spanning outside AA while
IE pushes on AA expanding it to the size of BB.

Although I always assume that FF is the most compliant, this makes hands on
learning a bit of a challenge. Your code, however, is a good base for
running these type of experiments.

Tom

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS/HTML Test - Width</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align-left;
}
#block_A {
width: 500px;
color: black;
margin: 50px;
border: solid 50px black;
padding: 25px;
background-color: red;
}
#block_B {
width: 100%;
color: white;
border: solid 0px black;
background-color: blue;
}
#block_AA {
width: 500px;
color: black;
margin: 50px;
border: solid 50px black;
padding: 25px;
background-color: red;
}
#block_BB {
width: 150%;
color: white;
margin: 0px;
border: solid 0px black;
padding: 0px;
background-color: blue;
}
</style>
</head>

<body>
<div id="block_A">Block A width 500px. The background is red, the margin is
50px transparant, as always, the border is 50px black,
and there is 25px padding around the text.
<div id="block_B">Block B The background is blue and there are no margins,
borders, or padding.
The width is set to 100% (of its nearest ancestor: Block A).
</div>
</div>

<div id="block_AA">Block AA (duplicate of Block A) width 500px. The
background is red, the margin is 50px transparant, as always,
the border is 50px black, and there is 25px padding around the text.

<div id="block_BB">Block BB The background is blue and there are no margins,
borders, or padding.
The width is set to 150% (of its nearest ancestor: Block AA).

</div>
</div>
</body>

</html>

John Malone · May 8, 2006

Thought you might like it. 8)
I forgot to tell him to try putting content in the boxes though..

--
John Malone
==============
| Nice summary....
|
| --
| Murray
| --------------
| MVP FrontPage
|
|
| | > 8) I was going to answer all the questions BUT...
| > That might not be much real help...
| > You have FrontPage so.... make a page.
| >
|
|

John Malone · May 8, 2006

For FF you would need to take out the underscore (in the CSS) and put
content in the container to see it.

Here it is and I think you will find something you might not have expected.
8)

head part...
==================
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container1 {
padding: 0px;
width: 100px;
color: black;
background-color: red;
}
#container2 {
margin:0;
Border: 0px black;
padding: 0px;
width: 100px;
color: black;
background-color: blue;
}
</style>
========================
Body stuff
NOTE: I added content The letter A
and the letter B
======================
<div id="container1"><p>A</p>
<div id="container2"><p>B</p>
</div>
</div>
======================
If you have tried this you can see why the answers are not as easy as 1+1=2

HTH
--
John Malone
==============
| 8) I was going to answer all the questions BUT...
| That might not be much real help...
| You have FrontPage so.... make a page.
|
| Put your CSS in the heading and have at it.
| It is far better to see it for your self. (at least for me).
|
| To get you started here is some css...
| Put this in the <head> Just before the </head> tag....
|
| <style type="text/css">
| body {
| margin: o;
| padding: 0;
| }
| #block_A {
| width: 100px;
| color: black;
| background-color: red;
| }
| #block_B {
| width: 100px;
| color: black;
| background-color: blue;
| }
|
| #block_AA {
| width: 100px;
| color: black;
| background-color: red;
| }
| #block_BB {
| margin:0px;
| Border: 0px black;
| padding: 0px;
| width: 100px;
| color: black;
| background-color: blue;
| }
| </style>
| ===========================
| NOTE: block_BB is set at "0" Change to suit your wants / needs
| The blue block is in the red block
| ===========================
| Now you can do the HTML like this...
|
| <div id="block_A">
| <div id="block_B">
| </div>
| </Div></td>
|
| and or
|
| <div id="block_AA">
| <div id="block_BB">
| </div>
| </Div>
| =======================
|
| That puts block B (blue) inside A (red)
|
| Now you can play with it all you want...
|
| Here is one of the best easy explanations I have read
| -----------------------------------
| Real basic CSS in FP?
|
| CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,
|
| p { color:blue; }
|
| That whole line is a rule. The color:blue is a style. The "p" is a
selector.
|
| Selectors can be of four different kinds -
|
| 1. a tag name
| 2. a custom class
| 3. an id selector
| 4. a descendent selector
|
| The example above is using a tag name as a selector - all <p> tags on the
| page will contain blue text.
|
| A custom class would look something like this -
|
| .special { color:green; }
|
| So, all <p> tags containing that class specification would contain green
| text instead of blue, e.g.,
|
| <p class="special">this is green</p>
|
| An id selector would look like this -
|
| #reallySpecial { color:red; }
|
| and you can apply it like this -
|
| <p id="reallySpecial" class="special">this is red</p>
|
| What you can see from this is that the id selector's rule has overridden
the
| class selector's rule, because the text is red. This illustrates one of
the
| fundamental differences between id selectors and custom classes - the
former
| have a 'greater specificity' and will 'trump' other rules that apply but
| with a lower specificity, like custom classes.
|
| Finally, a descendent selector will look like this -
|
| .special span { color:black; }
|
| It says to make any span tag's contents black when they occur inside a
| container with a class of 'special', e.g.,
|
| <p class="special">This text is blue except <span>for this, which is
| black</span></p>
|
| The selector specifies the 'descent' of the rule from container to
content,
| i.e., from 'ancestor' to 'child', where, in this case, the <p> tag is the
| ancestor, and the <span> tag is the child.
|
| One final thing. ID selectors must be unique, in that only a single
element
| on any given page can possess it, e.g.,
|
| <p id="reallySpecial">whatever</p>
| <p id="reallySpecial">whatever</p>
|
| is an illegal instance of this, since there are two elements, each of
which
| has the id="reallySpecial" value.
|
| A class selector can be used any number of times on a given page, e.g.,
|
| <p class="special">This text is blue except <span>for this, which is
| black</span></p>
| <p class="special">This text is blue except <span>for this, which is
| black</span></p>
|
| would be perfectly valid.
|
| In the scheme of things, there are rules for calculating the specificity
of
| the styles. Here are some of the rules -
|
| 1. The style that is closest to the element being styled wins in the
absence
| of other mitigating factors. This is why you cannot trump font tags
with....
|
| CSS, since the font styles are always closer.
| 2. A redefined tag has a specificity value of 1.
| 3. A custom class has a specificity of 10.
| 4. An id selector has a specificity of 100.
|
| Thus, in this case, the green color would have a specificity of 1 and the
| custom class of 10. The class wins.
|
| h1 { color:green; }
| .headline { color:red; }
|
| <h1 class="headline">This is red</h1>
| ============================
|
| It is nice that you are taking the time to learn some CSS
| 8)
| Padding is inside the container
| Margin is outside
|
| Hope this helps some
| --
| John Malone
| ==============
| || I've done my homework by reading the spec and searching the net, but I'm
|| still confused about the CSS width property as it relates to the
ancestor.
||
|| Using the example: the nearest ancestor's (A) content area is 100px. The
|| box inside it (B) has a width of 100% with no other dimension properties.
| My
|| assumption is that the content width, the padding boundary width, the
| border
|| boundary width, and the margin boundary width are all 100px.
||
|| Now, if I add a left or right dimension to the margin, border, or padding
|| does the content width of B shrink by the sum of these widths? Or does
| the
|| content area "push" these dimensions out beyond 100px?
||
|| Using the same boxes, assume that B has a width property of 90% and
assume
|| the sum of the widths of the padding, border, and margin are 6px. Is the
|| content width of B 90px or is it actually 94px?
||
|| Sorry for asking something this basic, but I got confused when trying to
|| understand it.
||
|| Thanks
||
|| Tom
||
||
|
|

John Malone · May 8, 2006

See the reply to your other post....
That is CSS compliant and puts content in the boxes.
Now add padding to the first container... (was 0 make it 20px)
Then add a margin to container 2... (form 0 to 20px)
Then add padding to container 2 (from 0 to 50px)

By now you should see that the answers (I think) you were looking for don't
exist as stated.. 8)

--
John Malone
==============
| John,
|
| This is a good opportunity to point out why it can be difficult to run
tests
| in CSS/HTML to learn. Good 'ol browser compliance. If you create a page
| with the following, which is based on the code you included in your post,
and
| then run it through multiple browsers (I use IE 6.0, Firefox 1.5, and
| Netscape 7.0) people will quickly see why things can get so frustrating.
|
| FF and NS will show Block BB (150% of Block AA) as spanning outside AA
while
| IE pushes on AA expanding it to the size of BB.
|
| Although I always assume that FF is the most compliant, this makes hands
on
| learning a bit of a challenge. Your code, however, is a good base for
| running these type of experiments.
|
| Tom
|
| <html>
|
| <head>
| <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
| <title>CSS/HTML Test - Width</title>
| <style type="text/css">
| body {
| margin: 0;
| padding: 0;
| text-align-left;
| }
| #block_A {
| width: 500px;
| color: black;
| margin: 50px;
| border: solid 50px black;
| padding: 25px;
| background-color: red;
| }
| #block_B {
| width: 100%;
| color: white;
| border: solid 0px black;
| background-color: blue;
| }
| #block_AA {
| width: 500px;
| color: black;
| margin: 50px;
| border: solid 50px black;
| padding: 25px;
| background-color: red;
| }
| #block_BB {
| width: 150%;
| color: white;
| margin: 0px;
| border: solid 0px black;
| padding: 0px;
| background-color: blue;
| }
| </style>
| </head>
|
| <body>
| <div id="block_A">Block A width 500px. The background is red, the margin
is
| 50px transparant, as always, the border is 50px black,
| and there is 25px padding around the text.
| <div id="block_B">Block B The background is blue and there are no margins,
| borders, or padding.
| The width is set to 100% (of its nearest ancestor: Block A).
| </div>
| </div>
|
| <div id="block_AA">Block AA (duplicate of Block A) width 500px. The
| background is red, the margin is 50px transparant, as always,
| the border is 50px black, and there is 25px padding around the text.
|
| <div id="block_BB">Block BB The background is blue and there are no
margins,
| borders, or padding.
| The width is set to 150% (of its nearest ancestor: Block AA).
|
| </div>
| </div>
| </body>
|
| </html>
|
|
| "John Malone" wrote:
|
| > 8) I was going to answer all the questions BUT...
| > That might not be much real help...
| > You have FrontPage so.... make a page.
| >
| > Put your CSS in the heading and have at it.
| > It is far better to see it for your self. (at least for me).
| >
| > To get you started here is some css...
| > Put this in the <head> Just before the </head> tag....
| >
| > <style type="text/css">
| > body {
| > margin: o;
| > padding: 0;
| > }
| > #block_A {
| > width: 100px;
| > color: black;
| > background-color: red;
| > }
| > #block_B {
| > width: 100px;
| > color: black;
| > background-color: blue;
| > }
| >
| > #block_AA {
| > width: 100px;
| > color: black;
| > background-color: red;
| > }
| > #block_BB {
| > margin:0px;
| > Border: 0px black;
| > padding: 0px;
| > width: 100px;
| > color: black;
| > background-color: blue;
| > }
| > </style>
| > ===========================
| > NOTE: block_BB is set at "0" Change to suit your wants / needs
| > The blue block is in the red block
| > ===========================
| > Now you can do the HTML like this...
| >
| > <div id="block_A">
| > <div id="block_B">
| > </div>
| > </Div></td>
| >
| > and or
| >
| > <div id="block_AA">
| > <div id="block_BB">
| > </div>
| > </Div>
| > =======================
| >
| > That puts block B (blue) inside A (red)
| >
| > Now you can play with it all you want...
| >
| > Here is one of the best easy explanations I have read
| > -----------------------------------
| > Real basic CSS in FP?
| >
| > CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,
| >
| > p { color:blue; }
| >
| > That whole line is a rule. The color:blue is a style. The "p" is a
selector.
| >
| > Selectors can be of four different kinds -
| >
| > 1. a tag name
| > 2. a custom class
| > 3. an id selector
| > 4. a descendent selector
| >
| > The example above is using a tag name as a selector - all <p> tags on
the
| > page will contain blue text.
| >
| > A custom class would look something like this -
| >
| > ..special { color:green; }
| >
| > So, all <p> tags containing that class specification would contain green
| > text instead of blue, e.g.,
| >
| > <p class="special">this is green</p>
| >
| > An id selector would look like this -
| >
| > #reallySpecial { color:red; }
| >
| > and you can apply it like this -
| >
| > <p id="reallySpecial" class="special">this is red</p>
| >
| > What you can see from this is that the id selector's rule has overridden
the
| > class selector's rule, because the text is red. This illustrates one of
the
| > fundamental differences between id selectors and custom classes - the
former
| > have a 'greater specificity' and will 'trump' other rules that apply but
| > with a lower specificity, like custom classes.
| >
| > Finally, a descendent selector will look like this -
| >
| > ..special span { color:black; }
| >
| > It says to make any span tag's contents black when they occur inside a
| > container with a class of 'special', e.g.,
| >
| > <p class="special">This text is blue except <span>for this, which is
| > black</span></p>
| >
| > The selector specifies the 'descent' of the rule from container to
content,
| > i.e., from 'ancestor' to 'child', where, in this case, the <p> tag is
the
| > ancestor, and the <span> tag is the child.
| >
| > One final thing. ID selectors must be unique, in that only a single
element
| > on any given page can possess it, e.g.,
| >
| > <p id="reallySpecial">whatever</p>
| > <p id="reallySpecial">whatever</p>
| >
| > is an illegal instance of this, since there are two elements, each of
which
| > has the id="reallySpecial" value.
| >
| > A class selector can be used any number of times on a given page, e.g.,
| >
| > <p class="special">This text is blue except <span>for this, which is
| > black</span></p>
| > <p class="special">This text is blue except <span>for this, which is
| > black</span></p>
| >
| > would be perfectly valid.
| >
| > In the scheme of things, there are rules for calculating the specificity
of
| > the styles. Here are some of the rules -
| >
| > 1. The style that is closest to the element being styled wins in the
absence
| > of other mitigating factors. This is why you cannot trump font tags
with....
| >
| > CSS, since the font styles are always closer.
| > 2. A redefined tag has a specificity value of 1.
| > 3. A custom class has a specificity of 10.
| > 4. An id selector has a specificity of 100.
| >
| > Thus, in this case, the green color would have a specificity of 1 and
the
| > custom class of 10. The class wins.
| >
| > h1 { color:green; }
| > ..headline { color:red; }
| >
| > <h1 class="headline">This is red</h1>
| > ============================
| >
| > It is nice that you are taking the time to learn some CSS
| > 8)
| > Padding is inside the container
| > Margin is outside
| >
| > Hope this helps some
| > --
| > John Malone
| > ==============
| > | > | I've done my homework by reading the spec and searching the net, but
I'm
| > | still confused about the CSS width property as it relates to the
ancestor.
| > |
| > | Using the example: the nearest ancestor's (A) content area is 100px.
The
| > | box inside it (B) has a width of 100% with no other dimension
properties.
| > My
| > | assumption is that the content width, the padding boundary width, the
| > border
| > | boundary width, and the margin boundary width are all 100px.
| > |
| > | Now, if I add a left or right dimension to the margin, border, or
padding
| > | does the content width of B shrink by the sum of these widths? Or
does
| > the
| > | content area "push" these dimensions out beyond 100px?
| > |
| > | Using the same boxes, assume that B has a width property of 90% and
assume
| > | the sum of the widths of the padding, border, and margin are 6px. Is
the
| > | content width of B 90px or is it actually 94px?
| > |
| > | Sorry for asking something this basic, but I got confused when trying
to
| > | understand it.
| > |
| > | Thanks
| > |
| > | Tom
| > |
| > |
| >
| >
| >

Guest · May 8, 2006

What I found, as I mentioned earlier, is that FF and IE handle the code
differently (p.s. I misspoke when I said your code wasn't compliant; its one
of the browsers).

I think it is as straight forward as 1+1=2 (in the example being used here)
once you find a browser that follows the recommendation. In fact, the irony
is that the specification actually uses a math equation for this.

This is the key section from the specification:

10.3.3 Block-level, non-replaced elements in normal flow

If 'left' or 'right' are given as 'auto', their computed value is 0. The
following constraints must hold between the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
'padding-right' + 'border-right-width' + 'margin-right' = width of containing
block

(If the border style is 'none', use '0' as the border width.) If all of the
above have a specified value other than 'auto', the values are said to be
"over-constrained" and one of the computed values will have to be different
from its specified value. If the 'direction' property has the value 'ltr',
the specified value of 'margin-right' is ignored and the value is computed so
as to make the equality true. If the value of 'direction' is 'ltr', this
happens to 'margin-left' instead.

If there is exactly one value specified as 'auto', its computed value
follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width'
follows from the resulting equality.

If both 'margin-left' and 'margin-right' are 'auto', their computed values
are equal.

What seems to be important is the equation and the implication that things
will be unpredictable if the equation is "over-constrained" and/or is out of
balance.

So maybe what I've learned is this: The overall block width, which is the
sum of the left and right margins, borders, and paddings along with the
content width, MUST equal the width of the ancestor block content area. If
possible, certain properties will be adjusted to make the equation true. My
assumption is, that if the equation cannot be made to be true, the results
will be unpredictable.

BTW: there appears to be a typo in the specification. One of the "ltr"s
needs to be a "rtl".

Tom

Murray · May 8, 2006

Are you testing these on pages with valid and complete doctypes?

John Malone · May 8, 2006

Take a look at this... First in IE and then FF
Test1 has a Doc type (valid)
http://www.xmas-i-am.com/test1.htm
Test 2 has none (Quirks mode)
http://www.xmas-i-am.com/test2.htm

4 Views and none are the same...

You will find that if you compute to the px it won't always work.
more factors enter the picture... Doc Type! and more later..

--
John Malone
==============
| What I found, as I mentioned earlier, is that FF and IE handle the code
| differently (p.s. I misspoke when I said your code wasn't compliant; its
one
| of the browsers).
|
| I think it is as straight forward as 1+1=2 (in the example being used
here)
| once you find a browser that follows the recommendation. In fact, the
irony
| is that the specification actually uses a math equation for this.
|
| This is the key section from the specification:
|
|
| 10.3.3 Block-level, non-replaced elements in normal flow
|
| If 'left' or 'right' are given as 'auto', their computed value is 0. The
| following constraints must hold between the other properties:
|
| 'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
| 'padding-right' + 'border-right-width' + 'margin-right' = width of
containing
| block
|
| (If the border style is 'none', use '0' as the border width.) If all of
the
| above have a specified value other than 'auto', the values are said to be
| "over-constrained" and one of the computed values will have to be
different
| from its specified value. If the 'direction' property has the value 'ltr',
| the specified value of 'margin-right' is ignored and the value is computed
so
| as to make the equality true. If the value of 'direction' is 'ltr', this
| happens to 'margin-left' instead.
|
| If there is exactly one value specified as 'auto', its computed value
| follows from the equality.
|
| If 'width' is set to 'auto', any other 'auto' values become '0' and
'width'
| follows from the resulting equality.
|
| If both 'margin-left' and 'margin-right' are 'auto', their computed values
| are equal.
|
| What seems to be important is the equation and the implication that things
| will be unpredictable if the equation is "over-constrained" and/or is out
of
| balance.
|
| So maybe what I've learned is this: The overall block width, which is the
| sum of the left and right margins, borders, and paddings along with the
| content width, MUST equal the width of the ancestor block content area.
If
| possible, certain properties will be adjusted to make the equation true.
My
| assumption is, that if the equation cannot be made to be true, the results
| will be unpredictable.
|
| BTW: there appears to be a typo in the specification. One of the "ltr"s
| needs to be a "rtl".
|
| Tom
|
| "John Malone" wrote:
|
| > For FF you would need to take out the underscore (in the CSS) and put
| > content in the container to see it.
| >
| > Here it is and I think you will find something you might not have
expected.
| > 8)
| >
| > head part...
| > ==================
| > <style type="text/css">
| > body {
| > margin: 0;
| > padding: 0;
| > }
| > #container1 {
| > padding: 0px;
| > width: 100px;
| > color: black;
| > background-color: red;
| > }
| > #container2 {
| > margin:0;
| > Border: 0px black;
| > padding: 0px;
| > width: 100px;
| > color: black;
| > background-color: blue;
| > }
| > </style>
| > ========================
| > Body stuff
| > NOTE: I added content The letter A
| > and the letter B
| > ======================
| > <div id="container1"><p>A</p>
| > <div id="container2"><p>B</p>
| > </div>
| > </div>
| > ======================
| > If you have tried this you can see why the answers are not as easy as
1+1=2
| >
| > HTH
| > --
| > John Malone
| > ==============
| > | > | 8) I was going to answer all the questions BUT...
| > | That might not be much real help...
| > | You have FrontPage so.... make a page.
| > |
| > | Put your CSS in the heading and have at it.
| > | It is far better to see it for your self. (at least for me).
| > |
| > | To get you started here is some css...
| > | Put this in the <head> Just before the </head> tag....
| > |
| > | <style type="text/css">
| > | body {
| > | margin: o;
| > | padding: 0;
| > | }
| > | #block_A {
| > | width: 100px;
| > | color: black;
| > | background-color: red;
| > | }
| > | #block_B {
| > | width: 100px;
| > | color: black;
| > | background-color: blue;
| > | }
| > |
| > | #block_AA {
| > | width: 100px;
| > | color: black;
| > | background-color: red;
| > | }
| > | #block_BB {
| > | margin:0px;
| > | Border: 0px black;
| > | padding: 0px;
| > | width: 100px;
| > | color: black;
| > | background-color: blue;
| > | }
| > | </style>
| > | ===========================
| > | NOTE: block_BB is set at "0" Change to suit your wants / needs
| > | The blue block is in the red block
| > | ===========================
| > | Now you can do the HTML like this...
| > |
| > | <div id="block_A">
| > | <div id="block_B">
| > | </div>
| > | </Div></td>
| > |
| > | and or
| > |
| > | <div id="block_AA">
| > | <div id="block_BB">
| > | </div>
| > | </Div>
| > | =======================
| > |
| > | That puts block B (blue) inside A (red)
| > |
| > | Now you can play with it all you want...
| > |
| > | Here is one of the best easy explanations I have read
| > | -----------------------------------
| > | Real basic CSS in FP?
| > |
| > | CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,
| > |
| > | p { color:blue; }
| > |
| > | That whole line is a rule. The color:blue is a style. The "p" is a
| > selector.
| > |
| > | Selectors can be of four different kinds -
| > |
| > | 1. a tag name
| > | 2. a custom class
| > | 3. an id selector
| > | 4. a descendent selector
| > |
| > | The example above is using a tag name as a selector - all <p> tags on
the
| > | page will contain blue text.
| > |
| > | A custom class would look something like this -
| > |
| > | .special { color:green; }
| > |
| > | So, all <p> tags containing that class specification would contain
green
| > | text instead of blue, e.g.,
| > |
| > | <p class="special">this is green</p>
| > |
| > | An id selector would look like this -
| > |
| > | #reallySpecial { color:red; }
| > |
| > | and you can apply it like this -
| > |
| > | <p id="reallySpecial" class="special">this is red</p>
| > |
| > | What you can see from this is that the id selector's rule has
overridden
| > the
| > | class selector's rule, because the text is red. This illustrates one
of
| > the
| > | fundamental differences between id selectors and custom classes - the
| > former
| > | have a 'greater specificity' and will 'trump' other rules that apply
but
| > | with a lower specificity, like custom classes.
| > |
| > | Finally, a descendent selector will look like this -
| > |
| > | .special span { color:black; }
| > |
| > | It says to make any span tag's contents black when they occur inside a
| > | container with a class of 'special', e.g.,
| > |
| > | <p class="special">This text is blue except <span>for this, which is
| > | black</span></p>
| > |
| > | The selector specifies the 'descent' of the rule from container to
| > content,
| > | i.e., from 'ancestor' to 'child', where, in this case, the <p> tag is
the
| > | ancestor, and the <span> tag is the child.
| > |
| > | One final thing. ID selectors must be unique, in that only a single
| > element
| > | on any given page can possess it, e.g.,
| > |
| > | <p id="reallySpecial">whatever</p>
| > | <p id="reallySpecial">whatever</p>
| > |
| > | is an illegal instance of this, since there are two elements, each of
| > which
| > | has the id="reallySpecial" value.
| > |
| > | A class selector can be used any number of times on a given page,
e.g.,
| > |
| > | <p class="special">This text is blue except <span>for this, which is
| > | black</span></p>
| > | <p class="special">This text is blue except <span>for this, which is
| > | black</span></p>
| > |
| > | would be perfectly valid.
| > |
| > | In the scheme of things, there are rules for calculating the
specificity
| > of
| > | the styles. Here are some of the rules -
| > |
| > | 1. The style that is closest to the element being styled wins in the
| > absence
| > | of other mitigating factors. This is why you cannot trump font tags
| > with....
| > |
| > | CSS, since the font styles are always closer.
| > | 2. A redefined tag has a specificity value of 1.
| > | 3. A custom class has a specificity of 10.
| > | 4. An id selector has a specificity of 100.
| > |
| > | Thus, in this case, the green color would have a specificity of 1 and
the
| > | custom class of 10. The class wins.
| > |
| > | h1 { color:green; }
| > | .headline { color:red; }
| > |
| > | <h1 class="headline">This is red</h1>
| > | ============================
| > |
| > | It is nice that you are taking the time to learn some CSS
| > | 8)
| > | Padding is inside the container
| > | Margin is outside
| > |
| > | Hope this helps some
| > | --
| > | John Malone
| > | ==============
| > | | > || I've done my homework by reading the spec and searching the net, but
I'm
| > || still confused about the CSS width property as it relates to the
| > ancestor.
| > ||
| > || Using the example: the nearest ancestor's (A) content area is 100px.
The
| > || box inside it (B) has a width of 100% with no other dimension
properties.
| > | My
| > || assumption is that the content width, the padding boundary width, the
| > | border
| > || boundary width, and the margin boundary width are all 100px.
| > ||
| > || Now, if I add a left or right dimension to the margin, border, or
padding
| > || does the content width of B shrink by the sum of these widths? Or
does
| > | the
| > || content area "push" these dimensions out beyond 100px?
| > ||
| > || Using the same boxes, assume that B has a width property of 90% and
| > assume
| > || the sum of the widths of the padding, border, and margin are 6px. Is
the
| > || content width of B 90px or is it actually 94px?
| > ||
| > || Sorry for asking something this basic, but I got confused when trying
to
| > || understand it.
| > ||
| > || Thanks
| > ||
| > || Tom
| > ||
| > ||
| > |
| > |
| >
| >
| >

John Malone · May 8, 2006

Picture here..
http://www.xmas-i-am.com/elements.htm

How do you calculate that?

--
John Malone
==============
| Take a look at this... First in IE and then FF
| Test1 has a Doc type (valid)
| http://www.xmas-i-am.com/test1.htm
| Test 2 has none (Quirks mode)
| http://www.xmas-i-am.com/test2.htm
|
| 4 Views and none are the same...
|
| You will find that if you compute to the px it won't always work.
| more factors enter the picture... Doc Type! and more later..
|
| --
| John Malone
| ==============
| || What I found, as I mentioned earlier, is that FF and IE handle the code
|| differently (p.s. I misspoke when I said your code wasn't compliant; its
| one
|| of the browsers).
||
|| I think it is as straight forward as 1+1=2 (in the example being used
| here)
|| once you find a browser that follows the recommendation. In fact, the
| irony
|| is that the specification actually uses a math equation for this.
||
|| This is the key section from the specification:
||
||
|| 10.3.3 Block-level, non-replaced elements in normal flow
||
|| If 'left' or 'right' are given as 'auto', their computed value is 0. The
|| following constraints must hold between the other properties:
||
|| 'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
|| 'padding-right' + 'border-right-width' + 'margin-right' = width of
| containing
|| block
||
|| (If the border style is 'none', use '0' as the border width.) If all of
| the
|| above have a specified value other than 'auto', the values are said to be
|| "over-constrained" and one of the computed values will have to be
| different
|| from its specified value. If the 'direction' property has the value
'ltr',
|| the specified value of 'margin-right' is ignored and the value is
computed
| so
|| as to make the equality true. If the value of 'direction' is 'ltr', this
|| happens to 'margin-left' instead.
||
|| If there is exactly one value specified as 'auto', its computed value
|| follows from the equality.
||
|| If 'width' is set to 'auto', any other 'auto' values become '0' and
| 'width'
|| follows from the resulting equality.
||
|| If both 'margin-left' and 'margin-right' are 'auto', their computed
values
|| are equal.
||
|| What seems to be important is the equation and the implication that
things
|| will be unpredictable if the equation is "over-constrained" and/or is out
| of
|| balance.
||
|| So maybe what I've learned is this: The overall block width, which is the
|| sum of the left and right margins, borders, and paddings along with the
|| content width, MUST equal the width of the ancestor block content area.
| If
|| possible, certain properties will be adjusted to make the equation true.
| My
|| assumption is, that if the equation cannot be made to be true, the
results
|| will be unpredictable.
||
|| BTW: there appears to be a typo in the specification. One of the "ltr"s
|| needs to be a "rtl".
||
|| Tom
||
|| "John Malone" wrote:
||
|| > For FF you would need to take out the underscore (in the CSS) and put
|| > content in the container to see it.
|| >
|| > Here it is and I think you will find something you might not have
| expected.
|| > 8)
|| >
|| > head part...
|| > ==================
|| > <style type="text/css">
|| > body {
|| > margin: 0;
|| > padding: 0;
|| > }
|| > #container1 {
|| > padding: 0px;
|| > width: 100px;
|| > color: black;
|| > background-color: red;
|| > }
|| > #container2 {
|| > margin:0;
|| > Border: 0px black;
|| > padding: 0px;
|| > width: 100px;
|| > color: black;
|| > background-color: blue;
|| > }
|| > </style>
|| > ========================
|| > Body stuff
|| > NOTE: I added content The letter A
|| > and the letter B
|| > ======================
|| > <div id="container1"><p>A</p>
|| > <div id="container2"><p>B</p>
|| > </div>
|| > </div>
|| > ======================
|| > If you have tried this you can see why the answers are not as easy as
| 1+1=2
|| >
|| > HTH
|| > --
|| > John Malone
|| > ==============
|| > || > | 8) I was going to answer all the questions BUT...
|| > | That might not be much real help...
|| > | You have FrontPage so.... make a page.
|| > |
|| > | Put your CSS in the heading and have at it.
|| > | It is far better to see it for your self. (at least for me).
|| > |
|| > | To get you started here is some css...
|| > | Put this in the <head> Just before the </head> tag....
|| > |
|| > | <style type="text/css">
|| > | body {
|| > | margin: o;
|| > | padding: 0;
|| > | }
|| > | #block_A {
|| > | width: 100px;
|| > | color: black;
|| > | background-color: red;
|| > | }
|| > | #block_B {
|| > | width: 100px;
|| > | color: black;
|| > | background-color: blue;
|| > | }
|| > |
|| > | #block_AA {
|| > | width: 100px;
|| > | color: black;
|| > | background-color: red;
|| > | }
|| > | #block_BB {
|| > | margin:0px;
|| > | Border: 0px black;
|| > | padding: 0px;
|| > | width: 100px;
|| > | color: black;
|| > | background-color: blue;
|| > | }
|| > | </style>
|| > | ===========================
|| > | NOTE: block_BB is set at "0" Change to suit your wants / needs
|| > | The blue block is in the red block
|| > | ===========================
|| > | Now you can do the HTML like this...
|| > |
|| > | <div id="block_A">
|| > | <div id="block_B">
|| > | </div>
|| > | </Div></td>
|| > |
|| > | and or
|| > |
|| > | <div id="block_AA">
|| > | <div id="block_BB">
|| > | </div>
|| > | </Div>
|| > | =======================
|| > |
|| > | That puts block B (blue) inside A (red)
|| > |
|| > | Now you can play with it all you want...
|| > |
|| > | Here is one of the best easy explanations I have read
|| > | -----------------------------------
|| > | Real basic CSS in FP?
|| > |
|| > | CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,
|| > |
|| > | p { color:blue; }
|| > |
|| > | That whole line is a rule. The color:blue is a style. The "p" is a
|| > selector.
|| > |
|| > | Selectors can be of four different kinds -
|| > |
|| > | 1. a tag name
|| > | 2. a custom class
|| > | 3. an id selector
|| > | 4. a descendent selector
|| > |
|| > | The example above is using a tag name as a selector - all <p> tags on
| the
|| > | page will contain blue text.
|| > |
|| > | A custom class would look something like this -
|| > |
|| > | .special { color:green; }
|| > |
|| > | So, all <p> tags containing that class specification would contain
| green
|| > | text instead of blue, e.g.,
|| > |
|| > | <p class="special">this is green</p>
|| > |
|| > | An id selector would look like this -
|| > |
|| > | #reallySpecial { color:red; }
|| > |
|| > | and you can apply it like this -
|| > |
|| > | <p id="reallySpecial" class="special">this is red</p>
|| > |
|| > | What you can see from this is that the id selector's rule has
| overridden
|| > the
|| > | class selector's rule, because the text is red. This illustrates one
| of
|| > the
|| > | fundamental differences between id selectors and custom classes - the
|| > former
|| > | have a 'greater specificity' and will 'trump' other rules that apply
| but
|| > | with a lower specificity, like custom classes.
|| > |
|| > | Finally, a descendent selector will look like this -
|| > |
|| > | .special span { color:black; }
|| > |
|| > | It says to make any span tag's contents black when they occur inside
a
|| > | container with a class of 'special', e.g.,
|| > |
|| > | <p class="special">This text is blue except <span>for this, which is
|| > | black</span></p>
|| > |
|| > | The selector specifies the 'descent' of the rule from container to
|| > content,
|| > | i.e., from 'ancestor' to 'child', where, in this case, the <p> tag is
| the
|| > | ancestor, and the <span> tag is the child.
|| > |
|| > | One final thing. ID selectors must be unique, in that only a single
|| > element
|| > | on any given page can possess it, e.g.,
|| > |
|| > | <p id="reallySpecial">whatever</p>
|| > | <p id="reallySpecial">whatever</p>
|| > |
|| > | is an illegal instance of this, since there are two elements, each of
|| > which
|| > | has the id="reallySpecial" value.
|| > |
|| > | A class selector can be used any number of times on a given page,
| e.g.,
|| > |
|| > | <p class="special">This text is blue except <span>for this, which is
|| > | black</span></p>
|| > | <p class="special">This text is blue except <span>for this, which is
|| > | black</span></p>
|| > |
|| > | would be perfectly valid.
|| > |
|| > | In the scheme of things, there are rules for calculating the
| specificity
|| > of
|| > | the styles. Here are some of the rules -
|| > |
|| > | 1. The style that is closest to the element being styled wins in the
|| > absence
|| > | of other mitigating factors. This is why you cannot trump font tags
|| > with....
|| > |
|| > | CSS, since the font styles are always closer.
|| > | 2. A redefined tag has a specificity value of 1.
|| > | 3. A custom class has a specificity of 10.
|| > | 4. An id selector has a specificity of 100.
|| > |
|| > | Thus, in this case, the green color would have a specificity of 1 and
| the
|| > | custom class of 10. The class wins.
|| > |
|| > | h1 { color:green; }
|| > | .headline { color:red; }
|| > |
|| > | <h1 class="headline">This is red</h1>
|| > | ============================
|| > |
|| > | It is nice that you are taking the time to learn some CSS
|| > | 8)
|| > | Padding is inside the container
|| > | Margin is outside
|| > |
|| > | Hope this helps some
|| > | --
|| > | John Malone
|| > | ==============
|| > | || > || I've done my homework by reading the spec and searching the net, but
| I'm
|| > || still confused about the CSS width property as it relates to the
|| > ancestor.
|| > ||
|| > || Using the example: the nearest ancestor's (A) content area is 100px.
| The
|| > || box inside it (B) has a width of 100% with no other dimension
| properties.
|| > | My
|| > || assumption is that the content width, the padding boundary width,
the
|| > | border
|| > || boundary width, and the margin boundary width are all 100px.
|| > ||
|| > || Now, if I add a left or right dimension to the margin, border, or
| padding
|| > || does the content width of B shrink by the sum of these widths? Or
| does
|| > | the
|| > || content area "push" these dimensions out beyond 100px?
|| > ||
|| > || Using the same boxes, assume that B has a width property of 90% and
|| > assume
|| > || the sum of the widths of the padding, border, and margin are 6px.
Is
| the
|| > || content width of B 90px or is it actually 94px?
|| > ||
|| > || Sorry for asking something this basic, but I got confused when
trying
| to
|| > || understand it.
|| > ||
|| > || Thanks
|| > ||
|| > || Tom
|| > ||
|| > ||
|| > |
|| > |
|| >
|| >
|| >
|
|

Murray · May 8, 2006

It's what drives web developers to drink.

Guest · May 8, 2006

Hi John

It looks like the CSS spec is that the sum of the widths MUST equal the
width of the parent's content area (for normal flow non-replaced items). As
the spec says, adjustments are made to one of the widths to force compliance
with the equation based on criteria like which properties are set to Auto.

What's interesting about this is that IE appears to expand the boundaries of
the nearest ancestor while FF appears to span beyond the boundary of the
nearest ancestor when it is unable to force compliance to the equation.

What may be happening here is that presenting a block that is unable to
comply with the equation will produce unpredictable results.

If, however, the CSS either complies with the equation or allows adjustments
to force compliance, the behavior will be easy to calculate.

The key question is: are the two examples (IE and FF) behaviors because the
calculation cannot be brought into complaince with the equation?

One test to try to answer this is to set the width to 100% and all other
widths (margin, border, padding) to 0px. Then change these other widths one
at a time. For example, in the tests I just ran, if the margin widths are
set to say 25%, IE compresses the content width to accomodate. FF and NS do
not, but instead hold the content width the proper size and overlap the span
of B over A.

CSS sizing and positioning are perhaps one of the most important things I've
had to understand to be effective in converting my sites to use style sheets,
and they certainly have been the most difficult to understand.

Getting this width thing figured out is pretty important, I think, since the
thing that brought me to the forum for this thread was understanding how much
to add to a left margin to get an object to accomodate the space occupied by
an object to its left. Pretty basic stuff to understand when you enter the
workd of CSS and stop using (as many) tables.

You may be right that there will be too many caviats in the calculation, but
it would be a shame to just throw this into the confusing bucket of UA
dependent.

I have some tests to run to see the patterns....

Tom

John Malone · May 8, 2006

Yep yep yep yep BrrrrrrrrrrrRing 8)
--
John Malone
==============
| It's what drives web developers to drink.
|
| --
| Murray
| --------------
| MVP FrontPage
|
|
| | > Picture here..
| > http://www.xmas-i-am.com/elements.htm
| >
| > How do you calculate that?
| >
| > --
| > John Malone
| > ==============
| > | > | Take a look at this... First in IE and then FF
| > | Test1 has a Doc type (valid)
| > | http://www.xmas-i-am.com/test1.htm
| > | Test 2 has none (Quirks mode)
| > | http://www.xmas-i-am.com/test2.htm
| > |
| > | 4 Views and none are the same...
| > |
| > | You will find that if you compute to the px it won't always work.
| > | more factors enter the picture... Doc Type! and more later..
| > |
| > | --
| > | John Malone
| > | ==============
| > | | > || What I found, as I mentioned earlier, is that FF and IE handle the
code
| > || differently (p.s. I misspoke when I said your code wasn't compliant;
| > its
| > | one
| > || of the browsers).
| > ||
| > || I think it is as straight forward as 1+1=2 (in the example being used
| > | here)
| > || once you find a browser that follows the recommendation. In fact,
the
| > | irony
| > || is that the specification actually uses a math equation for this.
| > ||
| > || This is the key section from the specification:
| > ||
| > ||
| > || 10.3.3 Block-level, non-replaced elements in normal flow
| > ||
| > || If 'left' or 'right' are given as 'auto', their computed value is 0.
| > The
| > || following constraints must hold between the other properties:
| > ||
| > || 'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
| > || 'padding-right' + 'border-right-width' + 'margin-right' = width of
| > | containing
| > || block
| > ||
| > || (If the border style is 'none', use '0' as the border width.) If all
of
| > | the
| > || above have a specified value other than 'auto', the values are said
to
| > be
| > || "over-constrained" and one of the computed values will have to be
| > | different
| > || from its specified value. If the 'direction' property has the value
| > 'ltr',
| > || the specified value of 'margin-right' is ignored and the value is
| > computed
| > | so
| > || as to make the equality true. If the value of 'direction' is 'ltr',
| > this
| > || happens to 'margin-left' instead.
| > ||
| > || If there is exactly one value specified as 'auto', its computed value
| > || follows from the equality.
| > ||
| > || If 'width' is set to 'auto', any other 'auto' values become '0' and
| > | 'width'
| > || follows from the resulting equality.
| > ||
| > || If both 'margin-left' and 'margin-right' are 'auto', their computed
| > values
| > || are equal.
| > ||
| > || What seems to be important is the equation and the implication that
| > things
| > || will be unpredictable if the equation is "over-constrained" and/or is
| > out
| > | of
| > || balance.
| > ||
| > || So maybe what I've learned is this: The overall block width, which is
| > the
| > || sum of the left and right margins, borders, and paddings along with
the
| > || content width, MUST equal the width of the ancestor block content
area.
| > | If
| > || possible, certain properties will be adjusted to make the equation
| > true.
| > | My
| > || assumption is, that if the equation cannot be made to be true, the
| > results
| > || will be unpredictable.
| > ||
| > || BTW: there appears to be a typo in the specification. One of the
| > "ltr"s
| > || needs to be a "rtl".
| > ||
| > || Tom
| > ||
| > || "John Malone" wrote:
| > ||
| > || > For FF you would need to take out the underscore (in the CSS) and
put
| > || > content in the container to see it.
| > || >
| > || > Here it is and I think you will find something you might not have
| > | expected.
| > || > 8)
| > || >
| > || > head part...
| > || > ==================
| > || > <style type="text/css">
| > || > body {
| > || > margin: 0;
| > || > padding: 0;
| > || > }
| > || > #container1 {
| > || > padding: 0px;
| > || > width: 100px;
| > || > color: black;
| > || > background-color: red;
| > || > }
| > || > #container2 {
| > || > margin:0;
| > || > Border: 0px black;
| > || > padding: 0px;
| > || > width: 100px;
| > || > color: black;
| > || > background-color: blue;
| > || > }
| > || > </style>
| > || > ========================
| > || > Body stuff
| > || > NOTE: I added content The letter A
| > || > and the letter B
| > || > ======================
| > || > <div id="container1"><p>A</p>
| > || > <div id="container2"><p>B</p>
| > || > </div>
| > || > </div>
| > || > ======================
| > || > If you have tried this you can see why the answers are not as easy
as
| > | 1+1=2
| > || >
| > || > HTH
| > || > --
| > || > John Malone
| > || > ==============
| > || > | > || > | 8) I was going to answer all the questions BUT...
| > || > | That might not be much real help...
| > || > | You have FrontPage so.... make a page.
| > || > |
| > || > | Put your CSS in the heading and have at it.
| > || > | It is far better to see it for your self. (at least for me).
| > || > |
| > || > | To get you started here is some css...
| > || > | Put this in the <head> Just before the </head> tag....
| > || > |
| > || > | <style type="text/css">
| > || > | body {
| > || > | margin: o;
| > || > | padding: 0;
| > || > | }
| > || > | #block_A {
| > || > | width: 100px;
| > || > | color: black;
| > || > | background-color: red;
| > || > | }
| > || > | #block_B {
| > || > | width: 100px;
| > || > | color: black;
| > || > | background-color: blue;
| > || > | }
| > || > |
| > || > | #block_AA {
| > || > | width: 100px;
| > || > | color: black;
| > || > | background-color: red;
| > || > | }
| > || > | #block_BB {
| > || > | margin:0px;
| > || > | Border: 0px black;
| > || > | padding: 0px;
| > || > | width: 100px;
| > || > | color: black;
| > || > | background-color: blue;
| > || > | }
| > || > | </style>
| > || > | ===========================
| > || > | NOTE: block_BB is set at "0" Change to suit your wants / needs
| > || > | The blue block is in the red block
| > || > | ===========================
| > || > | Now you can do the HTML like this...
| > || > |
| > || > | <div id="block_A">
| > || > | <div id="block_B">
| > || > | </div>
| > || > | </Div></td>
| > || > |
| > || > | and or
| > || > |
| > || > | <div id="block_AA">
| > || > | <div id="block_BB">
| > || > | </div>
| > || > | </Div>
| > || > | =======================
| > || > |
| > || > | That puts block B (blue) inside A (red)
| > || > |
| > || > | Now you can play with it all you want...
| > || > |
| > || > | Here is one of the best easy explanations I have read
| > || > | -----------------------------------
| > || > | Real basic CSS in FP?
| > || > |
| > || > | CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,
| > || > |
| > || > | p { color:blue; }
| > || > |
| > || > | That whole line is a rule. The color:blue is a style. The "p" is
a
| > || > selector.
| > || > |
| > || > | Selectors can be of four different kinds -
| > || > |
| > || > | 1. a tag name
| > || > | 2. a custom class
| > || > | 3. an id selector
| > || > | 4. a descendent selector
| > || > |
| > || > | The example above is using a tag name as a selector - all <p>
tags
| > on
| > | the
| > || > | page will contain blue text.
| > || > |
| > || > | A custom class would look something like this -
| > || > |
| > || > | .special { color:green; }
| > || > |
| > || > | So, all <p> tags containing that class specification would
contain
| > | green
| > || > | text instead of blue, e.g.,
| > || > |
| > || > | <p class="special">this is green</p>
| > || > |
| > || > | An id selector would look like this -
| > || > |
| > || > | #reallySpecial { color:red; }
| > || > |
| > || > | and you can apply it like this -
| > || > |
| > || > | <p id="reallySpecial" class="special">this is red</p>
| > || > |
| > || > | What you can see from this is that the id selector's rule has
| > | overridden
| > || > the
| > || > | class selector's rule, because the text is red. This illustrates
| > one
| > | of
| > || > the
| > || > | fundamental differences between id selectors and custom classes -
| > the
| > || > former
| > || > | have a 'greater specificity' and will 'trump' other rules that
| > apply
| > | but
| > || > | with a lower specificity, like custom classes.
| > || > |
| > || > | Finally, a descendent selector will look like this -
| > || > |
| > || > | .special span { color:black; }
| > || > |
| > || > | It says to make any span tag's contents black when they occur
| > inside
| > a
| > || > | container with a class of 'special', e.g.,
| > || > |
| > || > | <p class="special">This text is blue except <span>for this, which
| > is
| > || > | black</span></p>
| > || > |
| > || > | The selector specifies the 'descent' of the rule from container
to
| > || > content,
| > || > | i.e., from 'ancestor' to 'child', where, in this case, the <p>
tag
| > is
| > | the
| > || > | ancestor, and the <span> tag is the child.
| > || > |
| > || > | One final thing. ID selectors must be unique, in that only a
single
| > || > element
| > || > | on any given page can possess it, e.g.,
| > || > |
| > || > | <p id="reallySpecial">whatever</p>
| > || > | <p id="reallySpecial">whatever</p>
| > || > |
| > || > | is an illegal instance of this, since there are two elements,
each
| > of
| > || > which
| > || > | has the id="reallySpecial" value.
| > || > |
| > || > | A class selector can be used any number of times on a given page,
| > | e.g.,
| > || > |
| > || > | <p class="special">This text is blue except <span>for this, which
| > is
| > || > | black</span></p>
| > || > | <p class="special">This text is blue except <span>for this, which
| > is
| > || > | black</span></p>
| > || > |
| > || > | would be perfectly valid.
| > || > |
| > || > | In the scheme of things, there are rules for calculating the
| > | specificity
| > || > of
| > || > | the styles. Here are some of the rules -
| > || > |
| > || > | 1. The style that is closest to the element being styled wins in
| > the
| > || > absence
| > || > | of other mitigating factors. This is why you cannot trump font
tags
| > || > with....
| > || > |
| > || > | CSS, since the font styles are always closer.
| > || > | 2. A redefined tag has a specificity value of 1.
| > || > | 3. A custom class has a specificity of 10.
| > || > | 4. An id selector has a specificity of 100.
| > || > |
| > || > | Thus, in this case, the green color would have a specificity of 1
| > and
| > | the
| > || > | custom class of 10. The class wins.
| > || > |
| > || > | h1 { color:green; }
| > || > | .headline { color:red; }
| > || > |
| > || > | <h1 class="headline">This is red</h1>
| > || > | ============================
| > || > |
| > || > | It is nice that you are taking the time to learn some CSS
| > || > | 8)
| > || > | Padding is inside the container
| > || > | Margin is outside
| > || > |
| > || > | Hope this helps some
| > || > | --
| > || > | John Malone
| > || > | ==============
| > || > | | > || > || I've done my homework by reading the spec and searching the net,
| > but
| > | I'm
| > || > || still confused about the CSS width property as it relates to the
| > || > ancestor.
| > || > ||
| > || > || Using the example: the nearest ancestor's (A) content area is
| > 100px.
| > | The
| > || > || box inside it (B) has a width of 100% with no other dimension
| > | properties.
| > || > | My
| > || > || assumption is that the content width, the padding boundary
width,
| > the
| > || > | border
| > || > || boundary width, and the margin boundary width are all 100px.
| > || > ||
| > || > || Now, if I add a left or right dimension to the margin, border,
or
| > | padding
| > || > || does the content width of B shrink by the sum of these widths?
Or
| > | does
| > || > | the
| > || > || content area "push" these dimensions out beyond 100px?
| > || > ||
| > || > || Using the same boxes, assume that B has a width property of 90%
| > and
| > || > assume
| > || > || the sum of the widths of the padding, border, and margin are
6px.
| > Is
| > | the
| > || > || content width of B 90px or is it actually 94px?
| > || > ||
| > || > || Sorry for asking something this basic, but I got confused when
| > trying
| > | to
| > || > || understand it.
| > || > ||
| > || > || Thanks
| > || > ||
| > || > || Tom
| > || > ||
| > || > ||
| > || > |
| > || > |
| > || >
| > || >
| > || >
| > |
| > |
| >
| >
|
|

John Malone · May 8, 2006

Well, one of the things that we are doing is nesting.... (Not a good thing
for layout)
The rules work for the most part but as Al says.... (from another news
group)

"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".

HA hahahaha

The new IE-7 is much better than IE-6
BUT -----
Then you will still have to design with IE-6 in mind because it will be a
long time before it is gone. (Darn!)
It would be nice if they all worked the same. 8)
But that's what gives us an edge and brings in the bucks.

Welcome to the world of CSS.
--
John Malone
==============
| Hi John
|
| It looks like the CSS spec is that the sum of the widths MUST equal the
| width of the parent's content area (for normal flow non-replaced items).
As
| the spec says, adjustments are made to one of the widths to force
compliance
| with the equation based on criteria like which properties are set to Auto.
|
| What's interesting about this is that IE appears to expand the boundaries
of
| the nearest ancestor while FF appears to span beyond the boundary of the
| nearest ancestor when it is unable to force compliance to the equation.
|
| What may be happening here is that presenting a block that is unable to
| comply with the equation will produce unpredictable results.
|
| If, however, the CSS either complies with the equation or allows
adjustments
| to force compliance, the behavior will be easy to calculate.
|
| The key question is: are the two examples (IE and FF) behaviors because
the
| calculation cannot be brought into complaince with the equation?
|
| One test to try to answer this is to set the width to 100% and all other
| widths (margin, border, padding) to 0px. Then change these other widths
one
| at a time. For example, in the tests I just ran, if the margin widths are
| set to say 25%, IE compresses the content width to accomodate. FF and NS
do
| not, but instead hold the content width the proper size and overlap the
span
| of B over A.
|
| CSS sizing and positioning are perhaps one of the most important things
I've
| had to understand to be effective in converting my sites to use style
sheets,
| and they certainly have been the most difficult to understand.
|
| Getting this width thing figured out is pretty important, I think, since
the
| thing that brought me to the forum for this thread was understanding how
much
| to add to a left margin to get an object to accomodate the space occupied
by
| an object to its left. Pretty basic stuff to understand when you enter
the
| workd of CSS and stop using (as many) tables.
|
| You may be right that there will be too many caviats in the calculation,
but
| it would be a shame to just throw this into the confusing bucket of UA
| dependent.
|
| I have some tests to run to see the patterns....
|
| Tom

John Malone · May 8, 2006

OR
<style type="text/css">
Body {
stress: inherit;
}
</style>
--
John Malone
==============
| Yep yep yep yep BrrrrrrrrrrrRing 8)
| --
| John Malone
| ==============
| || It's what drives web developers to drink.
||
|| --
|| Murray
|| --------------
|| MVP FrontPage
||
||
|| || > Picture here..
|| > http://www.xmas-i-am.com/elements.htm
|| >
|| > How do you calculate that?
|| >
|| > --
|| > John Malone
|| > ==============
|| > || > | Take a look at this... First in IE and then FF
|| > | Test1 has a Doc type (valid)
|| > | http://www.xmas-i-am.com/test1.htm
|| > | Test 2 has none (Quirks mode)
|| > | http://www.xmas-i-am.com/test2.htm
|| > |
|| > | 4 Views and none are the same...
|| > |
|| > | You will find that if you compute to the px it won't always work.
|| > | more factors enter the picture... Doc Type! and more later..
|| > |
|| > | --
|| > | John Malone
|| > | ==============
|| > | || > || What I found, as I mentioned earlier, is that FF and IE handle the
| code
|| > || differently (p.s. I misspoke when I said your code wasn't compliant;
|| > its
|| > | one
|| > || of the browsers).
|| > ||
|| > || I think it is as straight forward as 1+1=2 (in the example being
used
|| > | here)
|| > || once you find a browser that follows the recommendation. In fact,
| the
|| > | irony
|| > || is that the specification actually uses a math equation for this.
|| > ||
|| > || This is the key section from the specification:
|| > ||
|| > ||
|| > || 10.3.3 Block-level, non-replaced elements in normal flow
|| > ||
|| > || If 'left' or 'right' are given as 'auto', their computed value is 0.
|| > The
|| > || following constraints must hold between the other properties:
|| > ||
|| > || 'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
|| > || 'padding-right' + 'border-right-width' + 'margin-right' = width of
|| > | containing
|| > || block
|| > ||
|| > || (If the border style is 'none', use '0' as the border width.) If all
| of
|| > | the
|| > || above have a specified value other than 'auto', the values are said
| to
|| > be
|| > || "over-constrained" and one of the computed values will have to be
|| > | different
|| > || from its specified value. If the 'direction' property has the value
|| > 'ltr',
|| > || the specified value of 'margin-right' is ignored and the value is
|| > computed
|| > | so
|| > || as to make the equality true. If the value of 'direction' is 'ltr',
|| > this
|| > || happens to 'margin-left' instead.
|| > ||
|| > || If there is exactly one value specified as 'auto', its computed
value
|| > || follows from the equality.
|| > ||
|| > || If 'width' is set to 'auto', any other 'auto' values become '0' and
|| > | 'width'
|| > || follows from the resulting equality.
|| > ||
|| > || If both 'margin-left' and 'margin-right' are 'auto', their computed
|| > values
|| > || are equal.
|| > ||
|| > || What seems to be important is the equation and the implication that
|| > things
|| > || will be unpredictable if the equation is "over-constrained" and/or
is
|| > out
|| > | of
|| > || balance.
|| > ||
|| > || So maybe what I've learned is this: The overall block width, which
is
|| > the
|| > || sum of the left and right margins, borders, and paddings along with
| the
|| > || content width, MUST equal the width of the ancestor block content
| area.
|| > | If
|| > || possible, certain properties will be adjusted to make the equation
|| > true.
|| > | My
|| > || assumption is, that if the equation cannot be made to be true, the
|| > results
|| > || will be unpredictable.
|| > ||
|| > || BTW: there appears to be a typo in the specification. One of the
|| > "ltr"s
|| > || needs to be a "rtl".
|| > ||
|| > || Tom
|| > ||
|| > || "John Malone" wrote:
|| > ||
|| > || > For FF you would need to take out the underscore (in the CSS) and
| put
|| > || > content in the container to see it.
|| > || >
|| > || > Here it is and I think you will find something you might not have
|| > | expected.
|| > || > 8)
|| > || >
|| > || > head part...
|| > || > ==================
|| > || > <style type="text/css">
|| > || > body {
|| > || > margin: 0;
|| > || > padding: 0;
|| > || > }
|| > || > #container1 {
|| > || > padding: 0px;
|| > || > width: 100px;
|| > || > color: black;
|| > || > background-color: red;
|| > || > }
|| > || > #container2 {
|| > || > margin:0;
|| > || > Border: 0px black;
|| > || > padding: 0px;
|| > || > width: 100px;
|| > || > color: black;
|| > || > background-color: blue;
|| > || > }
|| > || > </style>
|| > || > ========================
|| > || > Body stuff
|| > || > NOTE: I added content The letter A
|| > || > and the letter B
|| > || > ======================
|| > || > <div id="container1"><p>A</p>
|| > || > <div id="container2"><p>B</p>
|| > || > </div>
|| > || > </div>
|| > || > ======================
|| > || > If you have tried this you can see why the answers are not as easy
| as
|| > | 1+1=2
|| > || >
|| > || > HTH
|| > || > --
|| > || > John Malone
|| > || > ==============
|| > || > || > || > | 8) I was going to answer all the questions BUT...
|| > || > | That might not be much real help...
|| > || > | You have FrontPage so.... make a page.
|| > || > |
|| > || > | Put your CSS in the heading and have at it.
|| > || > | It is far better to see it for your self. (at least for me).
|| > || > |
|| > || > | To get you started here is some css...
|| > || > | Put this in the <head> Just before the </head> tag....
|| > || > |
|| > || > | <style type="text/css">
|| > || > | body {
|| > || > | margin: o;
|| > || > | padding: 0;
|| > || > | }
|| > || > | #block_A {
|| > || > | width: 100px;
|| > || > | color: black;
|| > || > | background-color: red;
|| > || > | }
|| > || > | #block_B {
|| > || > | width: 100px;
|| > || > | color: black;
|| > || > | background-color: blue;
|| > || > | }
|| > || > |
|| > || > | #block_AA {
|| > || > | width: 100px;
|| > || > | color: black;
|| > || > | background-color: red;
|| > || > | }
|| > || > | #block_BB {
|| > || > | margin:0px;
|| > || > | Border: 0px black;
|| > || > | padding: 0px;
|| > || > | width: 100px;
|| > || > | color: black;
|| > || > | background-color: blue;
|| > || > | }
|| > || > | </style>
|| > || > | ===========================
|| > || > | NOTE: block_BB is set at "0" Change to suit your wants / needs
|| > || > | The blue block is in the red block
|| > || > | ===========================
|| > || > | Now you can do the HTML like this...
|| > || > |
|| > || > | <div id="block_A">
|| > || > | <div id="block_B">
|| > || > | </div>
|| > || > | </Div></td>
|| > || > |
|| > || > | and or
|| > || > |
|| > || > | <div id="block_AA">
|| > || > | <div id="block_BB">
|| > || > | </div>
|| > || > | </Div>
|| > || > | =======================
|| > || > |
|| > || > | That puts block B (blue) inside A (red)
|| > || > |
|| > || > | Now you can play with it all you want...
|| > || > |
|| > || > | Here is one of the best easy explanations I have read
|| > || > | -----------------------------------
|| > || > | Real basic CSS in FP?
|| > || > |
|| > || > | CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,
|| > || > |
|| > || > | p { color:blue; }
|| > || > |
|| > || > | That whole line is a rule. The color:blue is a style. The "p" is
| a
|| > || > selector.
|| > || > |
|| > || > | Selectors can be of four different kinds -
|| > || > |
|| > || > | 1. a tag name
|| > || > | 2. a custom class
|| > || > | 3. an id selector
|| > || > | 4. a descendent selector
|| > || > |
|| > || > | The example above is using a tag name as a selector - all <p>
| tags
|| > on
|| > | the
|| > || > | page will contain blue text.
|| > || > |
|| > || > | A custom class would look something like this -
|| > || > |
|| > || > | .special { color:green; }
|| > || > |
|| > || > | So, all <p> tags containing that class specification would
| contain
|| > | green
|| > || > | text instead of blue, e.g.,
|| > || > |
|| > || > | <p class="special">this is green</p>
|| > || > |
|| > || > | An id selector would look like this -
|| > || > |
|| > || > | #reallySpecial { color:red; }
|| > || > |
|| > || > | and you can apply it like this -
|| > || > |
|| > || > | <p id="reallySpecial" class="special">this is red</p>
|| > || > |
|| > || > | What you can see from this is that the id selector's rule has
|| > | overridden
|| > || > the
|| > || > | class selector's rule, because the text is red. This illustrates
|| > one
|| > | of
|| > || > the
|| > || > | fundamental differences between id selectors and custom
classes -
|| > the
|| > || > former
|| > || > | have a 'greater specificity' and will 'trump' other rules that
|| > apply
|| > | but
|| > || > | with a lower specificity, like custom classes.
|| > || > |
|| > || > | Finally, a descendent selector will look like this -
|| > || > |
|| > || > | .special span { color:black; }
|| > || > |
|| > || > | It says to make any span tag's contents black when they occur
|| > inside
|| > a
|| > || > | container with a class of 'special', e.g.,
|| > || > |
|| > || > | <p class="special">This text is blue except <span>for this,
which
|| > is
|| > || > | black</span></p>
|| > || > |
|| > || > | The selector specifies the 'descent' of the rule from container
| to
|| > || > content,
|| > || > | i.e., from 'ancestor' to 'child', where, in this case, the <p>
| tag
|| > is
|| > | the
|| > || > | ancestor, and the <span> tag is the child.
|| > || > |
|| > || > | One final thing. ID selectors must be unique, in that only a
| single
|| > || > element
|| > || > | on any given page can possess it, e.g.,
|| > || > |
|| > || > | <p id="reallySpecial">whatever</p>
|| > || > | <p id="reallySpecial">whatever</p>
|| > || > |
|| > || > | is an illegal instance of this, since there are two elements,
| each
|| > of
|| > || > which
|| > || > | has the id="reallySpecial" value.
|| > || > |
|| > || > | A class selector can be used any number of times on a given
page,
|| > | e.g.,
|| > || > |
|| > || > | <p class="special">This text is blue except <span>for this,
which
|| > is
|| > || > | black</span></p>
|| > || > | <p class="special">This text is blue except <span>for this,
which
|| > is
|| > || > | black</span></p>
|| > || > |
|| > || > | would be perfectly valid.
|| > || > |
|| > || > | In the scheme of things, there are rules for calculating the
|| > | specificity
|| > || > of
|| > || > | the styles. Here are some of the rules -
|| > || > |
|| > || > | 1. The style that is closest to the element being styled wins in
|| > the
|| > || > absence
|| > || > | of other mitigating factors. This is why you cannot trump font
| tags
|| > || > with....
|| > || > |
|| > || > | CSS, since the font styles are always closer.
|| > || > | 2. A redefined tag has a specificity value of 1.
|| > || > | 3. A custom class has a specificity of 10.
|| > || > | 4. An id selector has a specificity of 100.
|| > || > |
|| > || > | Thus, in this case, the green color would have a specificity of
1
|| > and
|| > | the
|| > || > | custom class of 10. The class wins.
|| > || > |
|| > || > | h1 { color:green; }
|| > || > | .headline { color:red; }
|| > || > |
|| > || > | <h1 class="headline">This is red</h1>
|| > || > | ============================
|| > || > |
|| > || > | It is nice that you are taking the time to learn some CSS
|| > || > | 8)
|| > || > | Padding is inside the container
|| > || > | Margin is outside
|| > || > |
|| > || > | Hope this helps some
|| > || > | --
|| > || > | John Malone
|| > || > | ==============
|| > || > | || > || > || I've done my homework by reading the spec and searching the
net,
|| > but
|| > | I'm
|| > || > || still confused about the CSS width property as it relates to
the
|| > || > ancestor.
|| > || > ||
|| > || > || Using the example: the nearest ancestor's (A) content area is
|| > 100px.
|| > | The
|| > || > || box inside it (B) has a width of 100% with no other dimension
|| > | properties.
|| > || > | My
|| > || > || assumption is that the content width, the padding boundary
| width,
|| > the
|| > || > | border
|| > || > || boundary width, and the margin boundary width are all 100px.
|| > || > ||
|| > || > || Now, if I add a left or right dimension to the margin, border,
| or
|| > | padding
|| > || > || does the content width of B shrink by the sum of these widths?
| Or
|| > | does
|| > || > | the
|| > || > || content area "push" these dimensions out beyond 100px?
|| > || > ||
|| > || > || Using the same boxes, assume that B has a width property of 90%
|| > and
|| > || > assume
|| > || > || the sum of the widths of the padding, border, and margin are
| 6px.
|| > Is
|| > | the
|| > || > || content width of B 90px or is it actually 94px?
|| > || > ||
|| > || > || Sorry for asking something this basic, but I got confused when
|| > trying
|| > | to
|| > || > || understand it.
|| > || > ||
|| > || > || Thanks
|| > || > ||
|| > || > || Tom
|| > || > ||
|| > || > ||
|| > || > |
|| > || > |
|| > || >
|| > || >
|| > || >
|| > |
|| > |
|| >
|| >
||
||
|
|

Guest · May 9, 2006

Great quote, John! Made me smile and it is sooooo true.

I just got done studying the companion book to csszengarden and saw first
hand some of the ways designers used to deal with the situation.

However, rather than lament the situation we're in, I'd like to stay focused
on how width management of blocks SHOULD work and which UA shows it well.
Not so much to get into the browser comparison discussion, but to make sure
theres a tool to visualize the result.

Given that, IE, in this case, may be attempting to do what the spec says
best. I still have lots of tests to perform (there are 7 variables in the
equation), and will post learnings here. I mean, that's why I started the
thread in the first place: to get an education on width for objects,
particularly nested ones.

Tom

John Malone · May 10, 2006

The FF is the closest to the standards you can get.
That said the IE-6 (not IE-7) seams more logical (to me).
This statement is also dependant on a "valid Doc Type".
I started being interested in CSS when csszengarden only had about 8~10
pages and have read a lot since.
You might need to kind of forget what you know about tables and how to use
them for positing. (I had to)
Tables are still needed in some cases like to display tabular data. (I think
I have two on my site).
The biggest area of potential trouble relates to tables and their
inheritance (or lack thereof) of styles.

The rules apply to 90% of what you would normally do. Worry about the
others when they come up.
Keep the number of containers to a minimum and learn about (and how to use)
floats. (Really Kool!)

You might have seen this but just in case...
http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
This guy is good!
Also look at the Faux Columns at the bottom.

Here is another if you don't mind the "Down Under" (I like the accent
though)
http://css.maxdesign.com.au/
Floats...
http://css.maxdesign.com.au/floatutorial/introduction.htm

======================

BTW: Doc Type Transitional = Quirks Mode?
http://www.ericmeyeroncss.com/bonus/render-mode.html

I have to go "Back to work"
--
John Malone
==============
| Great quote, John! Made me smile and it is sooooo true.
|
| I just got done studying the companion book to csszengarden and saw first
| hand some of the ways designers used to deal with the situation.
|
| However, rather than lament the situation we're in, I'd like to stay
focused
| on how width management of blocks SHOULD work and which UA shows it well.
| Not so much to get into the browser comparison discussion, but to make
sure
| theres a tool to visualize the result.
|
| Given that, IE, in this case, may be attempting to do what the spec says
| best. I still have lots of tests to perform (there are 7 variables in the
| equation), and will post learnings here. I mean, that's why I started the
| thread in the first place: to get an education on width for objects,
| particularly nested ones.
|
| Tom

Guest · May 10, 2006

Murray said:
Are you testing these on pages with valid and complete doctypes?

I think so. I'm using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

If that's not right, let me know.

I've been doing some testing with the spec in mind. I was particularly
interested in figuring out whether I was understanding the spec properly. As
I read it:

Margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right
must equal the content width of the nearest ancestor. If it doesn't,
adjustments are made using 3 rules: 1) margin-right is recalculated if all
of the props have values other than AUTO, 2) if only one of the props has a
value of AUTO, it is recalculated, and 3) if width is AUTO all other props
with a value of AUTO are set to 0 and width is recalculated. There's a 4th
rule that says if margin-left and margin-right are AUTO their computed values
will be equal.

So, are there some rules-of-thumb here? Well, one I am starting to use is
either be very careful about making sure the equation is ok or make sure you
select the part of the equation where you want the adjustments to be made and
set it ,and only it, to AUTO unless you want the right margin to act like it
was set to AUTO.

So maybe, since the basis of the width rule is an equation, it really is as
simple as 1+1=2 (ML+BLW+PL+W+PR+BRW+MR=AC)

What's interesting is to run tests with multiple browsers where the equation
is forced out of balance (AC > and AC <) and then to assign a prop the value
of auto and then change which prop is set to auto. Hint: IE didn't do as
poorly as one might think based on its reputation.

There is a simple summary lurking here somewhere similar to the summary of
syntax and terminology you included in your first post on this thread.

Tom

CSS Problems	8	Aug 17, 2008
CSS bug in IE or coding error? Workaround?	4	Jun 6, 2006
pages don't work in Firefox?	2	Jan 12, 2010
Menu in CSS problems	9	Nov 12, 2008
CSS problem in Firefox	4	Nov 17, 2008
news letter	1	Apr 18, 2008
Glue footer to bottom of viewport on short divs & scroll longer d	10	Feb 25, 2006
problem with css and picture	2	Oct 3, 2005

Help clarifying css width property

Guest

John Malone

Murray

Guest

Guest

John Malone

John Malone

John Malone

Guest

Murray

John Malone

John Malone

Murray

Guest

John Malone

John Malone

John Malone

Guest

John Malone

Guest

Ask a Question

Similar Threads