css block quotes

  • Author
  • #128402


    Hi. What I’m trying to do is to have blockquote images before and after the quote and the code I want to use is this:

    blockquote p {
    background:url(‘http://rubyshooz.files.wordpress.com/2007/07/unquote.gif’) bottom right no-repeat;
    padding:0 15px 0 0;

    blockquote {
    background:url(‘http://rubyshooz.files.wordpress.com/2007/07/quote1.gif’) top left no-repeat;

    I’ve tried different variations, but it seems like wordpress changes it and all I get is the quote image before the quote. What am I missing? Any thoughts?



    What is happening is that both elements are effectively doing the same thing. By design they both control the “P” for the blockquote whether it’s defined in the class or not.

    This means that the second one is overriding the first and only getting you the open quote.

    I haven’t been awake long enough this morning to get my head round the right CSS to complete this. I will have a think and if nobody gets back to you before I will try and post something up later for you.




    For that type of fancy effect I normally need to wrap the blockquote in a div.


    @atthe404 – wordpress automagically inserts ‘p’ elements inside blockquotes. why? because the w3c validator requires a block level element inside a blockquote (despite the spec not being published anywhere).

    if your CSS isn’t saving properly, you should send in feedback, since that’s a problem with the editor. if you can get it to save, the code you’ve posted should work.



    Well I know that sbk. But it is easier to fix up blockquotes in a wrapper div. That way they are matching. If only we could put the darn div things in. :) But in answerr to the q it shouldn’t need floats surely?


    no, you’re right, the float on the ‘p’ is irrelevant.




    I guess I need to play with it some more. I didn’t think it would be complicated.

    Thanks and if you think of anything else, I’m willing to try. I did look at that other method and some of the other links there, but I don’t have time now to experiment with it.

    Much appreciated!~

The topic ‘css block quotes’ is closed to new replies.