Simple Double Quotes with CSS

1. btw. it’s not necessarily but you should use block elements inside your blockquote, like for example

2. That’s a great idea. I wanted to do this before, and when I saw this article I almost slapped myself. So obvious, yet so clever. Nice work.

3. I Quite agree with Ankur on this tutorial. Ingenious, and i can’t believe that I did not think of how to do this myself.

4. Ludwik is right (I can imagine what his examples would have looked like).

   According to the w3c, under a strict doctype blockquote is for long quotations (block-level content). Unless you’re using a transitional doctype, text should not be placed directly inside a blockquote element without block-level tags surrounding it. Therefore, if the blockquote is marked up correctly, the method of using :first-letter unfortunately won’t work.

   The only solution I can think of is perhaps applying the bottom-right background image to the blockquote itself and the top-left background image to blockquote p. All you’d have to do then is cancel out the top-left background image for any subsequent paragraphs, using something like blockquote p ~ p { background: none; }.

   The same technique could be used for the drop-cap:
   blockquote p:first-letter { font: italic 1.4em Georgia; }
blockquote p ~ p:first-letter { font: normal 1.2em Georgia; }.

   You might run into some trouble when quoting content other than straight-forward paragraphs though (such as a list). Hope that helps.

5. Good example, but this doesn’t work in IE 6, does it?

6. Good, but useless in production work since it doesn’t work in IE6.

7. Stavanger and Wolf:

   Sure, it works in IE 6. I tested in IE6, IE7, Opera, Firefox, and Safari.

8. Steffen:

   Thanks for your input. Unfortunately IE doesn’t support CSS selectors.

9. You can also use this css:
   
blockquote p:before {
content: open-quote;
}
blockquote p:after {
content: close-quote;
}

   This will only work in a modern Browser but it’s nice and quite simple. You can also use additional CSS to style the quotes. E.g. a bigger font size or an other color. take a look

10. @Nick: That wont matter when IE’s market share drops below 10%… I long await that day *sniff*

11. You’re welcome.

    I know IE sucks in this (and many more other) matter. In this case you should use conditionals comments or (css)hacks.In fact the example above is a great way for a standard conform web browser. IMHO.

12. This is a nice technique, but unfortunately of no use to me if it doesn’t validate. On a related note, I put together a pull-quote design showcase that you might be interested in.

13. Hello Nick.
    I see some bug.
    The Close button ( X ) don’t transparent. Test on IE6 and MyIE.
    And in Opera 8.5 im don’t see the title “Simple Double Quotes” and post “This CSS tutorial will show you how …” to first textarea.

14. first..congrat on the opening nick :)
    been looking for the double quote css trick some times now..thanks
    checking out your other post now ;)

15. Personally I use two images, because many browsers (first IE) not support yet this css features: first-letter, text-tranform, before, after, etc…

16. Meh, I’d gladly discriminate against IE since usage is falling behind anyways…

    Excellent and del.icio.us article you got there, Nick. Yes I bookmarked this tutorial :D

17. I’ve been looking for an easy way to do this for a while now… thanks for the tutorial! The first-letter code didn’t work for me for some reason, so I used Sam’s suggestion of utilizing the P tag, but now I get 2 open quotes in front of each separate paragraph… the close quote seems to be working fine though… I’ll try again!

18. wow, I want to know how to make a div section right in the center of the screen.Just like the ‘preview’ your page show.

    thx

19. @ Mo-Mo:
    As I said, try sticking blockquote p ~ p { background: none; } in the css. That should do the trick. :)

20. Maybe you’re making things too complicated. For XHTML, a blockquote should include a block-level element, as seen here:

    https://www.w3schools.com/tags/tag_blockquote.asp

    So, you have two places for background images. If you put the opening quotes in the first paragraph, and put the closing quotes in the blockquote, you’ll be just fine in most cases.

21. @Sam: That technique does not work in IE6.

22. True Ed, but at least it’s valid. I’m sure you can target IE6 with some other fancy styling if you want. :)

23. I dont even remember how i reached your site but it doesnt matter, cause i’m so happy i found it, it really made me think, keep up the good work

24. It works in IE6.

    The first-letter pseudo element is supported:
    http://www.microsoft.com/technet/prodtechnol/ie/reskit/6/part3/c11ie6rk.mspx?mfr=true

25. Para ser feliz no se nesesita ser rico

26. Nice and simple even with 2 images. But I guess the first image isn’t that necesary … maybe a background color would be much easier to use and faster to load and also would fit your site better :D

27. I always thought there would be an easy way of doing that. Very simple and clean.

28. Hi there, well i tried to do this in blogsome but doesn’t worked.. can someone help me?

    thanks!

29. Does anyone else have trouble getting the quote image to appear? i have copied the html and css exactly as well as put the images in the correct directory. And for some reason, it just wont work in either IE7 or Opera. All the formatting worked the images just don’t show up.
    I am sure i made some stupid mistake but i wanted to double check first.

30. hmm.. How about you use <blockquote><p>Some text here</p></blockquote> ?
    I thought that was the way you were supposed to do it in XHTML?

31. There is actually a problem implementing your method when the image is bigger then the font, although this can be fixed by giving a bigger font, i think it’s not recommended. The other bigger problem i see is when the last letter is not in the end of the line so the last ending quote wont be near it. The best solution i could come up and it works in FF2 and IE7 is just use:

    blockquote {
    margin: 15px 15px 0 15px;
    padding-right: 30px;
    background: url(images/blockquote_end.gif) no-repeat bottom right;
    }

    blockquote p {
    background: url(images/blockquote_start.gif) no-repeat top left;
    padding-left: 35px;
    }
    so 2 images are used. But it would cause problems if there are 2 paragraphs in a 1 blockquote…

32. hmm.. this method works. but what it doesnt work with

    <blockquote><p> text here</p></blockquote>

    any idea?

33. How about you use

    Some text here

    ?
    I thought that was the way you were supposed to do it in XHTML?

34. with the element, specifying the language, you will obtain a more simplistic quote symbol. It is not as nice looking but it is coherent with accessibility principles and visual agents.

35. blockquote:first-letter {
    background: url(images/open-quote.gif) no-repeat left top;
    padding-left: 18px;
    font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
    }
    testing

36. blockquote:first-letter {
    background: url(images/open-quote.gif) no-repeat left top;
    padding-left: 18px;
    font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
    }testing

37. kinda confuse here and im sort of novice with css.. where shoud i put my text on this code: blockquote:first-letter {
    background: url(images/open-quote.gif) no-repeat left top;
    padding-left: 18px;
    font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
    }

38. Actually, I was looking for big double quote image at the end of para/quote.

39. Good sample, It’s require widely in community sites.

40. Is there a way to get the last comment to directly follow the lost word of the paragraph? I am trying to use this as a header on a page and I can’t get it to follow the last word. It goes to the end of the space and not the word?

    Any thoughts?

41. I found it nessesary to change the text indent for IE7 – not sure if anyone else had this issue so thought I’d share… Great sample though, I think I’ll use it for my blog comments…

    /*Start hack for IE */
    * html blockquote
    {
    text-indent: -10px;
    }
    /*End hack for IE */

42. Great tutorial, but what happens when you want to use the following code:

    text-align: justify;

    …to justify the contents of the blockquote? I’m noticing that the hanging indent changes are causing the first word to sometimes overlap the contents of the sentence (Google Chrome 1.0.154.36).

    Any idea on how to prevent that from happening?

43. i am using a text box type of field in a details view, now when i’m typing “1” it changes to “&qoutes 1 &qoutes” now i want to fix that.

44. Hey, what happened to the content: open-quote; property?

    Oh well.

45. Thanks for great code, just what I was looking for. But I must be doing something wrong as it works perfectly on Safari browser on Mac and PC and Google Chrome on a PC, but on FireFox and IE on both Mac and PCs the open-quote graphic and first-letter code don’t show.
    Any ideas where I went wrong here
    Thanks in advance.

46. Once again I am a little wiser…blockquote.
    Nice simple CSS coding example, I’m sure I shall use it in the future.

47. thanks thanks thanks!!! :)

    Nice blog layout by the way :)

48. well i think there is 1 problem, small but, i can’t select the first leter.. :/

49. Steve – get rid of the paragraph tags within the blockquote and it will work.

    It doesn’t work in IE8 though as the closing blockquote background rules get overwritten by the first-letter rules – works fine in compatibility mode though.

50. It works but it’s not the solution when you have to quote a dynamically generated text. The problem is the closed quote that can overlap the ending letters of your text.
    Try to quote this text in your example page:

    Hello, I’m a gggg gggg ggg beautiful pullquote, hfghssf hgd dgdgd sdsds sdsdsds sdsdsds sdsds

    (I use FF 3.6)

51. What do you mean by getting of the paragraph tags within the blockquotes? Could you give examples? Thanks! (:

52. It works fine.
    Thank you.
    Included it in my frontend framework.

53. The same problem like Hugo has: I cannot style the first:letter. There is no other blockquote definition in my styles.

54. Ummm, if this works – then why is your example an image dump!

55. Nice trick with first-letter css. But if you change your text content (just one more single character at the end of your example text) you’ll see it is over the closing quotation symbol. I think a padding-right will be good.

    I’m not sure is it possible to use something like last-letter? I’m looking for something like that which will place the ending quotation right after the end of last letter and not at the right-bottom of the blockquote box.

    Thanks
    Adnan

56. hi WDW i’m newbie at css and i used read from w3 dot org trying to learn fine but this is before i read your tutorials people you are very professional and you gave it very easy and clear thank you i become one of your biggest fan

57. Don’t know if anybody else told you that already but according to the specs a blockquote element HAS to contain a block level element, it can’t just contain plain text or inline elements as direct children. And this kinda complicates the quote thing because they would be displayed on their own line then.

58. Want to buy the hottest white iphone 4 conversion kit? Highest quality white iphone 4 conversion kit is waiting for your choice! Come and take it home!

59. White iphone 4 avaiable! It’s a great news to tell you the latest white iphone 4 Conversion Kit is on sale. Get the chance to make your iphone more charming!

60. Your blog has provided a great tutorial for learning web designing. It is nice to help others and you did a great job that you have started such a nice blog.

    Los Angeles Web Design

61. Don’t know if anybody else told you that already but according to the specs a blockquote element HAS to contain a block level element, it can’t just contain plain text or inline elements as direct children. And this kinda complicates the quote thing because they would be displayed on their own line then.

62. Why do you add the “text-indent:-18px;” at first? At the 3rd step, you add a “padding-left:18px;” for the first-letter.

63. Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.

64. The last example adds demonstrates a couple more features that make

65. This doesn’t work in IE8. When you add the background to the first-letter, it “overwrites” the background to the entire blockquote, so you only get the opening quote image showing.

66. JPatti is right. This method does not work with IE8. It looks great in Firefox though. Any ideas?

67. Another thing is that when searching for a good on the web electronics store, look for online stores that are regularly updated, trying to keep up-to-date with the most current products, the most effective deals, and also helpful information on goods and services. This will ensure that you are doing business with a shop that really stays atop the competition and offers you what you ought to make knowledgeable, well-informed electronics expenditures. Thanks for the essential tips I have really learned through your blog.

68. These are really stunning, there are even some sites that are new to me. All the colour schemes complex 41are definatly brave but I really think they work to make the sites eye catching and engaging.

69. Nice article!

    What also worked for me was:

    #id a {
    padding-left: 18px;
    text-indent: -18px;
    line-height: normal;
    display: block;
    }

    #id a:before {
    content: open-quote;
    }

    #featured a:after {
    content: close-quote;
    }

    This doesn’t require images.

70. “#featured a:after” ofcourse has to be “#id a:after” in this example.

71. only shows the bottom quotation mark tho.. this is the third tutorial i’ve seen but i see the samples working fine on each website except when i place it on mine. im using IE8 at this pc and tried compatibility mode and still the other image doesnt show..

    how do you make the command on “blockquote:first-letter { ” work? other sites suggested

    blockquote span {

    -OR-

    blockquote div {

    but still only the ones inside the code “blockquote {” shows..

    any help would be appreciated. thanks!

72. Nice blog here! Also your web site loads up very fast! What host are you using? Can I am getting your affiliate hyperlink on your host? I desire my website loaded up as fast as yours lol

73. hey
    i really like your code
    i needed it badly
    thanks for sharing

Comments are closed on this article.