Foros del Web » Creando para Internet » CSS »

Problema con menú CSS en IE 8

Estas en el tema de Problema con menú CSS en IE 8 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/08/2010, 08:53
 
Fecha de Ingreso: julio-2010
Mensajes: 3
Antigüedad: 7 años, 4 meses
Puntos: 0
Problema con menú CSS en IE 8

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.

Última edición por NightFM; 12/08/2010 a las 09:05
  #2 (permalink)  
Antiguo 12/08/2010, 15:27
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: Problema con menú CSS en IE 8

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:
Ver original
  1. #menu li {
  2.         display: inline-block;
  3.         margin: 0;
  4.                                 border-right: 1px dotted #777;
  5.         }
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...
  #3 (permalink)  
Antiguo 12/08/2010, 15:29
 
Fecha de Ingreso: julio-2010
Mensajes: 3
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Problema con menú CSS en IE 8

Cita:
Iniciado por codecweb98 Ver Mensaje
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:
Ver original
  1. #menu li {
  2.         display: inline-block;
  3.         margin: 0;
  4.                                 border-right: 1px dotted #777;
  5.         }
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.
  #4 (permalink)  
Antiguo 12/08/2010, 15:45
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: Problema con menú CSS en IE 8

-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:
Ver original
  1. #mainMenu
  2.     {
  3.     position: absolute;
  4.    
  5.     width: 594px;
  6.     height: 50px;
  7.    
  8.     top: 150px;
  9.     left: 12px;
  10.  
  11.     background-image: url(../images/main-menu/main-menu-bg.png);
  12.     background-repeat: no-repeat;  
  13.     background-position: left 10px;
  14.     }
  15.  
  16. #mainMenu .relative
  17.     {
  18.     position: relative;
  19.     width: 594px;
  20.     height: 50px;
  21.     }
  22.  
  23. #mainMenu .relative div
  24.     {
  25.     position: absolute;
  26.     width: 158px;
  27.     height: 50px;  
  28.     top: 0px;
  29.     overflow: hidden;
  30.     }
  31.  
  32. #mainMenu a
  33.     {
  34.     display: block;
  35.  
  36.     width: 158px;
  37.     height: 50px;
  38.    
  39.     background-image: url(../images/modules/buscar/buscar-button.png);
  40.     background-repeat: no-repeat;
  41.     background-position: left 100px;
  42.  
  43.     font-weight: bold;
  44.     color: #822F3C;
  45.     text-decoration: none;
  46.     }
  47.  
  48. #mainMenu a span
  49.     {
  50.     display: block;
  51.     text-align: center;
  52.     padding-top: 22px;
  53.    
  54.     font-family: "Times New Roman", Times, serif;
  55.     line-height: normal;
  56.     font-size: 14px;
  57.     letter-spacing: +2px;
  58.     }
  59.  
  60. #mainMenu a:hover
  61.     {
  62.     background-position: left top;
  63.     color: #7B2431;
  64.     }
  65.  
  66. #mainMenu a:hover span
  67.     {
  68.     padding-top: 17px;
  69.     }
  70.  
  71. #mainMenu .inicioItem {left: -4px;}
  72. #mainMenu .blogItem {left: 144px;}
  73. #mainMenu .nosotrosItem {left: 292px;}
  74. #mainMenu .contactoItem {left: 440px;}



Código HTML:
Ver original
  1. <div id="mainMenu"><div class="relative">
  2.                     <div class="inicioItem"><a href="<?php echo $mosConfig_live_site;?>/" title="Abogados Laborales para Empresas y Patrones" rel="index"><span>Inicio</span></a></div>
  3.                     <div class="blogItem"><a href="blog/" title="Blog Legal Laboral"><span>Blog Legal</span></a></div>
  4.                     <div class="nosotrosItem"><a href="sobre-nosotros.html" title="Sobre Legal Laboral"><span>Nosotros</span></a></div>
  5.                     <div class="contactoItem"><a href="contacto.html" title="Contactenos" rel="help"><span>Cont&aacute;ctenos</span></a></div>
  6.                 </div></div>
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:18.