three years agoStill testing those blockquotes

Inspired by the comments on my last entry I decided to try out their techniques with some multiple paragraphs. Since my technique was only ever aimed at single quotes, I welcome the new suggestions.

I really love the display: list-item idea that Pete Lambert but I have been avoiding last-child because of browser compatibility issues.

First I tried multiple quotes with the paragraphs displayed as list items and list-style-position: inside; the problem with that is that the second bottom right quote to display correctly without extra markup. Naturally it is not possible to have the display set as list item - to get both images appearing per paragraph - together with the display inline - to get the second quote make snuggled amongst at the end of the text.

So, just for fun I made it look nice with the constraints of no extra markup, not the same look or idea admittedly but the padding and list-style-position outside are more consistent than the first attempt.

The only way to make it resemble the first 'one paragraph - inline image quotes - effect is to add an extra div containing each paragraph, yeah its nasty, I know. The div is set to display list item with list-style-position as inside, the paragraph is display: inline with the background image.

It could be argued that logically each paragraph should not have their own quote marks, if this is the case there are a number of methods that you could use, either Ben's last child technique or Simon's similar, background image technique from a while back, which again requires extra markup.

As ever the technique you choose all comes back to the design, and what you want to do with it.

Posted at 12:12 am on the 23rd of November 2006. 5 Comments

5 comments

  1. This would be a good time to use the DOM to plug the holes in CSS support.

    James Wheare 23rd November 2006 00:53permalink.

  2. It's coming along nicely, Nat. One thing I've always been led understand about blockquoting with multiple paragraphs is that only the final paragraph should have a close quote, while all paragraphs have the opening. If anything, perhaps that rule would make the CSS easier…

    Ben Ward 23rd November 2006 17:22permalink.

  3. Yeah I guess that gramatically speaking for multiple paragraphs you should have only one ending quote and perhaps also only one starting quote. To be honest I really just wanted to try out the technique as an experiment on multiple paragraphs :)

    natbat 24th November 2006 19:15permalink.

  4. this is nice ^^ i might steal your code ;) thanks ^^

    qureyoon 25th November 2006 06:13permalink.

  5. Nice work. I partially agree with Ben's approach, but think that only the first paragraph should have an opening quote, and only the final paragraph should have a close quote. Looked at Ben's site and search for a post on the last-child technique, but couldn't find it. Any pointers? Thanks.

    Michael Montgomery 20th December 2006 16:29permalink.

Comments are closed.

23rd November 2006

You are reading "Still testing those blockquotes" written by Natalie Downe on the 23rd of November 2006 at 12:12 am.

Previously hosted at http://notes.natbat.net/2006/11/22/blockquotesagain/

Next: Snap and Twitter on the wind

Previous: Inline image quotes