Here's a test version of (part of) a page:

http://imaginatorium.org/shop/haruyox.htm

I have been fiddling around with margins and padding to arrange these "other series" thumbnails, using borders of various colours so I can see what's happening.

Unfortunately, when I remove the test borders, everything collapses in a heap.

The top version is a mess, with border:none; - the bottom version is what I intended to make, with test borders. In particular note the 2em margin between adjacent divs, and the position of the row of images under the fan.

Although I thought this was an Opera problem - the 2em margin between divs is ok in Firefox, the row by the fan does exactly the same thing. It seems that the meaning of these margins and stuff depends on whether there is a visible border or not. Well, help! I simply don't know how to deal with a software system where everything changes when you remove the debugging info.


Here's the diff file between the two versions - please check there are no differences other than removal of the borders:

3c3
< <div class=main style="margin-top: 2em; margin-bottom: 2em; border:none">
---
> <div class=main style="margin-top: 2em; margin-bottom: 2em; border:thin solid black;">

19c19
< <div class=main style="background: url('img/harucol.gif') no-repeat transparent; margin-top:2em; clear:left; border:none;">
---
> <div class=main style="background: url('img/harucol.gif') no-repeat transparent; margin-top:2em; clear:left; border: solid thin green">

21c21
< <p style="float:left; padding: 0 0.5em 0 0; margin: 120px 0 0 0; width: 100px; height:80px; border:none;">Colours series (mid-2004 to 2005)</p>
---
> <p style="float:left; padding: 0 0.5em 0 0; margin: 120px 0 0 0; width: 100px; height:80px; border:thin solid blue;">Colours series (mid-2004 to 2005)</p>

23c23
< <p style="margin: 55px 0 0 110px; padding: 0; border:none;">
---
> <p style="margin: 55px 0 0 110px; padding: 0; border:thin solid red;">

Aha! OK, try this quick hack version:

http://imaginatorium.org/shop/haruyoy.htm

I went through and sprinkled &nbsp; like pixie dust, and suddenly everything behaves. I suspect there is some profound confusion at the heart of this, because the whole html/css edifice is created like a long novel, full of vague hints, and general assumptions, such as that all "content" includes "text". Given the sort of babbling confusion about what a "paragraph" is, it's not surprising no-one can implement the "spec" reliably.

So is this the answer? Could I write a macro, effectively globally replacing </p> by &nbsp; to make sure everything has "content"??????

Sorry, long past my bedtime.

That looks like a problem with collapsing margins. Borders can keep otherwise adjacent margins from being adjacent, which keeps them from collapsing. (I like to use background colors rather than borders when debugging CSS layout.)

Anyway, you could use padding (which doesn't collapse) rather than margins. Or you could use transparent borders, which I don't think is the same as no border.

Thanks Darin. Well, I'm aware that vertical margins don't add in general, but are replaced by the greater of the two values, but I don't understand how the presence of "borders", whether visible or not, change this.

I looked at the pathetic apology for a "specification":
http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins

That's it? One paragraph? How do browser writers manage to agree - to the extent that Firefox and Opera do based on that cryptic bit of suggestion? Is it all guesswork? Or as you read the 500-page novel do you get hints all over the place about whether images are "content" or not? Is there a _real_ specification anywhere?



That's helpful - I suppose one could use the heuristic that padding is more likely to behave predictably.

But none of this begins to explain why whole chunks of margin simply disappear: here's the example page...

http://imaginatorium.org/shop/haruyox.htm

In the lower version, with borders, there is 2em margin on the bottom of the first box and top of the second; this "collapses" to make 2em total gap. OK. But take the borders away, and this already-"collapsed" margin simply disappears entirely. There is nothing like 2em gap between the images in one box and the images in the other.

Then sprinkly &nbsp; pixie dust restores it all!! (See http://imaginatorium.org/shop/haruyoy.htm )

The only guess I can make at a model of this is that images are simply not regarded as content at all; though the instant there is "content", meaning text, in the form of &nbsp; pixie dust, the space occupied by the images is calculated correctly.

Well, I simply don't know how to approach this: transparent borders, &nbsp; pixie dust both seem like horrible kludges (and who is to say what other browsers do?) How can I ensure that two divs with a margin of 2em have at least 2em between them?

I forgot to say: double-thanks for this one, because it's actually an executable strategy, which I will try to remember.

I have a CSS "quick reference", but it's little more than a list of the keywords. Does anyone know of any good resources that condense the semantics a bit?

Quick conclusion (retyped after more confusion from this truly awful forum software: why are there three buttons in a row below the "Fast reply", and the one in the usual "Confirm" position, vaguely worded to suggest it completes the reply actually throws it away. Is it not possible to do *something* to improve this?):

I seem to have separated this into two problems:

(a) "Genuine" collapsing margin problems, avoided by using padding instead

(b) An Opera bug, in which a div with no "text-content" loses its margins. Can be solved with pixie dust.