Problema con menú CSS en IE 8

[NightFM]

Saludos amigos, quisiera molestarlos con lo siguiente,

He creado un menú en css para mi sitio/blog web, y éste se me visualiza correctamente... pero en IE se descuadra.

Una imagen vale mas que mil palabras:

Menú CSS en Firefox


Y así se visualiza en IE


El código de mi menú CSS es el siguiente:

Código:

/* The CSS Code for the menu starts here */
			#menu {
				font-family: Arial, sans-serif;
				font-weight: bold;
				text-transform: uppercase;
				margin: 0px 0;
				padding: 0 0 0 10px;
				list-style-type: none;
				font-size: 11px;
				background: #333;
				height: 30px;
                                -moz-border-radius-bottomright: 10px;
                                -webkit-border-bottom-right-radius: 10px;
                                -moz-border-radius-bottomleft: 10px;
                                -webkit-border-bottom-left-radius: 10px;
				border-top: 2px solid #333;
				border-left: 2px solid #333;
				border-bottom: 2px solid #000;
				border-right: 2px solid #000;
			}
			#menu li {
				float: right;
				margin: 0;
                                border-right: 1px dotted #777; 
				
			}
			#menu li a {
				text-decoration: none;
				display: block;
				padding: 0 20px;
				line-height: 30px;
				color: #999;                                
			}
			#menu li a:hover {
				color: #FFF !important;
                                background: #333;
                                border-top: 1px solid #FFF;
                        }
                        #menu li.active a {
                                color: #FFF !important;
			}

Y está insertado de la siguiente manera:

Código:

<ul class='menu' id='menu'>
			<li><a href='#'>Mapa del Sitio</a></li>
                        <li><a href='#'>Contáctenos</a></li>
                        <li><a href='#'>Acerca de</a></li>                        
                        <li class='active'><a href='http://www.cuerpoarmonioso.com'>Inicio</a></li>               
<div style='no-repeat scroll 0 0;display:inline;float:left;height:23px;margin-left:10px!important;margin-top:1px;padding:2px;'>
<form action='http://www.cuerpoarmonioso.com/p/resultados-de-la-busqueda.html' id='cse-search-box'>
  <div>
    <input name='cx' type='hidden' value='partner-pub-xxxxxxxxxx:xxxxxxxxxxxx/>
    <input name='cof' type='hidden' value='FORID:11'/>
    <input name='ie' type='hidden' value='ISO-8859-1'/>
    <input name='q' size='35' type='text'/>
    <input name='sa' type='submit' value='Buscar'/>
  </div>
</form>
<script src='http://www.google.com.co/cse/brand?form=cse-search-box&amp;lang=es' type='text/javascript'/> </div>
</ul>

Como pueden ver, el error corresponde a la caja de busqueda de google que inserté y que lástimosamente se daña en IE. Agradecería me pudieran ayudar.

[codecweb98]

Chas: yo en IE 8 lo veo bien. Por el contrario en FireFox si se ve descuadrado: http://www.cuerpoarmonioso.com/ (o sea: alrevez)

¿que version de FireFox éstas usando?

Yo te recomendarioa lo siguiente, a ver si se corrige:

Código CSS:

#menu li {
        display: inline-block;
        margin: 0;
                                border-right: 1px dotted #777; 
        }
 

[NightFM]

Iniciado por codecweb98

Chas: yo en IE 8 lo veo bien. Por el contrario en FireFox si se ve descuadrado: [url]http://www.cuerpoarmonioso.com/[/url] (o sea: alrevez)

¿que version de FireFox éstas usando?

Yo te recomendarioa lo siguiente, a ver si se corrige:

Código CSS:

#menu li {
        display: inline-block;
        margin: 0;
                                border-right: 1px dotted #777; 
        }
 

Es que le hice una modificación y se ha arreglado en IE, pero ahora se me jodió en Firefox y Google chrome.. a como lo ves ahora.

[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>