css block quotes

  • Author
    Posts
  • #128402

    rubyshooz
    Member

    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 {
    font-size:1em;
    color:#C0C0C0;
    float:left;
    background:url(‘http://rubyshooz.files.wordpress.com/2007/07/unquote.gif’) bottom right no-repeat;
    padding:0 15px 0 0;
    }

    blockquote {
    font-size:1em;
    color:#C0C0C0;
    float:right;
    background:url(‘http://rubyshooz.files.wordpress.com/2007/07/quote1.gif’) top left no-repeat;
    padding:20px;
    }

    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?

    #128658

    cornell
    Member

    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.

    :)

    #128665

    atthe404
    Member

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

    #129028

    @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).

    @rubyshooz
    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.

    #129029

    atthe404
    Member

    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?

    #129031

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

    #129032
    #129033

    rubyshooz
    Member

    @sunburntkamel

    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.