Help with Blockquote

I am trying to make a blockquote for my blog. I could show you a screenshot of what I designed for the blockquote but it won't allow me to use URLs. Anyway, I tried doing this with CSS, but couldn't get it to work. Next I tried making it out of divs. Finally I tried a combination of both.........

<style type="text/css">
<!--

#container {
background:#FFFFFFF;
width: 364px;
margin: auto;
}

#top {
width: 364px;
margin: auto;
}

#quoteleft {
float: left;
width: 7px;
background: url(/img/quoteleft.png);
}

#quoteright {
float: right;
width: 3px;
background: url(/img/quoteright.png);
}

#content {
text-align:center;
background:#FFFFFF;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
color: #4F3314;
font-size:11px;
margin: auto;
}

#bottom {
clear: both;
width: 364px;
margin: 0;
}

-->
</style>


<div id="container">
<div id="top"><img src="/img/quotetop.png"></div>
<div id="quoteleft"><img src="/img/quoteleft.png"></div>
<div id="quoteright"><img src="/img/quoteright.png"></div>
<div id="content">Sound effects lack punctuation with the one exception of when you intend to seem cartoony. A noise is not a word, and the emphasis and design aesthetic you impart when designing your sound effects should be enough to give it "punch". SFX punctuation may seem trite these days because designers in mainstream media often try to invoke a "comic book feel" with graphics campaigns using affected sound effects. The best example I can think of is recently Gap Kids created a campaign of in-store banners that featured comic book sound effects reminiscent of the 60's Batman TV show - these types of uses are designed to instantly read "comic book" to consumers who really have no idea how actual comic lettering looks.</div>
<div id="bottom"><img src="/img/quotebtm.png"></div>
</div>

Code (markup):

This still doesn't work and I've been at it all day. If anyone could give me a hand with this I would sure appreciate it.

Thanks.

 

Here's another version I tried....

<div style="width: 364px; margin: 0 20px 0 30px;"><img src="/img/quotetop.png"></div>
<div style="width: 364px; margin: 0 20px 0 30px; background: url(/img/quotemid.png) repeat;">Sound effects lack punctuation with the one exception of when you intend to seem cartoony. A noise is not a word, and the emphasis and design aesthetic you impart when designing your sound effects should be enough to give it "punch". SFX punctuation may seem trite these days because designers in mainstream media often try to invoke a "comic book feel" with graphics campaigns using affected sound effects. The best example I can think of is recently Gap Kids created a campaign of in-store banners that featured comic book sound effects reminiscent of the 60's Batman TV show - these types of uses are designed to instantly read "comic book" to consumers who really have no idea how actual comic lettering looks.</div>
<div style="width: 364px; margin: 0 20px 0 30px;"><img src="/img/quotebtm.png"></div>

Code (markup):

This one seemed to work better, but the problem is the text runs over the edges and the background image is repeating horizontally.