Problema con imagenes en menu simple con ie8

[a_brillarmiamor]

Hola tengo el siguiente problema:
Un menú simple con imágenes que se ve perfecto en todos los navegadores, peeeeeeeeeeeeeeeero, como era de esperarse, en ie 8. las imagenes que serian los separadores de los links del menu bajan por una razon que la desconosco...

algo asi seria...[URL="http://www.flickr.com/photos/56055213@N04/5432594412/lightbox/"]acá una imagen del problema
[/URL]



El html es el siguiente...


<ul>
<li><a href="/">Home</a></li>
<div class="separa_menu"></div>
<li><a href="/empresas/">Empresas</a></li>
<div class="separa_menu"></div>
<li><a href="/directorio/">Directorio</a></li>
<div class="separa_menu"></div>
<li><a href="/terminos">Terminos y Condiciones</a></li>
<div class="separa_menu"></div>
<li><a href="/contacto">Contáctenos</a></li>
<div class="separa_menu"></div>
<li>
<a href="/login">Login</a> </li>
</ul>
<div class="separa_menu_bajo"></div>
</div>


Y el Css es este...

.header ul{
height: 16px;
margin-bottom: 0;
margin-top: 0;
padding: 5px;
width: 576px;}

.header .menu{
margin:auto;
width:576px;}

.header .menu li{
float:left;
list-style:none;
display:block;
margin-left:15px;
margin-right:15px;}

.menu .separa_menu{
float:left;
background: url(../images/sprite_cajas_fondos_repeat-y.png) 0 0 repeat-y;
width:2px;
height:16px;
overflow: hidden;}

.header .menu li a{
text-decoration:none;
font-size:12px;
font-weight:bold;
font-family:Arial;
color:#FFF;}

.separa_menu_bajo{
height:2px;
width:576px;
background:url(../images/sprite_cajas_fondos_repeat-x.png) 0 -470px repeat-x;
float:left;
margin-bottom: 8px;}


Espero que alguien me salve, gracias desde ya...

[sanxuan]

Prueba a validar tu código aquí: http://validator.w3.org/unicorn/
Un código HTML con errores no puede tener garantías de mostrarse correctamente.
Supongo que tus divs separadores podrían ser otro <li> o estar incluidos dentro de uno.
Mi experiencia con IE8 no es tan mala. En general obtengo los mismos resultados que con otros navegadores.

[kseso?]

<ul>
<li><a href="/">Home</a></li>
div class="separa_menu"></div>
<li><a href="/empresas/">Empresas</a></li>
<div class="separa_menu"></div>
<li><a href="/directorio/">Directorio</a></li>
<div class="separa_menu"></div>
<li><a href="/terminos">Terminos y Condiciones</a></li>
<div class="separa_menu"></div>
<li><a href="/contacto">Contáctenos</a></li>
<div class="separa_menu"></div>
<li><a href="/login">Login</a> </li>
</ul>
<div class="separa_menu_bajo"></div>
</div>

Los únicos hijos que admiten las listas /ul/ son los /li/
Esos div que tacho no pueden estar fuera de su correspondiente /li/
Amén de ser todo un atentado a la semántica del código el utilizar cajas (div) vacíos sólo a efectos estéticos.
Siempre puede colocar ese elemento separador dentro de cada /li/ vía background con su padding lateral correspondiente.