Problema con menú CSS en IE 8

[codecweb98]

-Jajajaja- a mi eso tambien me pasa muy seguido. Lo arreglo para IE y se friega en Firefox, o viseversa: es cuento de nunca acabar.

Pues prueba la propiedad "display: inline-block;" igual si jala.

O alomejor lo que te combine es implementar el menu en una simple tablita o con posiciones absolutas.

Por ejemplo yo tambien intenté implemtar muy parecido con ul/li pero la verdad, terminé haciendolo con divisiones con posiciones absolutas/relativas.

El código del menu superior de esta pagina http://www.abogadoslaborales.mx es el siguiente:

Código CSS:

#mainMenu
    {
    position: absolute;
    
    width: 594px;
    height: 50px;
    
    top: 150px;
    left: 12px;
 
    background-image: url(../images/main-menu/main-menu-bg.png);
    background-repeat: no-repeat;   
    background-position: left 10px;
    }
 
#mainMenu .relative
    {
    position: relative;
    width: 594px;
    height: 50px;
    }
 
#mainMenu .relative div
    {
    position: absolute;
    width: 158px;
    height: 50px;   
    top: 0px;
    overflow: hidden;
    }
 
#mainMenu a
    {
    display: block;
 
    width: 158px;
    height: 50px;
    
    background-image: url(../images/modules/buscar/buscar-button.png);
    background-repeat: no-repeat;
    background-position: left 100px;
 
    font-weight: bold;
    color: #822F3C;
    text-decoration: none;
    }
 
#mainMenu a span
    {
    display: block;
    text-align: center;
    padding-top: 22px;
    
    font-family: "Times New Roman", Times, serif;
    line-height: normal;
    font-size: 14px;
    letter-spacing: +2px;
    }
 
#mainMenu a:hover
    {
    background-position: left top;
    color: #7B2431;
    }
 
#mainMenu a:hover span
    {
    padding-top: 17px;
    }
 
#mainMenu .inicioItem {left: -4px;}
#mainMenu .blogItem {left: 144px;}
#mainMenu .nosotrosItem {left: 292px;}
#mainMenu .contactoItem {left: 440px;}
 

Código HTML:

<div id="mainMenu"><div class="relative">
                    <div class="inicioItem"><a href="<?php echo $mosConfig_live_site;?>/" title="Abogados Laborales para Empresas y Patrones" rel="index"><span>Inicio</span></a></div>
                    <div class="blogItem"><a href="blog/" title="Blog Legal Laboral"><span>Blog Legal</span></a></div>
                    <div class="nosotrosItem"><a href="sobre-nosotros.html" title="Sobre Legal Laboral"><span>Nosotros</span></a></div>
                    <div class="contactoItem"><a href="contacto.html" title="Contactenos" rel="help"><span>Cont&aacute;ctenos</span></a></div>
                </div></div>