Posicionar as divs corretament IE7, IE8 e Firefox

Opa

estou com problemas no IE7 p/ variar no IE8 e Firefox esta funcionando corretamente.

estou fazendo um menu horizintal dinâmico consultando do banco.

<ul class="principal">
<?php
$set=mysql_query("select * from setor order by desc_setor");

while($dds=mysql_fetch_array($set)) {

?>
 <div class="aba_ini"></div>
<li><a href="index.php?pagina=venda&id_setor=<?php echo $dds['desc_setor'];?>"><?php echo $dds['desc_setor'];?></a>
 </li>
 <div class="aba_fim"></div>
 <?php
}
?>
</ul>

no CSS.

#menu ul { list-style: none;}
ul.principal { width: 800px; height: 39px; margin: 50 auto; cursor:pointer; z-index:1; }
ul.principal li
{

font-size:13px; float: left; margin: 0 0 0 0px; text-align: center; vertical-align:top;
 float:left; height: 31px; background: url(../images/aba_meio.png) repeat-x;
}

ul.principal li a
{

 color: #FFF; display: block; padding: 5px 0 0 0; font-family:Tahoma;
 margin-left:0px;	width: auto; height: 25px; font-weight: bold;
}

ul.principal li a:hover { text-decoration: none; }
ul.principal li:hover ul.nivel2, ul.principal li.over ul.nivel2 { display: block; }
ul.principal li ul.nivel2 li:hover ul.nivel3, ul.principal li ul.nivel2 li.over ul.nivel3
{ display: block;}
.aba_ini
{
background:url(../images/aba_ini.png) no-repeat; width:5px; height:39px; position:relative; float:left; margin-left:1px
}
.aba_fim
{
background:url(../images/aba_fim.png) no-repeat; width:5px; height:39px; float:left; position:relative
}

na verdade eu acho q é só a classe aba_fim que falta encaixar

IE7:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.reinodedavi.com/images/imagem.JPG&key=555572435b05c405c32f45174debd33dffd6697732410a919cb3f96a572dfde7" alt="imagem.JPG" />

IE 8 e Firefox: (CORRETO)

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.reinodedavi.com/images/imagem2.JPG&key=5a35bbca5c0b0d72413e2e12919ad21921df9c0c8b9d7a373d9501339884212c" alt="imagem2.JPG" />