I have the following code to display shouts:

Code HTML4Strict:
<div class="topshout"></div><div class="shout">User comment<br /><span class="gepost">Date of comment</span></div><div class="posted"><b><a href="" target="_blank">User</a></b></div>

With this as the css code:

Code CSS:
.topshout { background:  url('images/topshout.gif') center top no-repeat; height: 10px; }
.shout { background: #6b6966 url('images/bottomshout.gif') center bottom no-repeat; padding: 0px 10px 10px 10px; text-align: center; color: #24211d;}
.posted { padding: 2px 0px 10px 50px; background: url('images/b.gif') 30px top no-repeat; }
.gepost { font-size: 0.9em; font-style: italic; color:#999999; }

The result of this looks fine in IE7, firefox, opera and safari.
However, when using IE6 there is a gap between the topshout image and the shout.

An example can be seen here:


Is there something wrong with my css or is there a way to make IE6 display it right?