Menus raros en IE y regular en FF.

hgb · #1 (**permalink**) 08/05/2006, 12:53

Hola, modifique un menu que me encontre para diferenciar entre los elementos que son sub-menu y los que son elementos simples...

Pueden ver la página aquí http://www.uniformesani.com como ven los menus se muestran MAL en el IE (denle click para ver su comportamiento interno), y también el elemento "inicio" no se ve, esta antes de "nosotros".

En el FF en Linux me muestra bien los menus, escepto el menu "U. para Hospital" que lo muestra exactamente como en el IE.

Yo creo que es algún tipo de problema con los CSS. Alguna solución para estos problemas¿?¿?¿?¿?

hgb · #2 (**permalink**) 09/05/2006, 01:37

Ya me estaba durmiendo y esta respuesta era para el tema Problema de posición de menus basado en ul y li. Y el primer menu en CSS display erro respuesta #5 ;).

#3 (**permalink**) 09/05/2006, 04:15

mmmmmmmm yo lo he mirado en firefox y el menu se ve bastante mal.

digamos que la idea del menu desplegable no es la necesidad de pinchar pra que se despliegue sino que al pasar el mouse se despliegue automaticamente.

He aqui la solución para crear un multimenu ya sea horizontal o vertical
http://www.csscreator.com/menu/multimenu.php

es una pagina buenisima.

hgb · #4 (**permalink**) 09/05/2006, 08:53

Si, respecto a eso ya lo habia modificado en mi compu... digamos que eso viene que antes tenia un menu muy largo y tenía sub-secciones, las que tengo ahora como elementos, entonces yo nada más había copiado y pegado, por eso quedarón los elementos externos como sub-menus... ya los elimine y pues ya no les tienes que dar click para ver que hay dentro del sub-menu ;).

Respecto a lo que se ve mal en el FF, a mi me parece que es sólo en el primer menu, que se despliega igual que en el IE, donde tiene muchos espacios vacios entre los elementos, bueno ya modifique el js y puse una -! muestra para que vean como se ve ahora... en el IE los elementos ya se muestran del color que debe de ser... mientras tanto se siguen mostrando los espacios en blanco entre los elementos... :S, por cierto, el ancho del div es excesivo... creo que se puede solucionar poniendole un ancho específico ;), pero esos espacios entre los elementos NO se como solucionarlo.

#5 (**permalink**) 09/05/2006, 09:15

como ya te dije lo mejor y mas rapido es ke sigas el link que te deje y que te hagas el menu a la medida... luego modificas los atributos y listo, ¿para que vas a comerte el coco si ya te lo dan hecho?

saludos

hgb · #6 (**permalink**) 09/05/2006, 10:06

Pues p0ara comprender el error ;)...

Es como si no sabes sumar mentalmente... "para eso esta la calculadora" ;)... aunque me gusto la forma como esta implementado el menu creo que nada más necesitaria agregarle un par de cosillas.

hgb · #7 (**permalink**) 09/05/2006, 13:26

Bueno, ya se que me diste un buen enlace (de hecho creo que al final usare ese), pero me encontre en el camino el siguiente texto... Apuntes de CSS: clases y pseudoclases y pues bueno, que me pongo a hacer un menu con puro CSS sin js, pero de nuevo el IE esta mal.. como veo el poner

Código:

selector selectorAdentro{
/* Estilo aplicable */
}

Esta desde el CSS1 y aparentemente el IE no lo puede "captar" bien :S... aqui lo que hice.... funciona BIEN en FF

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>prueba</title>
  <style title="xxxxxxxx" type="text/css">
/******** Formato de los menus, sub-menus y elementos ***************/
.menu0, .menu1, .menu2, .menu3{
list-style-type: none;
margin: opt;
padding: 0pt;
display: block;
color: rgb(50, 60, 128);
background-color: rgb(53, 53, 53);
}
.elemento0, .elemento1, .elemento2, .elemento3{
list-style-type: none;
margin: 0pt;
padding: 0pt;
display:block;
color: rgb(0, 0, 128);
background-color: rgb(153, 153, 153);
}
/******** Esconder los elementos y sub-menus ***************/
li.menu1, li.menu2, li.menu3{
display:none;
}
li.elemento0, li.elemento1, li.elemento2, li.elemento3{
display:none;
}
/******** Mostrar los elementos y sub-menus cuando se pase sobre el menu o submenu ***************/
li.menu0:hover li.elemento0, li.menu0:hover li.menu1{
display:block;
}
li.menu1:hover li.elemento1, li.menu1:hover li.menu2{
display:block;
}
li.menu2:hover li.elemento2, li.menu2:hover li.menu3{
display:block;
}
li.menu3:hover li.elemento3{
display:block;
}
  </style>
</head>
<body>
<ul>
  <li class="menu0"><a href="u_cocina.html#Pantalon">Pantal&oacute;n
+</a>
    <ul>
      <li class="elemento0"><a
 href="u_cocina.html#Chef_2">* Chef</a></li>
      <li class="menu1"><a href="u_cocina.html#Mandil">Mandil
+</a>
        <ul>
          <li class="elemento1"><a
 href="u_cocina.html#Carnicero">* Carnicero</a></li>
          <li class="elemento1"><a
 href="u_cocina.html#Taquero">* Taquero</a></li>
          <li class="elemento1"><a
 href="u_cocina.html#Casaca">* Casaca</a></li>
          <li class="elemento1"><a
 href="u_cocina.html#Chef_3">* Chef</a></li>
          <li class="elemento1"><a
 href="u_cocina.html#Cantinero">* Cantinero</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
EL TEXTO DESPUES
</body>
</html>

Alguna idea de como hacer que funcione en el IE ¿? o mejor ya me doy por vencido :P... ¿?¿?¿? y utilizo lo que alguién más ya ha hecho¿? (chale).

en específico porque IE no reconoce o "capta" correctamente como en el FF este código (creo que es el problema)

Código:

/******** Mostrar los elementos y sub-menus cuando se pase sobre el menu o submenu ***************/
li.menu0:hover li.elemento0, li.menu0:hover li.menu1{
display:block;
}
li.menu1:hover li.elemento1, li.menu1:hover li.menu2{
display:block;
}
li.menu2:hover li.elemento2, li.menu2:hover li.menu3{
display:block;
}
li.menu3:hover li.elemento3{
display:block;
}

hgb · #8 (**permalink**) 09/05/2006, 14:27

Me gustaría utilizar la versión con sólo CSS (el post anterior)... haber si alguién sabe como modificarla para usarla en IE.

Porcierto, con lo que estube entendiendo.. al menos logre que el error original en el IE se redujiera por lo menos a su similar en el FF... este tenía solo que ver con el ancho del div, y los elementos a en los cuales cambie width:100%; y descomentar (si es que lo estaba) el display:block (creo que eso fue todo :S), pero porfavor notar que en http://uniformesani.com/muestra.html el menu en "U. para Hospital" sigue mostrando esos espacios en transparente que en realidad es el fondo del DIV (veán su borde en naranja)...

¿Alguién sabe porque si es el mismo formato para los menus y el mismo CSS para ellos, ese no es mostrado como el resto¿?¿?¿?¿?¿?

hgb · #9 (**permalink**) 10/05/2006, 10:23

Bueno, pues con la noticia que agarre el menu del primer enlace proveido, pero quien lo pueda checar se dara cuenta que hay un error en el menu que es de 2 niveles... los marque con ">" para indicar que es un menu en vez de un elemento... bueno y también notarán nuevamente que si funciona bien en el FF el de prueba de estos menus que utilizo en el resto del sitio es http://uniformesani.com/template.html .

La verdad no se cual sea el problema :S... puesto que copie los 2 CSS y el js y no los modifique y ya cheque la lista anidada y pues esta en la sintáxis que pide el código... :) (ya luego modificaré mejor mi propia versión ;))... por cierto esa versión la pueden ver como va en este momento (muuuu mal para IE) http://uniformesani.com/prueba.html .