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

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.

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.

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.

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

Thanks for the confirmation Nick. I asked the question because IE 6 doesn’t support child selectors (>), not even :hover outside of link. This thread http://archivist.incutio.com/viewlist/css-discuss/21459 also discuss some interesting stuff. It looks like IE6 support fo :first-letter is off and on, I’ll take a look next time I have a change bootcamping.

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

What a great idea. Thanks for the tutorial, I will start using this in my current project. I owe you one :)

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.

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

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

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

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

Pretty cool but, don’t forget the (often overlooked) CITE attribute.
It should show where the blockquote came from. I know the problem is the browsers don’t give people a way do do anything with it but, that can be handled with a little js.
I made a demo/tutorial here on a hovering tooltip for the title and cite attributes
http://willcode4beer.com/tips.jsp?set=blockquoteHover
But, I am sure you could style it to look much better ;-)

@Sam: That technique does not work in IE6.

great stuff!

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

Para ser feliz no se nesesita ser rico

Thank You for this site! I mean the design is awesome! The bots and I will be regular visitors now!

Be well!
-LB

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

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.

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?

Nice, I’ve used this with other images then the quotes. Very good way to make something stand out.

it’s cool, thank you for this site!

How about you use

Some text here

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

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.

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

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

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

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?

Nice tutorial and a good looking page.

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 */

Your web page ‘s design look very good. I learn a lot of things from your web site. Thank you

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?

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.

Thanks you

This is exactly what I have been looking for. Thank you!

Your web page ’s design look very good. I learn a lot of things from your web site. Thank you

Great , Simple Double Quotes
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

thasnk so much

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 http://totalfmc.com
Thanks in advance.

thanks thanks thanks!!! :)

Nice blog layout by the way :)

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

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)

Thanks for info. aku mau coab dulu, mudah-mudahan berhasil

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

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

thank you so much for sharing :p

Share admin thans a lot for sharing a very successful.

I always follow your site thank you

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

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.

I think a padding-right will be good.

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!

denedim çalışıyor

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.

thnks
goooooooooooooood
min:(

:)
hooob

ignore weight

thnks

gooooooooooooooood

min:)

The last example adds demonstrates a couple more features that make

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

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.

Everything was very nice great wonderful color matching shares

The closing date is May 2012 right ?

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.

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!

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