Hi all,
I have noticed a CSS behaviour that seems strange to me, so I thought of
asking to someone for some explanation.
I have this snippet of XHTML 1.0 strict code:
<div class="a">
<div class="b top">
<h1>Page Title</h1>
</div>
</div>
and the CSS code is:
* {
margin: 0;
padding: 0;
}
.a {
width: 700px;
margin: 20px auto;
border: 1px solid #000000;
}
.b {
background: #cccccc;
}
.top {
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
}
h1 {
margin: 1em 0;
}
Now, I tested it only on FF 3.0.5 on Win XP SP3 and, if I comment the .top
properties, the background of the title container "b" is shortened to
contain h1 without margins (and till now it is obvious). What I cannot
understand is that if I uncomment the .top border properties, the background
is extended containing even the h1 margins. I achieve the same thing as the
following CSS code:
* {
margin: 0;
padding: 0;
}
.a {
width: 700px;
margin: 20px auto;
border: 1px solid #000000;
}
.b {
background: #cccccc;
}
.top {
}
h1 {
padding: 1em 0;
}
May anyone tell me why?
Thanks in advance.
--
~ Cristian Palmas ~
http://www.cristianpalmas.it
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
