Foros del Web » Creando para Internet » CSS »

problema menu vertical en IE pero no en FF

Estas en el tema de problema menu vertical en IE pero no en FF en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/03/2008, 03:35
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
problema menu vertical en IE pero no en FF

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-

Última edición por Jamati; 26/03/2008 a las 22:17
  #2 (permalink)  
Antiguo 24/03/2008, 05:40
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: problema menu vertical en IE pero no en FF

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.
  #3 (permalink)  
Antiguo 24/03/2008, 15:23
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: problema menu vertical en IE pero no en FF

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í ??
  #4 (permalink)  
Antiguo 25/03/2008, 03:45
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: problema menu vertical en IE pero no en FF

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]--> 
  #5 (permalink)  
Antiguo 25/03/2008, 06:43
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: problema menu vertical en IE pero no en FF

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 !!!
  #6 (permalink)  
Antiguo 25/03/2008, 13:00
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: problema menu vertical en IE pero no en FF

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...
  #7 (permalink)  
Antiguo 25/03/2008, 13:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: problema menu vertical en IE pero no en FF

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.
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 02:10.