problema menu vertical en IE pero no en FF

Jamati · #1 (**permalink**) 24/03/2008, 02:35

Hola a todos, tengo la siguiente duda, mejor dicho problema, hace días y no lo puedo resolver. Antes de escribir aquí quise resolverlo y no tuve exito. El siguiente codigo adjunto, fijense ustedes de probarlo en FF y en IE.

En Firefox no hay ningun drama, veran algo normal, pero en el maldito IE pueden ver como cada fila del menu se agranda un poco... y la verdad no se como solucionarlo.

Código HTML:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.menu {width:200px;background:#CC0000;margin:0;padding:0;}
ul.menu li {height:50px;border-bottom:1px solid #5586AA;position:relative;list-style:none;}
ul.menu li a {[COLOR="Red"]display:block[/COLOR];height:100%;font:10px Arial,Helvetica,sans-serif;color:#FFF;}
ul.menu li ul {display:none;position:absolute;width:120px;left:250px;top:5px;background:#000000;}
</style>
<script language="JavaScript">
function menu(llamador)
{
	var valor = llamador.parentNode.getElementsByTagName('ul')[0];
	valor.style.display = valor.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<ul class="menu">
  <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 1</a>
    <ul>
        <li><a href="#">Fila 1</a></li>
        <li><a href="#">Fila 2</a></li>
    </ul>
  </li>
  <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 2</a>
    <ul>
        <li><a href="#">Fila 1</a></li>
        <li><a href="#">Fila 2</a></li>
    </ul>
  </li>
  <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 3</a>
    <ul>
      <li><a href="#">Fila 1</a></li>
      <li><a href="#">Fila 2</a></li>
      <li><a href="#">Fila 3</a></li>
      <li><a href="#">Fila 4</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Si saco el "display:block" que marque con rojo y en su lugar pongo un width, se soluciona en explorer pero no funciona en FF, ya que quiero que el link ocupe todo el ancho de la lista.

Mil gracias desde ya a alguien que pueda resolver este misterio-

Raulmmmm · #2 (**permalink**) 24/03/2008, 04:40

Pues puedes poner comentarios condicionales para IE, que sirven para que IE detecte una cosa y el resto otra:

Código HTML:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.menu {width:200px;background:#CC0000;margin:0;padding:0;}
ul.menu li {height:50px;border-bottom:1px solid #5586AA;position:relative;list-style:none;}
ul.menu li a {display:block;height:100%;font:10px Arial,Helvetica,sans-serif;color:#FFF;}
ul.menu li ul {display:none;position:absolute;width:120px;left:250px;top:5px;background:#000000;}
</style>
<!--[if IE]>
<style type="text/css">
ul .menu li a{ width: 300px; }
</style>
<![endif]-->
<script language="JavaScript">
function menu(llamador)
{
	var valor = llamador.parentNode.getElementsByTagName('ul')[0];
	valor.style.display = valor.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<ul class="menu">
  <li class="litoral"><a href="#" class="litoral" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 1</a>
    <ul>
        <li><a href="#">Fila 1</a></li>
        <li><a href="#">Fila 2</a></li>
    </ul>
  </li>
  <li class="cuyo"><a href="#" class="cuyo" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 2</a>
    <ul>
        <li><a href="#">Fila 1</a></li>
        <li><a href="#">Fila 2</a></li>
    </ul>
  </li>
  <li class="costa"><a href="#" class="costa" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 3</a>
    <ul>
      <li><a href="#">Fila 1</a></li>
      <li><a href="#">Fila 2</a></li>
      <li><a href="#">Fila 3</a></li>
      <li><a href="#">Fila 4</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

De todas maneras, antes prueba otra cosa: cambia ul.menu para que quede .menu. Quizá así se arregle.

Jamati · #3 (**permalink**) 24/03/2008, 14:23

Muchas gracias por la respuesta.

Primero probé de que quede solamente .menu como dijiste , pero no funcionó, en Explorer seguía mostrando el problema.

Y en segundo lugar, la opcion que me dijiste de poner los comentarios para el Explorer, con un width de 300 px tampoco funcionó, jaajaj además no entendí porque quizás al poner eso se podía solucionar.

Igualmente muchísimas gracias... pero me estoy volviendo loco y no sé que hacer !!!!

Te copio de nuevo el código ya que le saqué algunas cosas que estaban de mas.

Código:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.menu {width:200px;background:#CC0000;margin:0;padding:0;}
ul.menu li {height:50px;border-bottom:1px solid #5586AA;position:relative;list-style:none;}
ul.menu li a {display:block;height:100%;font:10px Arial,Helvetica,sans-serif;color:#FFF;}
ul.menu li ul {display:none;position:absolute;width:120px;left:250px;top:5px;background:#000000;}
</style>
<script language="JavaScript">
function menu(llamador)
{
	var valor = llamador.parentNode.getElementsByTagName('ul')[0];
	valor.style.display = valor.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<ul class="menu">
  <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 1</a>
    <ul>
        <li><a href="#">Fila 1</a></li>
        <li><a href="#">Fila 2</a></li>
    </ul>
  </li>
  <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 2</a>
    <ul>
        <li><a href="#">Fila 1</a></li>
        <li><a href="#">Fila 2</a></li>
    </ul>
  </li>
  <li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 3</a>
    <ul>
      <li><a href="#">Fila 1</a></li>
      <li><a href="#">Fila 2</a></li>
      <li><a href="#">Fila 3</a></li>
      <li><a href="#">Fila 4</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Porque explorer lo muestra así ??

Raulmmmm · #4 (**permalink**) 25/03/2008, 02:45

Se me había olvidado una cosa con los comentarios: había que poner también el display: inline. Porque si dices que quitando el display: block y poniendo un width se soluciona, lo pondremos. Prueba a poner esto debajo de tu </style>:

Código HTML:

<!--[if IE]>
<style type="text/css">
ul .menu li a{ width: 300px; display: inline; }
</style>
<![endif]-->

Jamati · #5 (**permalink**) 25/03/2008, 05:43

Gracias nuevamente, pero no se soluciona... sigue igual que antes.

Igualmente, porque se debería solucionar poniendo un ancho de 300 px??, te pregunto porque esa parte no la entendí.

Por favor si se te ocurre otra idea a vos o a quien sea será bienvenida, ya que realmente estoy desesperado y no se como hacer. Yo aca metí un ejemplo, pero en realidad lo tengo que hacer en una pagina profesional y estoy tratando de alargar el tiempo antes de que me mates.... ayuda por favor !!!

Raulmmmm · #6 (**permalink**) 25/03/2008, 12:00

Cita:

Si saco el "display:block" que marque con rojo y en su lugar pongo un width, se soluciona en explorer pero no funciona en FF, ya que quiero que el link ocupe todo el ancho de la lista.

Cita:

Igualmente, porque se debería solucionar poniendo un ancho de 300 px??, te pregunto porque esa parte no la entendí.

Pon el ancho de tu lista en vez de el de 300px, eso sólo era un ejemplo, perdón por no haberlo aclarado. Sería de 200px ¿no?.

Si no va, ya no sé, lo estoy probando en IE7 y funciona, si sale una barra amarilla arriba le das a Permitir contenido bloqueado y ya...

Mikmoro · #7 (**permalink**) 25/03/2008, 12:54

Coloca esto al principio de tu css:

* { margin: 0px;
padding: 0px;}

Así de momento lo verás igual en FF y en IE6. Luego ya haces lo que quieras con ello.

Mikel.