Lista + Div => IE não coerente

Caros colegas,

no site institucional (www.codificando.com.br) de minha empresa, acrescentei uma div após uma lista segue o trecho do código:

<div id="navegacao"> <li><a class="selecionado" href="#">A Empresa</a></li> <li><a href="servico.html">Serviço</a></li> <li><a href="http://www.codificando.com.br/blog" target="_blank">Blog pessoal</a></li> <li><a href="contato.html">Contato</a></li> <div class="webmail" align="right"><a href="webmail.html"><img src="imagens/webmail.jpg" border="0" /></a></div> </div>

css:

#navegacao { width:inherit; height:25px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#A3C159; line-height:25px;}#navegacao li { border-color:white; float:left; margin:0; padding:0; list-style-type:none; border-right:1px solid; white-space:nowrap;}#navegacao li a { display:block; padding:0 18px; font-size:10px; letter-spacing:1px;}* html #navigation a { width:1%;}#navegacao a { text-decoration:none; color:white;}#navegacao .selecionado,#navegacao a:hover { background-color:#1BA6B2}.webmail { padding-right:15px;}

no FF o site está normal, mas no IE 6 e 7 o mesmo não está sendo visualizado de forma correta, onde nestes browser's está ocorrendo uma quebra indevida.

qual seria a solução/correção/código p/ tal impasse ?