Fallos menú desplegable en IE

Mark_zgz · #1 (**permalink**) 16/03/2010, 02:40

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?

eduardo90 · #2 (**permalink**) 16/03/2010, 20:09

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.

Mark_zgz · #3 (**permalink**) 17/03/2010, 02:56

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

eduardo90 · #4 (**permalink**) 17/03/2010, 09:27

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

Saludos

Mark_zgz · #5 (**permalink**) 18/03/2010, 05:22

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

eduardo90 · #6 (**permalink**) 19/03/2010, 11:51

Como lo veo hay dos tipos de menu, uno que es vertical y otro horizontal, revisa si tu css esta correcto.

Mark_zgz · #7 (**permalink**) 24/03/2010, 03:21

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

}

Mark_zgz · #8 (**permalink**) 24/03/2010, 03:23

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