Foros del Web » Creando para Internet » HTML »

Fallos menú desplegable en IE

Estas en el tema de Fallos menú desplegable en IE en el foro de HTML en Foros del Web. Hola a todos, Tengo un menú desplegable en una cabecera para acceder a los distintos sitios de mi página, en Firefox funciona perfectamente todo pero ...
  #1 (permalink)  
Antiguo 16/03/2010, 03:40
 
Fecha de Ingreso: marzo-2010
Mensajes: 5
Antigüedad: 7 años, 9 meses
Puntos: 0
Fallos menú desplegable en IE

Hola a todos,

Tengo un menú desplegable en una cabecera para acceder a los distintos sitios de mi página, en Firefox funciona perfectamente todo pero en IE (con la versión más nueva instalada) se me descuadran los elementos del desplegable y los colores de los botones...

Lo más curioso es que hace unos días para hacer más completa la página decidí añadir otra opción en el menú y hacer un foro con PHPBB, cambiando la cabecera que viene por defecto y poniendo la misma que la de mi página y resulta que desde ahí el menú en IE funciona perfectamene!!


Lo que se me ocurre que funcione será por algún tema de los Javascript, pero no se seguro... ¿Alguna idea de por qué ahí funciona?
  #2 (permalink)  
Antiguo 16/03/2010, 21:09
(Desactivado)
 
Fecha de Ingreso: julio-2006
Mensajes: 273
Antigüedad: 11 años, 4 meses
Puntos: 5
Respuesta: Fallos menú desplegable en IE

Buenas noches.

Esa es la famosa vista de compatibilidad de IE8, debes colocar el siguiente código arriba del <title>Mi pagina</title>


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

eso deberia funcionar.

Saludos.
  #3 (permalink)  
Antiguo 17/03/2010, 03:56
 
Fecha de Ingreso: marzo-2010
Mensajes: 5
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Fallos menú desplegable en IE

Hola Eduardo, muchas gracias por contestar. He probado a añadir lo que me has dicho y sigue igual; también he probado con el botón de vistas de compatibilidad que aparece en IE8 a la derecha de la URL pero no sirve tampoco.

Iba a adjuntar unas imagenes desde mi ordenador pero me parece que no se puede...

Cuando se ve bien, es un menú horizontal que se despliega en una línea debajo 3 opciones seguidas para seleccionar.

En IE, excepto en la pestaña foro que ya comenté que iba bien, el submenú me aparecen las opciones una debajo de otra, y se quedan ahí quietas...

Última edición por Mark_zgz; 17/03/2010 a las 04:06
  #4 (permalink)  
Antiguo 17/03/2010, 10:27
(Desactivado)
 
Fecha de Ingreso: julio-2006
Mensajes: 273
Antigüedad: 11 años, 4 meses
Puntos: 5
Respuesta: Fallos menú desplegable en IE

mmmm, bueno seria mejor que pudieras adjuntar una imagen aca para ver que pasa. asi seria mas facil identificar el problema.


Saludos
  #5 (permalink)  
Antiguo 18/03/2010, 06:22
 
Fecha de Ingreso: marzo-2010
Mensajes: 5
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Fallos menú desplegable en IE

Okk ya he descubierto como subir imágenes.
Ésta es la vista del menú en IE que se ve mal:
[URL=http://img441.imageshack.us/i/menuie8mal.png/][IMG]http://img441.imageshack.us/img441/9264/menuie8mal.png[/IMG][/URL]

Link: [URL="http://img441.imageshack.us/img441/9264/menuie8mal.png"]http://img441.imageshack.us/img441/9264/menuie8mal.png[/URL]
En la imagen si situaramos el ratón sobre documentación se pondría el desplegable encima del otro, ambos montados que no desaparecen.



Y así es como debiera verse, que además se corrige el menú en IE cuando lo uso desde la pestaña del foro que ya comenté que lo hice con PHPBB:
[URL=http://img297.imageshack.us/i/menuie8bien.png/][IMG]http://img297.imageshack.us/img297/3115/menuie8bien.png[/IMG][/URL]

Link: [URL="http://img297.imageshack.us/img297/3115/menuie8bien.png"]http://img297.imageshack.us/img297/3115/menuie8bien.png[/URL]
Éste es el menú bueno, así es como quiero que se vea tanto en FF como en IE
  #6 (permalink)  
Antiguo 19/03/2010, 12:51
(Desactivado)
 
Fecha de Ingreso: julio-2006
Mensajes: 273
Antigüedad: 11 años, 4 meses
Puntos: 5
Respuesta: Fallos menú desplegable en IE

Como lo veo hay dos tipos de menu, uno que es vertical y otro horizontal, revisa si tu css esta correcto.
  #7 (permalink)  
Antiguo 24/03/2010, 04:21
 
Fecha de Ingreso: marzo-2010
Mensajes: 5
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Fallos menú desplegable en IE

He estado echandole un vistado a los CSS pero no averiguo que pasa; el caso es que bajé de Internet el menú, si eso copio el código de mi menú y los CSS a ver por qué puede ser...los CSS los he ido comentando pero puede que haya algun error.

El HTML:
Código:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv="content-style-type" content="text/css" />

<meta http-equiv="content-language" content="en-us" />



<link rel="stylesheet" type="text/css" href="superfish2.css" />

<link rel="stylesheet" type="text/css" href="superfish-navbar2.css" />



<script src="ZDoble.js"></script>

</head>



<body>

  <!-- ****************************************************MENU DOBLE******************************************************-->

  <ul id="nav" class="sf-menu sf-navbar">

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Videos<span class="sf-sub-indicator"> »</span></a>

                        <ul class="sf-color">

                            <li><a href="#">Retransmisiones</a></li>

                            <li><a href="#">Cat&aacute;logo</a></li>

                            <li><a href="#">B&uacute;squeda</a></li>

                            <li class="sf-menuVacio"><a href="#">  </a></li>

                        </ul>

                    </li>

                    <li><a href="#">Documentaci&oacute;n<span class="sf-sub-indicator"> »</span></a>

                        <ul class="sf-color">

                            <li><a href="#">Transcripciones</a></li>

                            <li class="sf-menuVacioTranscripciones"><a href="#">  </a></li>

                        </ul>

                    </li>

                   

                    <li><a href="#">Foro</a></li>                     

                </ul>

</body>

</html>
superfish2.css:
Código:
.sf-menu, .sf-menu * {        /*MENU GENERAL, EL ASTERISCO ES PARA LIMPIAR EL MENU*/

    margin:            0;        /*MARGEN ENTRE LOS ELEMENTOS DEL MENU*/

    padding:        0;        /*ESPACIO DE RELLENO EN LOS ELEMENTOS DEL MENU*/

    list-style:        none;    /*LIMPIA EL MENU*/

    line-height:    1.0;    /*ALTURA DE LOS ELEMENTOS DEL MENU*/   

}



.sf-menu ul {

    position:        absolute;    /*HACE QUE LOS ELEMENTOS TOMEN LAS MISMAS MEDIDAS Y SE AJUSTEN AL ESPACIO*/

    top:            -999em;        /*ESCONDE LAS OPCIONES DEL SUBMENU FUERA DE LA PAGINA*/

}



.sf-menu li {                        /*DETALLES MENU HORIZONTAL 1*/

    float:            left;        /*PARA PONER TODOS LOS ELEMENTOS EN HORIZONTAL*/

    position:        absolute;    /*LOS ELEMENTOS OCUPAN TODO EL ESPACIO DISPONIBLE*/   

    margin-right:            1;

    margin-left:            1;

}





.sf-menu a {                        /*DISEÑO DEL TEXTO DE LOS ELEMENTOS DEL MENU HORIZONTAL 1*/

    display:        block;        /*HACE VISIBLE LOS ELEMENTOS DEL MENU*/

    position:        relative;    /*LOS ELEMENTOS SE REPARTEN OCUPANDO TODO EL ESPACIO DEL MENU*/

   

}



.sf-menu li:hover ul,li.over ul ,.sf-menu li.sfHover ul {            /*MUESTRA EL MENU HORIZONTAL 2 AL PASAR EL RATON*/

    left:            0;                            /*POSICION A LA IZQUIERDA DEL MENU HORIZONTAL 2*/

    top:            2.5em;                         /*POSICION VERTICAL DEL MENU HORIZONTAL 2*/

    z-index:        99;                            /*CAPA EN LA QUE SE SITUA ESTE MENU HORIZONTAL 2*/

   

   

}



.sf-menu {                                /*EXTENSION DEL MENU GENERAL*/

    float:            left;                /*COLOCAMOS LOS ELEMENTOS EN LA POSICION HORIZONTAL*/

    margin-bottom:    1em;                /*COLOCAMOS LOS ELEMENTOS CENTRADOS EN EL MENU*/

}





.sf-menu a {                                /*DISEÑO DEL TEXTO DENTRO DE LOS ELEMENTOS*/

    border-left:    1px solid #fff;        /*BORDE IZQUIERDO DEL ELEMENTO*/

    border-top:        1px solid #CFDEFF;    /*BORDE SUPERIOR DEL ELEMENTO*/

    padding:         .75em 1em;            /*RELLENO DEL ELEMENTO*/

    text-decoration:none;                /*QUITAMOS LOS SUBRAYADOS DE LOS TEXTOS*/   

    }

   

   

.sf-menuVacio a {                        /*Para que el último boton ocupe el resto de la barra horizontal y no desaparezca*/

    padding:         .0 32.4em;            /*RELLENO DEL ELEMENTO*/   

    background:        #e0e7f5;

}   



.sf-menuVacioTranscripciones a {                        /*Para que el último boton ocupe el resto de la barra horizontal y no desaparezca*/

    padding:         .0 36em;            /*RELLENO DEL ELEMENTO*/   

    background:        #e0e7f5;

}







.sf-sub-indicator {                                                        /*DISEÑO DE LA FLECHA EN EL ELEMENTO*/

    position:        absolute;                                            /*LOS ELEMENTOS OCUPAN TODO EL ESPACIO EN EL MENU*/

    display:        block;                                                /*MUESTRA LOS ELEMENTOS*/

    right:            .75em;                                                /*POSICIONAMOS EL ELEMENTO A LA DERECHA*/

    top:            1.05em;                                             /*POSICIONAMOS EL ELEMENTO ARRIBA*/

    width:            9px;                        /*ANCHURA DEL ELEMENTO*/                        

    height:            10px;                    /*ALTURA DEL ELEMENTO*/                        

    text-indent:     -999em;                                                /*QUITAMOS LAS MARCAS QUE SALEN POR DEFECTO*/

    background:        url('arrows-ffffff.png') no-repeat -10px -100px;    /*IMPORTAMOS LA IMAGEN*/

   

   

    *top: 0.75em;                                                        /*Subir un poco las flechicas*/

   

   

}

a > .sf-sub-indicator {                                                  /*PERFECCIONAMOS EL POSICIONAMIENTO DE LAS FLECHAS*/

    top:            .8em;                                                /*POSICION DE ALTURA*/

    background-position: 0 -100px;                                         /*POSICION DEL FONDO */                                                        

}
  #8 (permalink)  
Antiguo 24/03/2010, 04:23
 
Fecha de Ingreso: marzo-2010
Mensajes: 5
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Fallos menú desplegable en IE

Añado el resto.
superfish-navbar2.css:
Código:
 /* Corrige el fallo en IE de que cada espacio de nuestro .css se refleje en la página */

* html ul li { float: left; }

* html ul li a { height: 1%; }

/* End */









.sf-navbar {                                /*BARRA HORIZONTAL 2*/

    background:#e0e7f5;                    /*COLOR DE FONDO DEL MENU*/

    height:    2em;                        /*ALTURA DEL MENU*/

    padding-bottom:    2.5em;                /*ANCHURA DE LOS ELEMENTOS DEL MENU*/

    position:relative;                    /*POSICION DE LOS ELEMENTOS DEL MENU HORIZONTAL 1*/

    width:950px;                         /*TAMAÑO DEL MENU COMPLETO*/

    top:20px;                             /*POSICION DEL MENU EN LA PAGINA*/

    

    *width:    949;                        /*Corección del tamaño del menú,*/

    *top:    80px;                        /* posición superior*/

                            /* e izquierda para IE*/

    *margin-bottom:    20px;                /*Margen inferior para que el menú no se coma el reproductor de vídeo*/

    

    

}



.sf-navbar li {                            /*CADA UNO DE LOS ELEMENTOS DEL MENU HORIZONTAL 1*/

    background:    #004E9B;                /*COLOR DE FONDO DE LOS ELEMENTOS DEL MENU HORIZONTAL 1*/    

    position: static;                    /*POSICION DE LOS ELEMENTOS DEL MENU HORIZONTAL 2*/

    width:235.5px;                        /*ANCHURA DE LOS ELEMENTOS DEL MENU HORIZONTAL 1*/

}







.sf-navbar li a {                                        /*TEXTOS DENTRO DE LOS ELEMENTOS DEL MENU HORIZONTAL 1*/

    font-size: 12px;                                /*TAMAÑO DE LA LETRA DE LOS ELEMENTOS*/

    font-family: Arial, Helvetica, sans-serif;        /*TIPO DE LETRA QUE APARECE EN LOS ELEMENTOS*/

    font-weight:bold;                                /*ESTILO DE LAS LETRAS DE LOS ELEMENTOS*/

    text-decoration:none;                            /*QUITAMOS EL SUBRAYADO A LOS TEXTOS*/

    color: #fff;    

}



.sf-color li a{                           /*COLOR LETRAS SUBMENU*/

    color: #000;



}



.sf-navbar li li {                            /*CADA UNO DE LOS ELEMENTOS DEL MENU HORIZONTAL 2*/

    background:        #e0e7f5;            /*COLOR DE FONDO*/

    position:        relative;            /*POSICION DE LOS ELEMENTOS*/

    

}



.sf-navbar ul li {                            /*LISTA DE LOS ELEMENTOS DEL MENU HORIZONTAL 2*/

    width:            auto;                /*ANCHURA DE LOS ELEMENTOS*/

    float:            left;                /*HACEMOS QUE LOS ELEMENTOS ESTEN EN HORIZONTAL*/

    

    

}



.sf-navbar a, .sf-navbar a:visited {        /*TEXTO DE LOS ELEMENTOS DEL MENU CUANDO NO ESTAMOS ENCIMA*/

    border:            none;

    *text-decoration:none;                /*Una vez pinchado sobre el menú,*/

    *color:            #000;                /* recupere su aspecto normal*/

    

}





/*TEXTO DE LOS ELEMENTOS CUANDO NOS POSICIONAMOS ENCIMA EN EL MENU HORIZONTAL 1*/

.sf-navbar li:hover,.sf-navbar a:hover,.sf-navbar a:active {                    

    background:        #b9cdd8;            /*COLOR DE FONDO DE LOS ELEMENTOS CUANDO NOS POSICIONAMOS ENCIMA*/

    color:            #000;

    *text-decoration:    none;

    

    

}



/*TEXTO DE LOS ELEMENTOS CUANDO NOS POSICIONAMOS ENCIMA EN EL MENU HORIZONTAL 2*/

.sf-navbar ul li:hover,ul.sf-navbar ul li:hover li,.sf-navbar ul a:hover,.sf-navbar ul a:active{

    background:        #D1DFFF;            /*COLOR DE FONDO DE LOS ELEMENTOS CUANDO NOS POSICIONAMOS ENCIMA*/

    color:            #000;                /* COLOR LETRAS SUBMENU "HOVER" */

}
Y por último el .js:
ZDoble.js:
Código:
startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

  }

  node.onmouseout=function() {

  this.className=this.className.replace;

    (" over", "");

   }

   }

  }

 }

}

window.onload=startList;
Gracias por la ayuda

Etiquetas: desplegable, fallos
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 03:07.