Problema de visualización del menú en IE debido a caja de búsqueda

ElysisOne · 2010-08-12T11:25:10-0500

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
Enlace eliminado

Y así se visualiza en IE
Enlace eliminado

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

Insertar CODE, HTML o PHP:

/* 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:

Insertar CODE, HTML o PHP:

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

chicho · 2010-08-12T13:02:24-0500

El problema es que estás metiendo el código del buscador dentro de la lista (<ul>) y FireFox es demasiado generoso y lo interpreta, en cuanto a IE es más restrictivo y algo así no puede tener sentido para él con lo que interpreta que está fuera.

Yo de ti separaría las cosas. Algo así:

HTML:

<div id="barra"> <!-- Aquí div que contenga el menú y el buscador, debe tener los estilos que definen el color de fondo, altura, bordes redondeados, etc que ahora tienes en el  ul#menu -->
<div id="buscador">
<!-- Aquí el código del buscador. Flótalo a la izquierda -->
</div>
<ul> <!-- Ahora la lista la flotas a la derecha -->
<li>Nodo 1</li>
<li>Nodo 2</li>
<li>etc...</li>
</ul>
</div>

Después ves ajustando los detalles para que te quede como deseas. Y otro detalle a tener en cuenta, el efecto de -moz-border-radius que usas piensa que no funciona con IE.

Si tienes algún problema pregunta y si quieres te echo una mano.

ElysisOne · 2010-08-12T14:10:17-0500

Muchisimas gracias. Efectivamente eso me lo ha arreglado para IE, pero ahora tengo un problemita con Firefox y Google Chrome
Los elementos del menú se me ven ligeramente hacia abajo saliendose de la barra. Te muestro:
Enlace eliminado

Insertar CODE, HTML o PHP:

			/* 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;
			}
                        #buscador {
                                no-repeat scroll 0 0;                                
                                display:inline;
                                float:left;
                                height:23px;
                                margin-left:10px !important;
                                margin-top:1px;
                                padding:2px;
                        }

Insertar CODE, HTML o PHP:

<div id='menu'>
<div id='buscador'>
<form action='http://www.cuerpoarmonioso.com/p/resultados-de-la-busqueda.html' id='cse-search-box'>
  <div>
    <input name='cx' type='hidden' value='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'/>
    <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>
			<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>               
</ul></div>

Qué estoy haciendo mal?

Julcar · 2010-08-12T14:23:05-0500

dale un padding bottom a los <a> y con eso solucionaras el problema

ElysisOne · 2010-08-12T14:50:27-0500

Nada, no he sido capaz de arreglarlo con los padding bottom.

chicho · 2010-08-12T16:41:50-0500

Bueno, me lo he mirado un poco y la verdad que tienes un follón increible... 😛 Está heredando un padding por algún sitio que en este caso IE no lo coge, por lo que ahí se ve bien.

Si quitas los bordes de #menu:

border-top: 2px solid #333;
border-left: 2px solid #333;
border-bottom: 2px solid #000;
border-right: 2px solid #000;

Y le añades:

margin-top:-11px;

Lo solucionas, pero te cargas el IE de nuevo.

Veo que tienes mil condicionales según navegador que usas, así que podrías aprovechar alguno para dejar los 2 estilos (uno para IE y este fix para el resto...). Aunque realmente te aconsejaría ir rehaciendo todo y agrupando los estilos en una hoja a parte, que ahora tienes parte en ficheros externos, parte en el código, y parte directamente aplicado en las etiquetas.

Julcar · 2010-08-12T16:44:59-0500

lo mejor es usar etiquetas style, en blogger se hacen muy practicas.

ElysisOne · 2010-08-12T17:05:48-0500

Con el Marin-top -11 se arregla... aunque en IE se jode un poco 😛 Tienes razón. Lo de mil condicionales segun navegador... donde lo has visto? yo no le tengo ninguno. Igual no puedo tener los CSS en un documento aparte, ya que tengo el sitio alojado en los servidores de blogger.. y pues eso no se puede 😛

Entonces no hay forma alguna de arreglarlo?

Julcar · 2010-08-12T17:13:16-0500

la forma mas valida es tener todos tus estilos de esta forma:

Insertar CODE, HTML o PHP:

<style type="text/css">
/******** Aqui tus estilos ********/
</style>

asi te evitas tener archivos aparte y mezclarlos dentro del marcado html, un marcado html limpio y semántico permite controlar este tipo de errores con mas facilidad.

Problema de visualización del menú en IE debido a caja de búsqueda

ElysisOne

chicho

ElysisOne

Julcar

ElysisOne

chicho

Julcar

ElysisOne

Julcar

Temas similares