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

Question

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 making 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?

Answer 1

I'd advise you to add !important to your css properties values to force the use of your values. Maybe a wordpress css file somewhere is already styling this.

Use !important like this : background-image: url(images/openquote.jpg) !important;

Answer 2

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.

Answer 3

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.

Answer 4

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