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"> </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ó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>
</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.