Why can't I properly style a blockquote in Wordpress?

On the design I just created for my website, I have a blockquote styled with two quote images using the span technique in css:

blockquote {
background-image: url(images/openquote.jpg);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
padding-right: 30px;
font-style: italic;
}

blockquote span {
background-image: url(images/closequote.jpg);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
font-style: italic;
}

Then I format the HTML like this:

<blockquote><span>
"The worst part of writing fiction is the fear of wasting your life behind a keyboard. The idea that, dying, you'll realize that you only ever lived on paper. Your only adventures were make-believe, and while the world fought and kissed, you sat in some dark room, masturbating and m开发者_JS百科aking money."<br /><br /><b><div align="right">- Chuck Palahniuk</div></b>
</span></blockquote>

On the test HTML page I created, the quote works fine and shows up exactly how I wanted to. Now that I'm transferring all of my coding to Wordpress, however, the blockquote doesn't show up the same way.

HTML: lifesgarbage.com/rebnation.html (sorry, I can't post more than one link yet)

Wordpress: http://test.lifesgarbage.com

How can I change my CSS so it shows up on Wordpress similar to the way it does on the regular HTML?

I think the answer is that wordpress defines the default MARGIN for the blockquote tag to 0. You should just add an explicit margin value in your css.

also, wordpress is inserting a < p > tag after the < blockquote >. Maybe try using < p class="blockquote" > and style as .blockquote{margin:x; padding:x;}

The left margin doesn't seem to be part of the blockquote style, so the < p > might be resetting something.

The problem is that WP wraps the content inside an auto-generated <p> tag, hence you should modify your CSS to take that into account as well.

You can target the blockquotes explicitly using something like this:

.entry-content blockquote > p { }

That should work on regular Wordpress installations.

With Wordpress you can add a filter in the content to do exactly what you wish to get a great block quote

I have a blog post on this that can answer this question.

blockquote tutorial