Better Blockquotes "Classy Quote"

Anonymous
February 26, 2011 at 3:06 pm #575
Hi

Better Blockquotes “Classy Quote”: http://css-tricks.com/examples/Blockquotes/#

Hmm, anyone know how to show the “closequote1.gif”?
```
blockquote {

font: 14px/20px Italic Times, serif;

padding: 8px;

background-color: #faebbc;

border-top: 2px solid #e1cc89;

border-bottom: 2px solid #e1cc89;

margin-left: 60px;

background-image: url(http://localhost:8888/wp-content/uploads/2011/02/openquote1.gif);

background-position: top left;

background-repeat: no-repeat;

text-indent: 23px;

}

blockquote span {

display: block;

background-image: url(http://localhost:8888/wp-content/uploads/2011/02/closequote1.gif);

background-position: bottom right -100px;

background-repeat: no-repeat;

}
```
Using margin-right: xx px; is ok for right margin, but it don’t show “closequote1.gif”
Admin

Syahir Hakim
February 27, 2011 at 2:35 am #12949

Did you download the image file?

Kim
February 27, 2011 at 9:29 am #12950

The file and link to closequote1.gif is okay.

Right now I’m using a simpel link on this page:

http://www.nÃ¸rrebo.dk/?page_id=2367

It just seems to me that “right” is like the

blockquote area in sprite_master.png (570px)

and its better to control Blockquote “right”

side with style.css
jrothra
July 28, 2011 at 4:26 am #12951
I love the idea of the close quote, but I can’t get it to work. I haven’t changed any of
```
blockquote span {

display: block;

background-image: url(images/blockquote-closequote2.png);

background-position: bottom right;

background-repeat: no-repeat;

}
```
It’s based on the code give above combined with looking at the Classy Quote site mentioned. I’ve created two alternate close quote images. Both flip the original image, but one is the same exact size, one is only the close quote:

Did I mis-code something?