menu desplegable diferente IE y FF

omar_cb11 · #1 (**permalink**) 24/11/2006, 08:59

Hola, alguien sabe por que se me mira diferente en Internet Explorer y en Firefox un menu despegable, aki tengo las capturas

IE:

FF:

Aqui esta el codigo de la pagina:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="icon" type="image/x-icon" href="http://www.muna.hn/favicon.ico" />
<title>Ministerio Un Nuevo Amanecer</title>
<link href="recursos/estilos_css/css_menues.css" rel="stylesheet" type="text/css" />

<script type="text/JavaScript">
function mostrarMNUministerio() {
    obj = document.getElementById('MNUministerio');
    obj.style.visibility = 'visible';}
function ocultarMNUministerio() {
    obj = document.getElementById('MNUministerio');
    obj.style.visibility = 'hidden';
}
</script>

</head>

<body>

<!--Parte de arriba-->
<div id="top" class="top">
<img src="recursos/imagenes/esquinas/index/esquina_sup_izq.jpg" class="esquina_sup_izq" />
<img src="recursos/imagenes/esquinas/index/esquina_sup_der.jpg" class="esquina_sup_der" />
</div>
<!--Termina parte de arriba-->
<!--Contenedor principal-->
<div id="content" class="content">
<!--Caja de control-->
<div id="box_control" class="boxcontrol">

<!--************************************************************-->

<table width="700" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="114" height="30" align="left" valign="bottom">
    <div id="MNUministerio" onmouseover="mostrarMNUministerio()" onmouseout="ocultarMNUministerio()">
        <ul id="tres">
            <li><a href="ministerios/visionymision/">Visión y Misión</a></li>
            <li><a href="ministerios/agenda/">Agenda</a></li>
            <li><a href="ministerios/notimuna/">Notimuna</a></li>
            <li><a href="ministerios/esperanza/">Esperanza</a></li>
        </ul>
    </div>    
    <ul id="tres">
          <li>
          <a href="#" onmouseover="mostrarMNUministerio()" onmouseout="ocultarMNUministerio()">Ministerio</a>
        </li>
    </ul></td>

<td width="586">&nbsp;</td>
    </tr>
  <tr>
    <td height="170"></td>
    <td></td>
  </tr>
</table>

<!--************************************************************-->

</div>
<!--Termina caja de control-->
</div>
<!--Termina contenedor principal-->
<!--Parte de abajo-->
<div id="bottom" class="bottom">
<img src="recursos/imagenes/esquinas/index/esquina_inf_izq.jpg" class="esquina_inf_izq" />
<img src="recursos/imagenes/esquinas/index/esquina_inf_der.jpg" class="esquina_inf_der" />
</div>
<!--Termina parte de abajo-->

</body>
</html>

y este es el codigo de el estilo css:

Código PHP:

  div.top {
    height:20px;
    width:777px;
    margin: auto;
    background-image:url(../imagenes/esquinas/index/lado_alto.jpg);
    background-repeat: repeat-x;
}
    img.esquina_sup_izq { float:left; }
    img.esquina_sup_der { float:right; }

div.bottom {
    height:20px;
    width:777px;
    margin: auto;
    background-image:url(../imagenes/esquinas/index/lado_bajo.jpg); 
    background-repeat: repeat-x; }
    img.esquina_inf_izq { float:left; }
    img.esquina_inf_der { float:right; }
    
div.content {
    width:777px;
    margin:auto;
    background-image:url(../imagenes/esquinas/index/lado_izq.jpg);
    background-repeat:repeat-y;
    background-color:#A7D7FD; }
    
div.boxcontrol {
    padding:0 5% 0 5%;
    background-image:url(../imagenes/esquinas/index/lado_der.jpg);
    background-position:right;
    background-repeat:repeat-y; }

ul#tres {  
    list-style:none;
    margin:0;
    padding:0;
}
ul#tres li {
    margin:0px;
    padding:0;
    float:left;
}
ul#tres li a {
    display:block;
    width:100px;
    padding:4px 0;
    text-decoration:none;
    text-align:left;
    color:#333333;
    background-color:#CCE6FF;
    border-left:10px solid #64B1FF;
}
ul#tres li a:hover {
    color:#F3C22E;
    background-color:#0071E1;
    border-left-color:#DEAA0C;
}

/*Menues desplegables*/
#MNUministerio {
    margin:0px;
    position:absolute;
    top:65px;
    width:110px;
    height:80px;
    visibility:hidden;
}

Ojala me puedan ayudar! Gracias

Mikmoro · #2 (**permalink**) 24/11/2006, 11:39

Creo que el efecto que te produce firefox se lo estás pidiendo tú mismo con el margen top en el estilo:

#MNUministerio {
margin:0px;
position:absolute;
top:65px;
width:110px;
height:80px;
visibility:hidden;
}

Si reduces ese 65px verás que se acerca a donde quieras.
Mikel.

omar_cb11 · #3 (**permalink**) 24/11/2006, 20:36

bueno hice eso le puse menos pero me subia en IE tambien

Mikmoro · #4 (**permalink**) 25/11/2006, 05:45

Para que funcione como quieres yo haría unos pequeños cambios.
1.- Ya que tienes una tabla con 2 filas y 2 columnas, lo primero que haría sería llevarme el div que se despliega (el no visible) a la primera celda de la siguiete fila, es decir, dejarlo oculto pero justo debajo del enlace que lo despliega y darle a esa celda una alineación vertical de top:

<tr>
<td style="height: 170px; vertical-align: top;">
<div id="MNUministerio"
onmouseover="mostrarMNUministerio()"
onmouseout="ocultarMNUministerio()">
<ul id="tres">
<li><a href="ministerios/visionymision/">Visión
y Misión</a></li>
<li><a href="ministerios/agenda/">Agenda</a></li>
<li><a href="ministerios/notimuna/">Notimuna</a></li>
<li><a href="ministerios/esperanza/">Esperanza</a></li>
</ul>
</div>
</td>
<td></td>
</tr>

2.- Lo segundo, quitarle al estilo MNUministerio el absolute y el margen top para que sea relativo a esa celda:

#MNUministerio {
margin:0px;
width:110px;
height:80px;
visibility:hidden;
}

De esta manera, cuando la haces visible con "onmouseover", aparece justo debajo del enlace, bien pegado a la altura justa, tanto en IE como en Firefox.

Te pongo todo el código para que lo pegues y lo pruebes.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type" />
  <link href="http://www.muna.hn/favicon.ico"
 type="image/x-icon" rel="icon" />
  <title>Ministerio Un Nuevo Amanecer</title>
  <link type="text/css" rel="stylesheet"
 href="recursos/estilos_css/css_menues.css" />
  <script type="text/JavaScript">
function mostrarMNUministerio() {
obj = document.getElementById('MNUministerio');
obj.style.visibility = 'visible';}
function ocultarMNUministerio() {
obj = document.getElementById('MNUministerio');
obj.style.visibility = 'hidden';
}
  </script>
</head>
<body>
<!--Parte de arriba-->
<div id="top" class="top"><img
 src="recursos/imagenes/esquinas/index/esquina_sup_izq.jpg"
 class="esquina_sup_izq" /><img
 src="recursos/imagenes/esquinas/index/esquina_sup_der.jpg"
 class="esquina_sup_der" /></div>
<!--Termina parte de arriba-->
<!--Contenedor principal-->
<div id="content" class="content"><!--Caja de control-->
<div id="boxcontrol" class="boxcontrol"><!--************************************************************-->
<table style="width: 700px;" border="0" cellpadding="0"
 cellspacing="0">
<!--DWLayoutTable--> <tbody>
    <tr>
      <td align="left" height="30" valign="bottom"
 width="114">
      <ul id="tres">
        <li> <a href="#"
 onmouseover="mostrarMNUministerio()"
 onmouseout="ocultarMNUministerio()">Ministerio</a> </li>
      </ul>
      </td>
      <td width="586">&nbsp;</td>
    </tr>
    <tr>
      <td style="height: 170px; vertical-align: top;">
      <div id="MNUministerio"
 onmouseover="mostrarMNUministerio()"
 onmouseout="ocultarMNUministerio()">
      <ul id="tres">
        <li><a href="ministerios/visionymision/">Visi&oacute;n
y Misi&oacute;n</a></li>
        <li><a href="ministerios/agenda/">Agenda</a></li>
        <li><a href="ministerios/notimuna/">Notimuna</a></li>
        <li><a href="ministerios/esperanza/">Esperanza</a></li>
      </ul>
      </div>
      </td>
      <td></td>
    </tr>
  </tbody>
</table>
<!--************************************************************-->
</div>
<!--Termina caja de control-->
</div>
<!--Termina contenedor principal-->
<!--Parte de abajo-->
<div id="bottom" class="bottom"><img
 src="recursos/imagenes/esquinas/index/esquina_inf_izq.jpg"
 class="esquina_inf_izq" /><img
 src="recursos/imagenes/esquinas/index/esquina_inf_der.jpg"
 class="esquina_inf_der" /></div>
<!--Termina parte de abajo-->
</body>
</html>

Funciona perfectamente a la altura exacta.
Mikel.

omar_cb11 · #5 (**permalink**) 26/11/2006, 12:55

De maravilla muchas gracias