IE7 - how do you make a message bubble work? - css

Question

I am trying to make a message bubble, and I've got it working on all browsers with exception to IE7. The bubble needs to wrap itself around variable width content, so it's width will depend on the amount of content. It may grow to 100%, but it may only be 100px wide if the message is short. This is where I'm running into problems with IE.
Here's a jsfiddle: http://jsfiddle.net/w9Vdh/
The main construct of the bubble is a top row, middle row and bottom row. I've got a sprite and a couple other background images that I use render the graphics. Here's the HTML:
<div class="thread-item-wrapper">
<div class="thread-item-horiz thread-item-top">
<div class="thread-item-corner thread-item-topleft"></div>
<div class="thread-item-corner thread-item-topright"></div>
</div>
<div class="thread-item-middle">
<div class="thread-item-content-wrapper">
<div class="thread-item-label">You:</div>
<div class="thread-item-content">
<div class="thread-item-msg">
<div class="thread-item-content-top"></div>
<p>Message</p>
</div>
</div>
</div>
</div>
<div class="thread-item-horiz thread-item-bottom">
<div class="thread-item-corner thread-item-bottomleft"></div>
<div class="thread-item-corner thread-item-bottomright"></div>
</div>
<div class="thread-item-date">Aug 18, 2011 12:01 PM</div>
</div>
Here's what it's supposed to look like:
And here's what it looks like in IE7:

Answer 1

see the fiddle for code and demo-
Fiddle: http://jsfiddle.net/w9Vdh/6
Demo: http://jsfiddle.net/w9Vdh/6/embedded/result/
screen shot of IE7:
Updated fiddle for sent bubble fix for IE7
Fiddle : http://jsfiddle.net/8NpwH/2/
Demo: http://jsfiddle.net/8NpwH/2/embedded/result/
Changes in code html:
<div class="thread-item-clear"> </div>
<div class="thread-item-date"><div style="text-align:right;">Mar 23, 2012 12:41 PM</div></div>
Css:
.thread-item-sent .thread-item-date {/*clear:left; float:right;*/ margin:0px 4px 0 15px; } /* <--- this line --- */

Answer 2

"Received messages" work... the bubble wraps to the message width nicely. However, sent messages are being displayed full-width, and not sizing correctly to the message width. This has something to do with the date. In my fiddle (jsfiddle.net/8NpwH) you'll see a comment in the CSS on the .thread-item-sent .thread-item-date style, which indicates the CSS that appears to be the problem. If you get rid of that CSS, the bubble sizes correctly, but the date is missing.