menu en IE6 no se ve

CaPaSe · #1 (**permalink**) 20/10/2008, 10:06

Hola a todos.

Mi problema es el siguiente: el frame izquierdo de mi página lleva un div que muestra la fecha y hora actual, y debajo de éste otro div que contiene el menú principal. Aquí esta el problema, en IE6 no se puede visualizar el menú.

El código es el siguiente

HTML:

<!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="stylesheet" href="archivos/menu.css" type="text/css" />
<title>Menú Principal</title>
</head>
<body><BR/><div style="margin-left:5px">
<div align="center" style="border:groove #0000CC; margin:2;"><font face="Baskerville Old Face" size="2" color="#006600">
<span id="clock"><script language="JavaScript" type="text/javascript">
var dayarray=new Array("Domingo","Lunes","Martes","Miércoles ","Jueves","Viernes","Sábado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Ju nio","Julio","Agosto","Septiembre","Octubre","Novi embre","Diciembre")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym=""+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
{
d = new Date();
Time24H = new Date();
Time24H.setTime(d.getTime() + (d.getTimezoneOffset()*60000) + 3600000);
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate=dayarray[day]+" "+daym+"<BR />"+montharray[month]+" "+year+" <BR />"+hours+":"+minutes+":"+seconds+" "+dn+""
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
window.onload=goforit
</script></span>
</font></div><BR/></div>
<div id="menu">
<ul>
<li class="nivel1"><a href="home.html" target="mainFrame" class="nivel1">Inicio</a></li>
<li class="nivel1"><a href="mision_vision.html" target="mainFrame" class="nivel1">Conócenos</a></li>
<li class="nivel1"><a href="departamentos.html" target="mainFrame" class="nivel1">Departamentos</a></li>
<li class="nivel1"><a href="SIG.html" target="mainFrame" class="nivel1">SIG</a></li>
<li class="nivel1"><a href="organigrama.html" target="mainFrame" class="nivel1">Organigrama</a></li>
<li class="nivel1"><a href="resultados.html" target="mainFrame" class="nivel1">Resultados</a></li>
<li class="nivel1"><a href="agencias.html" target="mainFrame" class="nivel1">Regionales y Agencias</a></li>
<li class="nivel1"><a href="interes.html" target="mainFrame" class="nivel1">De Interés</a></li>
</ul>
</div>
</body>
</html>

CSS:

* { margin: 0px; padding: 0px; outline: 0;}
body { font:"Baskerville Old Face"}
#menu { font-size: 0.8em;margin: 3px;}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { width: 105px;}
#menu ul li { text-align: center;}
#menu ul li a {display: block;text-decoration: none;color: #AD0606;background-color: #E6E6E6;border: solid 1px #088A08; padding: 1px 0px 1px 0px;position: relative;}
#menu ul li:hover {position: relative;background-color: #E6E6E6;color: #000;}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #E0F8E0;color: #08088A;position: relative;}
#menu ul li a.nivel1 {display: block!important;display: none;position: relative;}

Gracias de antemano

AndreaL · #2 (**permalink**) 20/10/2008, 15:04

hola! mira yo tuve ese problema tambien y dejame decirte que la solución está en el css respectivo que controla tu menú... agrega lo siguiente
z-index:300

al final del segmento css que controla esa parte y asunto arreglado!

CaPaSe · #3 (**permalink**) 21/10/2008, 07:46

Hola

Primero que nada gracias por responder.

No funciona

, aun no puedo ver el menu en IE6.
Alguien me podría decir que más puedo hacer?

Mikmoro · #4 (**permalink**) 21/10/2008, 09:24

Mira: IE6 no entiende el important, por lo que siempre atiende a la última declaración que aparezca sobre un parámetro determinado. En tu caso tienes puesto esto:

#menu ul li a.nivel1 {display: block!important;display: none;position: relative;}

Por lo que está atendiendo al display:none, y por eso no se ve.

CaPaSe · #5 (**permalink**) 21/10/2008, 10:07

Muchísimas gracias Mike me has vuelto a salvar

Ahora que ya se cual es el problema, lo he podido remediar.
Muchas gracias de nuevo

Mikmoro · #6 (**permalink**) 21/10/2008, 10:09

De nada, es un placer.

Saludos.

CaPaSe · #7 (**permalink**) 21/10/2008, 10:31

Una pregunta más, que puedo hacer para que el menú se vea igual en IE6 que IE7?

Ya lo puedo ver, pero no igual. Tengo que hacer 2 CSS? o se soluciona con los IF dentro de comentarios dentro del HTML?

Gracias

Mikmoro · #8 (**permalink**) 21/10/2008, 10:56

En uno que yo hice bastante parecido, tuve que usar esto par que se viera igual en FF, IE6 e IE7:




En tu caso exacto no sé lo que necesitarás, pero es probable que necesites algún arreglito de este tipo.

CaPaSe · #9 (**permalink**) 21/10/2008, 11:20

Si,

de hecho me basé en los que publicaste, me fue de gran ayuda.

Ahora checo si con ello soluciono el problema y comentaré que pasó. Muchas gracias Mike

CaPaSe · #10 (**permalink**) 21/10/2008, 11:47

Pues bueno, tal vez no sea la mejor solución (no lo sé, pero seguiré buscando), pero al IF para IE6, además del margen le agregué:
#menu ul li a.nivel1 {display: block!important;position: relative;}

Con esto ya puedo ver el menú con casi todo el formato que le di (faltan los colores de fondo), así que me imagino lo agregaré dentro del IF.

Gracias de nuevo y seguiré informando

Mikmoro · #11 (**permalink**) 21/10/2008, 11:56

Pero eso ya lo tenías en la css:

#menu ul li a.nivel1 {display: block!important;position: relative;}

CaPaSe · #12 (**permalink**) 21/10/2008, 12:13

Si, pero sólo haciendo eso logré que se vea el menú.
De hecho en la mayoría de las páginas a las que enlaza el menú tengo uno horizontal. En todos tuve que hacer lo mismo para que se visualizaran :(
Con una excepcion: en una de las páginas el menú tiene submenús no le tuve que hacer nada, lo puedo ver.
Por otro lado en otra en la que solo algunos elementos tiene submenús pasa lo siguiente: Si no le agrego eso sólo se ven los elementos que tienen submenú, y si se lo agrego, esos elementos me los duplica.
Quise agregar imágenes para mostrar lo que sucede pero no se como

Se que aún me falta MUCHO por aprender de CSS, así que no entiendo por que, claro que seguiré buscando

Mikmoro · #13 (**permalink**) 21/10/2008, 14:47

No, pero lo que tú tenías era esto:

#menu ul li a.nivel1 {display: block!important;display: none;position: relative;}

y lo que necesitas que sea es esto:

#menu ul li a.nivel1 {display: block;position: relative;}

y todos los que no tengan submenú se verán sin problemas (o así debería ser).

Es decir, no añadas eso al estilo para IE6, simplemente cambia eso en la css, a ver qué tal.

CaPaSe · #14 (**permalink**) 23/10/2008, 07:39

Hola

Ya probé haciendo eso y

Aun me la duplica.