Forum Moderators: not2easy
I set the margin of the border divisible element to four pixels. I think one person explained it as getting 10px of margin total between all paragraphs from margin: 10px;...wait so 10+10=10? This can not be the same spec that deals with collapsed width on floated blocks.
Let me make this clear: I do not want to change the current visual appearance of the page to counteract this spec nor do I want to be forced to add anything to the XHTML as that would breach the whole point of using CSS!
So I spent the past three hours adding padding and borders just to see what is triggering collapsed margins and nothing is giving way to progress. May I have some help here please?
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Prevernt Collapsed Margins!</title>
<style type="text/css">
#body {
background-color: #000;
border: #fff solid;
border-width: 40px 1px 1px 1px;
bottom: 36px;
left: 4px;
overflow: auto;
padding: 0px;
position: absolute;
right: 4px;
top: 9px;
z-index: 1;
}
#bottom {
background-image: url(interface-background.gif);
border: #f00 solid;
border-width: 1px 0px 0px 0px;
bottom: 0px;
font-size: 14px;
height: 31px;
left: 0px;
line-height: 14px;
position: absolute;
width: 100%;
z-index: 2;
}
#bottom span {
padding-left: 4px;
}
#head {
background-color: #222;
height: 39px;
left: 5px;
position: absolute;
right: 5px;
top: 10px;
z-index: 2;
}
#head #location {
padding: 1px 0px 0px 1px;
}
#head #location a:link {
background-color: transparent;
color: #9cac53;
font-size: 22px;
letter-spacing: 2px;
line-height: 16px;
text-decoration: none;
vertical-align: top;
}
#head #location a:visited {
background-color: transparent;
color: #9cac53;
font-size: 22px;
letter-spacing: 2px;
line-height: 16px;
text-decoration: none;
vertical-align: top;
}
#head #location a:hover, #head #location a:focus {
background-color: transparent;
color: #fff;
font-size: 22px;
letter-spacing: 2px;
line-height: 16px;
text-decoration: none;
vertical-align: top;
}
#head #menu a.menuaa {
border: 0px;
display: block;
}
#head #menua1 {
left: 1px;
}
#head #menua2 {
left: 82px;
}
#head #menua3 {
left: 163px;
}
#head #menua4 {
left: 244px;
}
#head #menua5 {
left: 325px;
}
#head #menua6 {
left: 406px;
}
#head #menua7 {
left: 487px;
}
#head #menua8 {
left: 568px;
}
#head #menua9 {
left: 649px;
}
#head #menua1, #head #menua2, #head #menua3, #head #menua4, #head #menua5, #head #menua6, #head #menua7, #head #menua8, #head #menua9, #head #menuathemes {
background-color: #222;
border: #666 solid;
border-width: 1px 1px 0px 1px;
color: #000;
height: 19px;
margin: 0px 0px 0px 1px;
position: absolute;
text-align: center;
top: 19px;
width: 78px;
z-index: 4;
}
#head #menua1:hover, #head #menua2:hover, #head #menua3:hover, #head #menua4:hover, #head #menua5:hover, #head #menua6:hover, #head #menua7:hover, #head #menua8:hover, #head #menua9:hover {
background-color: #666;
border: #fff solid;
border-width: 1px 1px 0px 1px;
color: #000;
float: left;
height: 19px;
margin: 1px 1px 1px 1px;
text-align: center;
top: 19px;
width: 78px;
}
#head #menu a:link {
display: block;
text-align: center;
}
#head #menu a:visited {
display: block;
text-align: center;
}
#head #menu a:hover {
}
#head #menu a:active {
}
#head #menu a:focus {
background-color: #333;
}
#head #menu a.menuaa:link, #head #menu a.menuaa:visited, #head #menu a.menuaa:hover {
line-height: 18px;
}
#top {
background-image: url(interface-background.gif);
border: #f00 solid;
border-width: 0px 0px 1px 0px;
height: 4px;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 2;
}
* {
border: 0px;
font-size: 17px;
margin: 0px;
padding: 0px;
}
a:link {
color: #0f0;
text-decoration: none;
}
a:visited {
color: #0f0;
text-decoration: none;
}
a:focus {
background-color: #333;
color: #fff;
text-decoration: underline;
}
a:hover {
color: #fff;
text-decoration: underline;
}
a:active {
background-color: #333;
color: #fff;
}
body, html {
background-color: #000;
color: #a7a68f;
overflow: hidden;
}
br.clear {
margin: 0px;
padding: 0px;
}
div.border {
border: #f0f solid 3px;
margin: 0px 4px 0px 12px;
}
h1 {
background-image: url(interface-background.gif);
border: #fff solid 1px;
color: #9cac53;
font-size: 21px;
margin: 4px 0px 0px 4px;
padding-left: 2px;
width: 64%;
}
span.color1 {
color: #9cac53;
}
span.color2 {
color: #ebef92;
}
span.color3 {
color: #a7a68f;
}
span.color4 {
color: #fff;
}
span.color5 {
color: #099;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
padding: 0px 0px 0px 1px;
}
table th {
background-color: #222;
}
table th:hover {
background-color: #666;
}
</style>
</head><body>
<div id="body">
<h1>header</h1>
<div class="border">
<div style="height: 1600px;"><p>There should be 4px of space between the bottom of the pink and white borders!</p></div>
</div><!-- /.border -->
</div><!-- /#body -->
<div id="head">
</div><!-- /#head -->
</body>
</html>
div.border {
border: #f0f solid 3px;
margin: 0px 4px 0px 12px;
}
[edited by: MarkFilipak at 4:45 am (utc) on Mar. 10, 2008]
- John
divsmargins put space between elements not in them.. sorry if I'm being a bit dense here
div.border {
border: #f0f solid 3px;
margin: 0px 4px 40px 4px;
}
There should be space after the bottom of the pink border (it's bottom margin) and before the top of the bottom white border. I don't think I clarified it well enough.
You can force a "margin" using br elements as so though as I originally intended I'd like to do this properly using CSS...
</div><!-- /.border -->
<br /><br /><br /><br /><br />
</div><!-- /#body -->
- John
what element exactly are you wanting to margin the bottom of the pink border div from?
If you want space between the border div (pink border) and the fake body div/wrapper (the white border) should you not be padding the #body/wrapper div?
To my mind if you want the space on the inside of "the box" it should be padding - outside of "the box" is margin. Margins space a particular element away from a following element, not a nested one (though sometimes that works too by accident of positioning or whatever)
e.g. from
<open element 1>
content
</close element 1>... this space provided by margin on either or both (this might 'collapse' to greater of the two) ....
<open element 2>
content
</close element2>
or, within
<open element 1>
<open element 2>
content
</close element 2>
... space provided by padding on element 1
</close element 1>
I do often forget how the approach works so do say if this isn't making sense, 10 years of reading developing specs can do that a to person :)
#body {padding-bottom: 4px;}
IE7 and Opera 9.5 build 9807 add the padding.
IE8, Firefox 3 1.9b5/2008031004, and Webkit 523.15 do not add the padding.
I go by liquid CSS1. Do NOT add anything except for width (or in this specific case positioning) to a parent element but instead add "padding" by using margins on the child element.
- John
As you well know, I use CSS exclusively. I never (EVER) use margin. I only use padding. Guess I'm with Suzy. I've not found a browser that screws it up.
You messed up your original posting -- OK, we're all human -- but could you cook up a simpler example without all the superfluous code? That'd be nice.
Here is a revised version of the page with much less code. The divisible border class should a simple 4px of margin on all sides.
*edited has to should*
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Prevernt Collapsed Margins!</title>
<style type="text/css">
#body {
background-color: #000;
border: #fff solid;
border-width: 1px;
bottom: 4px;
left: 4px;
overflow: auto;
padding: 0px;
position: absolute;
padding-bottom: 4px;
right: 4px;
top: 4px;
z-index: 1;
}
* {
border: 0px;
font-size: 17px;
margin: 0px;
padding: 0px;
}
body, html {
background-color: #000;
color: #a7a68f;
overflow: hidden;
}
div.border {
border: #f0f solid 3px;
margin: 4px;
}
</style>
</head><body>
<div id="body">
<div class="border"><div style="height: 1600px;"><p>There should be 4px of space between the bottom of the pink and white borders!</p></div>
</div><!-- /.border -->
</div><!-- /#body -->
<div id="head">
</div><!-- /#head -->
</body>
</html>
[edited by: JAB_Creations at 11:10 pm (utc) on Mar. 10, 2008]
tried to look into this this morning and kept getting sidetracked, I see that even just using padding does not work in Safari (I haven't d/l IE8 or FF3 yet. something else to get around to)
I *think* but can't find yet that it must be because of changes/support enhancements to behaviour of the overflow property as this is prevalent in newer builds of browsers..
just for interest while I'm looking, can you show me the bit, in CSS1, where it says to use margins to create internal space.. I would so be wanting to use padding .. in a normal situation margins on the inner element should collapse so creating a "padded" space with them without padding would be difficult - except for the fact the outer box is absolutely positioned in your case and margins don't collapse with AP elements..
anyways either way I don't think this is collapsing margins at all I think it's UA interpretation of overflow/clipping/padding edges etc :o
I determined that to correctly create pixel-perfect liquid layouts it is necessary for parent-elements (those elements who's direct parent is the body element) may not contain borders, margins, or padding; only width. That means for example to have "padding" between the content and a sidebar in a two column layout the child elements (body div div {}) must use margins to create a visual padding. So a two column layout (#content and #sidebar) would have 80%/20% width without any border, margin, or padding.
By keeping this in mind I've been able to create forms that are fully liquid which I'm sure if memory serves me correctly I debated with you a few years ago here. ;) Using body #sidebar form div input I would give the divisible a negative margin which would allow my block-level input elements to use percentage widths and perfectly fit in the sidebar with a 1px "padding" between them and the form's border. It took me a while to achieve that especially since form elements have had poor styling support however IE8 renders my site's layout except for two bugs and some major performance issues revolving around overflows and anchors. Currently about half of the browser rendering engines correctly render the width of inline elements such as inputs when they are set to display as block-level elements; the rest are off by a pixel such as select elements in Gecko that do not add the border to the width while IE8B1 does.
I'd like to know so I can post a bug report for IE8 before it's too late. I already posted STACH and LORP bugs. :)
- John
I haven't enough browsers installed to test all their nuances as they appeared at various stages of their development, but at this time as far as either method, padding or margin, is concerned, I would say it's simply UA interpretation.
In the CSS2.1 recommendation for overflow [w3.org]
amongst other things there is this:
Even if 'overflow' is set to 'visible', content may be clipped to a UA's document window by the native operating environment.
I'm fairly sure that that's what is happening when margin is used at the bottom the UA's are simply clipping to their window rather than adding on an extra margin.
Now as far as padding goes:
it's this bit..
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
...
* An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the 'height' property, not by content height)
...
This applies to the inner div in your example, so it's the inner div (default overflow:visible) that the UA's have to decide how to clip not the outer, and we're back to the first bit.. they can cut it off, there is nothing that says they must allow for padding space. the UA's actually are using the padding space - the height of the scrollable area includes padding** so they know what height is available to scroll (document window) whether they put inners content over outers padding area is not stipulated.
** basically as far as I can simplify an explanation of my thoughts, your AP positioned div by virtue of the four co-cordinates has an implicit height. Up until now, IE7 has not taken this on board, i.e. it wouldn't pass on this implicit height (and that's what could be different about IE8, and why it's now doing the right thing?)
so it has a height, now that height includes padding yes I know that sounds weird because it should be height +borders +padding BUT think of this in reverse or let me give another example. If the AP div didn't have an implicit height determined from the co-ordinates.. but instead had an explicit height given via the height property (lets say 300px} if you then added padding (say 40px all around;} to that height, the scrollable/overflowable (document window?) area would be 380px, it would be div height + padding per normal box model rules. What we need to do is think of height as "content-height" not height of box.
With an implicitly calculated height (using the four co-ordinate method) the AP element cannot exceed the co-ordinates so it needs to put the padding inside in order to calculate the implicit content-height, therefore the actual implicit content-height will be height of the box less the padding.
It's this box height whether explicit+padding or implicitly calculated which the UA's will clip to, that's the document window as you've handed the scroll over to it. As I see it they are simply making best use of the space, perhaps not your desired use but still, they are simply using their given right according to the above recommendations.. there is perhaps very good reasons for this but even my brain has it's limits :)
