Float issue in IE

[jsadwith]

Hey - I'm not too CSS savvy, more of a PHP expert, so I'm experiencing this problem with a dynamic list of message board topics.

Inside of a table, I've got the following DIV to create each topic with rounded borders for the buttons.


<div id="topic">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
&nbsp;&nbsp;<a href="?action=message_board&topic_id={ID}" class="green11">{name}</a>&nbsp;&nbsp;
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

The CSS is...


div#topic{ margin: 2 2px; background: #D8EEE7; float: left; font-weight:bold;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #D8EEE7}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

Here's my problem...in Firefox/Safari/Camino, it does exactly what I want. Each button is dynamically sized perfectly, and they display (left floated) one after the other, but in IE, it displays them as a vertical (rather than horizontal) list. I'd imagine this has something to do with the FLOAT tag, but I have no idea how to solve the problem.

Here's the link...I'm referring to the list of topics under "BOARD TOPICS": http://www.2ndfloor.org/message_board_updates/index.php?action=message_board

Any help or suggestions would be greatly appreciated!

Thanks,
Jeremy

[jsadwith]

Ok, so I've tooled around and figured out that the problem doesn't stem from the float declaration. Instead, it occurs because of the two "display:block" declarations. I've tried other display options (none, inline, compact, etc), but each one causes the boxes to lose their rounded corners.

Any ideas?