I am trying to make a blockquote for my blog. You can see a screenshot of the blockquote I designed here. 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>

This still doesn't work and I've been at it all day. You can see the results of my poor attempt on my test blog here. 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>

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

I would make it with 3 divs, one that is for the top rounded part, which is a photoshop image. Another that is the middle part, which will just have a background and will also contain the text, and a 3rd one that will contain the rounded part for the bottom. Then use the margin element of css to position the divs to your liking.

Thanks, but isn't that what I've already done? I used three divs (in the second example) and gave them margins to postion them. Maybe I'm not understanding what you said.

Oops, I see I had the width wrong - it should be 346px. I changed it and now the background image is adjusted correctly, but I still have spaces above and below the middle section.

try to use a negative margin. In css you can do something like

#div-name-here {
margin-top: -20px;
}

this brings the top of the div up 20 pixels from where it is currently

Ok, I tried putting everything inside a table to see how this would look.....

<table cellpadding="0" cellspacing="0" border="0" width="346px" align="center"><tr><td><img src="/img/quotetop.png"></td></tr>
<tr><td style="padding-left: 20px; padding-right: 20px; color: #663300; 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.
<p class="cite">- Nate Piekos, <a href="http://blambot.com">Blambot Fonts</a></p></td></tr>
<tr><td><img src="/img/quotebtm.png"></td></tr>
</table>

Now it looks great and the only issue is a small blank space right below the top (quotetop) image. Otherwise everything looks great. The "align=center" only works in IE though, it doesn't align it centered in Firefox.

I fixed the alignment issue in Firefox with....

<div align="center">
<!-- table code goes here -->
</div>

Now to get rid of the blank space below the top image and I think I'm all set.

Sheesh...scratch that. I thought I had the centering problem fixed, but now I have a new issue. The text itself is fine in Firefox (left aligned), but in IE the text is now centered. I tried "text-align: center;" and that didn't help, either. Plus for some odd reason I have a ton of space above the whole table. Weird. Here's what it looks like on my test blog.

Update: I added a style of "margin: auto;" to the main table and that centered it (in both IE and FF) and it didn't effect the text. I hate having all these styles and tables, but whatever works, eh?