Wrapping text with a left and right image

[biggieuk]

Hi all,

 

I have a little question about styling quotes on my website.

 

I want to display a left quote image, then the quote text in the middle and a right quote image on the end.

 

I currently have this like so:

 

#quotel{  background:url(../images/content/quote-left.gif) no-repeat; height:32px; width:42px; float:left; }
#quoter{  background:url(../images/content/quote-right.gif) no-repeat; height:32px; width:42px; float:right; }

 

The right qutoe image is displayed slightly offline though.

 

Is there a way i can make this into a single class so that i can insert into a <p> tag?

 

thanks very much!

[rhodesa]

the 'shortest' way i can see doing it is with two block level elements:

<style type="text/css">
  .quoteWrapper {
    background: url(../images/content/quote-left.gif) no-repeat top left;
    padding: 10px 0 0 10px;
  }
  .quote {
    background: url(../images/content/quote-right.gif) no-repeat bottom right;
    padding: 0 10px 10px 0;
  }
</style>
<div class="quoteWrapper">
  <p class="quote">

  </p>
</div>

[biggieuk]

Thats excellent, thanks very much for your help.