css block quotes

• 

  rubyshooz · Member · Jul 27, 2007 at 11:11 pm

  • Copy link
  • Add topic to favorites

  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?

• 

  cornell · Member · Jul 28, 2007 at 7:55 am

  • Copy link

  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.

  :)

• 

  atthe404 · Member · Jul 28, 2007 at 9:20 am

  • Copy link

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

• 

  sunburntkamel · Member · Aug 2, 2007 at 1:36 pm

  • Copy link

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

• 

  atthe404 · Member · Aug 2, 2007 at 1:49 pm

  • Copy link

  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?

• 

  sunburntkamel · Member · Aug 2, 2007 at 9:02 pm

  • Copy link

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

• 

  sunburntkamel · Member · Aug 2, 2007 at 9:16 pm

  • Copy link

  another method:

  Simple Double Quotes

• 

  rubyshooz · Member · Aug 2, 2007 at 10:49 pm

  • Copy link

  @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!~