Blockquotes and the infamous <p> tags...

Wed Mar 10 16:09:10 EST 2004

Rob Hulson <rob at robhulson.com> wrote on 03/10/04 at 2:37p:

> Hey, I just installed the beta of Markup and SmartyPants 1.5 in my 
> MovableType blog. Lovin' it so far.

Super. Glad you dig it.

> It's my understanding that if you put (with double spaces at the end of 
> the first line):
> 
>  >Text to quote
> More text to quote.
> 
> This results in:
> 
> <blockquote><p>Text to quote<br />
> More text to quote.</p></blockquote>

Correct.

> This is well and fine... unless your stylesheet has a border for 
> blockquotes. Because any text enclosed in a blockquote is also prefaced 
> by a <p> tag, the resulting look is as if there were a <br /> at the 
> beginning and end of the text, which results in the top and bottom 
> borders of the text being a line above and below, while the left and 
> right borders hug the text.

The problem is that you're only getting away with that because you're using XHTML 1.0 Transitional. In XHTML 1.0 Strict, you can't do this:

    <blockquote>
    text
    </blockquote>

The <p> tags -- or some other block-level element -- are required.
The semantic idea is that you can't blockquote *text*; you've got to
blockquote a tag or tags.

Markdown only generates strict output, either XHTML 1.x or HTML 4.

> So far, I've not found any text format plugin ever get this one right. 
> Any clues how this might be solved, or what I might put in my 
> stylesheet to make this look decent?

Something like this should work:

    <!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" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Tight margins in blockquotes</title>
    <style type="text/css">
    blockquote {
        border: 1px solid gray;
        }

    p {
        border: 1px dotted gray;
        }

    blockquote p {
        margin-bottom: 0;
        }

    blockquote p:first-child {
        margin-top: 0;
        }

    </style>
    </head>
    <body>
    <blockquote>
        <p>Foo</p>
        <p>Bar</p>
    </blockquote>
    </body>
    </html>

The idea is that you turn off the bottom margin for all <p> tags
inside <blockquote>. Then you turn off the top margin for the first
element in a <blockquote>, if it's a <p>.

You still get space between paragraphs in a blockquote, because the
remaining paragraphs still have top-margins.

Hope this helps,

-- 
John Gruber          |              Daring Fireball
gruber at fedora.net    |    http://daringfireball.net