Outer div not honoring inner div margin unless border is s..

On Aug 6, 9:07 pm, Gus Richter <gusrich....RemoveThis@netscape.net> wrote:
> Shadow Lynx wrote:
> > Browsers affected: IE6, IE7, FireFox 2.x, Safari
>
> > Because all of the browsers are rendering this the same way, I tend to
> > believe it's not a bug but rather I just "don't know the rules" for
> > how things are supposed to be rendered.
>
> > The problem is that an child (inner) div's margin is ignored if there
> > is nothing in its parent (outer) div other than itself. If the parent
> > div has a border applied, suddenly the margins are rendered. Why is
> > this? Once again, there must be a reason since all browsers are doing
> > it. Please, help me understand!
>
> > Here's a VERY simple page that illustrates my issue:
> >http://dev.digitolle.net/test/cssidiocy.htm
>
> See in the Specifications regarding "collapsing margins":
>
> <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
> <http://www.w3.org/TR/CSS21/box.html#mpb-examples>
>
> URL's which explain the why and wherefore of "collapsing margins".
>
> CSS - Auto-height and margin-collapsing
>
> <http://www.researchkitchen.de/blog/archives/css-autoheight-and-margin...>
> No Margin For Error
> <http://www.andybudd.com/archives/2003/11/no_margin_for_error/index.php>
> Uncollapsing Margins
> <http://www.complexspiral.com/publications/uncollapsing-margins/>
>
> An easy way to confirm if a problem is due to collapsing margins is to
> include this temporarily in your stylesheet:
> * {margin:0 !important;}
>
> --
> Gus

Thanks, Gus. The ComplexSpiral link explained it, and if I had more
patience, I'd read the specs. (o; Really, though, I think there
should be some kind of "margin-collapse: no-collapse" type of property
(rather than requiring a border or padding to force the uncollapsing
of the margins.) Although collapsing works for some situations, it
makes position layout with pure CSS absolute hell (I'm trying to stop
using tables, but things like this make me tear my hair out!)

Shadow Lynx wrote:
> Browsers affected: IE6, IE7, FireFox 2.x, Safari
>
> Because all of the browsers are rendering this the same way, I tend to
> believe it's not a bug but rather I just "don't know the rules" for
> how things are supposed to be rendered.
>
> The problem is that an child (inner) div's margin is ignored if there
> is nothing in its parent (outer) div other than itself. If the parent
> div has a border applied, suddenly the margins are rendered. Why is
> this? Once again, there must be a reason since all browsers are doing
> it. Please, help me understand!
>
> Here's a VERY simple page that illustrates my issue:
> http://dev.digitolle.net/test/cssidiocy.htm

See in the Specifications regarding "collapsing margins":

<http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
<http://www.w3.org/TR/CSS21/box.html#mpb-examples>

URL's which explain the why and wherefore of "collapsing margins".

CSS - Auto-height and margin-collapsing

<http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php>
No Margin For Error
<http://www.andybudd.com/archives/2003/11/no_margin_for_error/index.php>
Uncollapsing Margins
<http://www.complexspiral.com/publications/uncollapsing-margins/>

An easy way to confirm if a problem is due to collapsing margins is to
include this temporarily in your stylesheet:
* {margin:0 !important;}

--
Gus

In article
<1186447705.670631.12260.DeleteThis@e9g2000prf.googlegroups.com>,
Shadow Lynx <shdwlynxjunk.DeleteThis@yahoo.com> wrote:

> Browsers affected: IE6, IE7, FireFox 2.x, Safari
>
> Because all of the browsers are rendering this the same way, I tend to
> believe it's not a bug but rather I just "don't know the rules" for
> how things are supposed to be rendered.
>
> The problem is that an child (inner) div's margin is ignored if there
> is nothing in its parent (outer) div other than itself. If the parent
> div has a border applied, suddenly the margins are rendered. Why is
> this? Once again, there must be a reason since all browsers are doing
> it. Please, help me understand!
>
> Here's a VERY simple page that illustrates my issue:
> http://dev.digitolle.net/test/cssidiocy.htm

To see better what is going on, try adding to your .outer a bit:

background-color: red;
border: 100px solid green;

--
dorayme