There's a feature in CSS that you may not know about.
I actually learned about it only very recently, and it suddenly made it clear that many of the "CSS issues" I had were due to my lack of knowledge about that particular feature.
Let's say you have three divs nesting into each other:
.div1________
|
| .div2______
| |
| | .quote___
| | |
.div1 isn't styled at all. Now, consider the idea that .quote is a quote block that has some padding and margin to make the text breathable.
We want any text located between the beginning of .div2 and the beginning of .quote to be separated from .quote by a few pixels.
.quote
margin-top: 8px
All right. Now we want the text before .quote to be readable as well, so we add padding around .div2...
.div2
padding: 8px
border: 1px solid #999
All good. Except that if you don't have any text at the beginning of .div2, then you end up with a 8px padding (from div2) and 8px margin (from quote), making a 16px block of whitespace. It sucks.
I would usually 'fix' that with classes or complex CSS, or even some HTML, but there's another way of doing that.
.div1
border: 1px solid #999
.div2
margin: 8px
Now we have, inside .div2, two adjoining 8px margins from both .div2 and .quote.
The magic of CSS makes it actually reduce itself to the maximum of both margins (here, max(8px, 8px) = 8px).
So, we essentially cancel our quote's top margin and get some proper positioning.
Yay.
So I did exactly that for Wedge's quote blocks. It works perfectly, although I need to figure out how to remove the extra HTML linebreaks that are inserted before a quote.
Now, here's my problem... Which I only noticed this morning.
A quote nested inside another quote.
.quote____
|
| .quote__
| |
The outer quote has some *padding* to make the text inside it actually readable. The inner quote has margins and paddings, too. But because padding and margin aren't mutually exclusive, the inner quote doesn't get the benefits of margin collapsing, and thus a disgracious extra padding shows up.
So... What solution do we have?
- Removing the padding, and replacing it with a margin. The HTML is a bit more complex than what I show above, but it basically works... Somehow. However, we use extra borders and, more importantly, extra backgrounds, that require using paddings and NOT margins if we don't want the inner text to 'stick' to the background's boundaries. The solution would be to use background-origin: margin-box, where the background extends to the margins... Except that there is NO such property in CSS -- it only supports content, padding or border, but doesn't extend to margins at all. Well, if that isn't a useful CSS property eh...?
- We could add an extra div layer inside the .quote, so that we need not apply padding to .quote... In this case, the outer quote has a natural border, which stops any collapsing, then inside it, no padding, then a div with no padding but a margin that is there for text, and finally an inner quote that has a margin, and will 'collapse' against its outer div's margin.
Yeah, you can already see it... It's *extra markup*, just to fix something that should be a natural, or at least be taken into account by a CSS property.
So... Any ideas anyone?
Posted: May 4th, 2012, 04:14 PM
(Another possibility would be to add a br tag at the beginning of the quote html, and then strip br's away from the beginning of the post, and I think we already do that...)