关于cool box 的css设计，多浏览器下统一的问题

[51shjg]

我的网站风格是仿的 本站首页 的，最近在自己首页放了一些小图片，有3px的表格，hover后要求变红色

html 代码

<!--第二栏-->
<div id="content2">
<div id="bbs">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/bbs_t.jpg" border="0" width="218"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm1.jpg" border="0"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm2.jpg" border="0"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm3.jpg" border="0"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm4.jpg" border="0"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm5.jpg" border="0"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm6.jpg" border="0"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm7.jpg" border="0"></a>
</div>
<div class="bbs_i">
<a class="col_box" href="http://www.51shjg.com/bbs/showthread.php?t=33"><img src="i/index_i/gm8.jpg" border="0"></a>
</div>
</div>

相应CSS设计

#content2{
clear:both;
width:776px;
border-top:5px solid gray;/*用IE的话，直接用margin-top:5px，也可以*/
margin-left:auto;
margin-right:auto;
}

#bbs{
float:left;
width:218px;
border:3px;
padding:0;
margin:0;
}

.col_box{
float:left;
border:3px solid white;
}

a.col_box:hover{border:3px solid red;}

.bbs_i{
float:left;
margin-left:5px;
width:58px;
}

但是，在IE下正常显示，而火狐下就不正常了，大家帮忙啊，我研究老鬼的代码半天没有发现自己问题，郁闷哦

效果页面：http://www.51shjg.com 就在首页中间段

[zouql]

看看IBM是怎么做的
用个JS判断下浏览器就是了