Problema de visualização do menu no IE devido à caixa de busca

  • Autor Autor ElysisOne
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
E

ElysisOne

Gamma
Redactor
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
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:


Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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.
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
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.
 
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

Inserir CODE, HTML ou 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;
                        }
Inserir CODE, HTML ou 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?
 
Última edição:
dale un padding bottom a los <a> y con eso solucionaras el problema
 
Nada, no he sido capaz de arreglarlo con los padding bottom.
 
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.
 
lo mejor es usar etiquetas style, en blogger se hacen muy practicas.
 
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?
 
la forma mas valida es tener todos tus estilos de esta forma:

Inserir CODE, HTML ou 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.
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

E
problema com position:fixed
Respostas
3
Visitas
341
eic2010
E
J
Tutorial: Tutorial para criar um theme de WordPress do zero
2 3
Respostas
47
Visitas
6K
viana2211
viana2211
J
Menu suspenso em colunas horizontais
Respostas
7
Visitas
3K
estudiseno
estudiseno
joelandy14
Problema de estilo de categoria em template WordPress: Ajuda com CSS
Respostas
2
Visitas
996
wptutoriales
W
Juan Quiñónez
Problema com margens no Chrome [CSS]
Respostas
4
Visitas
3K
Juan Quiñónez
Juan Quiñónez
Voltar
Topo