An IE7 issue of CSS

[Yueee]

I came across a problem when testing codes on IE 7 ... the first image and last image are shifted to the right while others in between are centered fine...But it isn't an issue in IE8, FireFox & Safari. Can anybody tell me why it ain't work on IE7? And how to resolve it?

Here is some codes in HTML and CSS



<div id="Cbox">
<img class="border" src="images/top-ul.jpg" alt="" />
<ul>
<li id = "trash">
<img src="images/ico-trash.jpg" alt="" /><br />
<span>Remove</span></li>
</ul>
<img class="border" src="images/bottom-ul.jpg" alt="" />

<img class="border" src="images/top-ul.jpg" alt="" />
<ul>
<li id="saveSearch">
<a href="javascript:void(0);"><br />
<img src="images/ico-save.jpg" alt="" />
<span>Save search</span></a></li>
<li id="viewSearch">
... </li>
....
</ul>
<img class="border" src="images/bottom-ul.jpg" alt="" />
</div>


CSS:


#main #box #Cbox {float:left; width:110px; margin:-5px 0 0 0; }
#main #box #Cbox a#trash {display:block; margin:0 5px 0 0;padding:0 2px;text-align:right;}
#main #box #Cbox img {border:none;}
#main #box #Cbox img.border {float:right; display:inline; margin:0 5px 0 0;}
#main #box #Cbox ul {list-style:none; width:75px; text-align:center; float:right; padding:0 2px; border:#858485 2px solid; border-width:0 2px; display:inline; margin:0 5px 0 0;}
#main #box #Cbox ul li#trash{border-bottom:none; padding:0 1px; margin:0 0 2px 0;}
#main #box #Cbox ul li {border-bottom:#858485 2px solid; padding:0 1px; margin:0 0 5px 0;}
#main #box #Cbox ul li a {text-decoration:none; font-size:12px; color:#000; font-weight:bold;}
#main #box #Cbox ul li a:hover {color:#e00000;}
#main #box #Cbox ul li a span {display:block;}


If you guys have IE7, here is the problem of what I am talking about:http://www.boolify.org/test/ ( pls pay attention to the right side tools)

I'd DEFINITELY appreciate your help!!!