Foros del Web » Creando para Internet » CSS »

menu desplegable diferente IE y FF

Estas en el tema de menu desplegable diferente IE y FF en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/11/2006, 08:59
Avatar de omar_cb11  
Fecha de Ingreso: septiembre-2005
Mensajes: 178
Antigüedad: 12 años, 3 meses
Puntos: 0
menu desplegable diferente IE y FF

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;
    
marginauto;
    
background-image:url(../imagenes/esquinas/index/lado_alto.jpg);
    
background-repeatrepeat-x;
}
    
img.esquina_sup_izq float:left; }
    
img.esquina_sup_der float:right; }

div.bottom {
    
height:20px;
    
width:777px;
    
marginauto;
    
background-image:url(../imagenes/esquinas/index/lado_bajo.jpg); 
    
background-repeatrepeat-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 50 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
__________________
A veces hay que darle un golpecito al Pc para que funcione.

Última edición por omar_cb11; 24/11/2006 a las 09:05
  #2 (permalink)  
Antiguo 24/11/2006, 11:39
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
Lo has incluido

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.
  #3 (permalink)  
Antiguo 24/11/2006, 20:36
Avatar de omar_cb11  
Fecha de Ingreso: septiembre-2005
Mensajes: 178
Antigüedad: 12 años, 3 meses
Puntos: 0
bueno hice eso le puse menos pero me subia en IE tambien
__________________
A veces hay que darle un golpecito al Pc para que funcione.
  #4 (permalink)  
Antiguo 25/11/2006, 05:45
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
Lo que yo haría

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&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>

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.
  #5 (permalink)  
Antiguo 26/11/2006, 12:55
Avatar de omar_cb11  
Fecha de Ingreso: septiembre-2005
Mensajes: 178
Antigüedad: 12 años, 3 meses
Puntos: 0
De maravilla muchas gracias
__________________
A veces hay que darle un golpecito al Pc para que funcione.
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 20:28.