El ejemplo que te dejé corregido funciona perfectamente. Aunque la objeción para IExplorer es válida : falta declarar un montón de variables,
y un navegador serio como el de Microsoft no te lo va a dejar pasar.
Lo primero que vamos a aclarar es que el HTML estaba mal escrito. No había otro "conflicto" más que el de tipeado.
O sí, hay mucho más para arreglar, por eso te respondí. Porque te creo que lo hayás hecho vos. Algo así no se puede copiar de ningún lado. Al que ofrece un código como ése, se lo ejecuta por Alta Traición al Lenguaje de Marcado.
Empezá por deshacerte de esa imagen que no existe. Y revisá mejor lo de anidar tablas en
div's en tablas.
Todavía no sé para qué estás metiendo esas
anchor sin
href. (Ni me respondiste.)
Tampoco qué sentido tiene seguir cambiando el
DocType.
Pero si lo querés con ése, también anda.
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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<meta charset="UTF-8" />
<title>Subject Matter Expert</title>
<script type ="text/javascript">
function calcular_edad()
{
var dia = parseInt(document.getElementById( 'dia' ).childNodes.item(0).nodeValue);
var mes = parseInt(document.getElementById( 'mes' ).childNodes.item(0).nodeValue);
var ano = parseInt(document.getElementById( 'anio' ).childNodes.item(0).nodeValue); ;
fecha_hoy = new Date();
var ahora_ano = fecha_hoy.getYear();
var ahora_mes = fecha_hoy.getMonth();
var ahora_dia = fecha_hoy.getDate();
var edad = (ahora_ano + 1900) - ano;
if (ahora_mes < (mes - 1)) {
edad--;
}
if (((mes - 1) == ahora_mes) && (ahora_dia < dia)) {
edad--;
}
if (edad > 1900)
{
edad = edad - 1900;
}
var ed = document.getElementById('edad');
ed.childNodes[0].nodeValue = edad;
}
</script>
<style type="text/css">
#navigation {color:White; font-family:Calibri; border: 1 px solid; text-align:center; width:150px; }
#navigation ul {margin:10 px; padding:0;}
#navigation li {list-style: none; padding:10px 10px;}
ul.top-level {background:#003399;}
ul.top-level li {border-bottom: #fff solid; border-top: #fff solid; border-width: 1px;}
#navigation a {color: #fff;cursor: pointer; display:block; height:25px; line-height: 25px; text-indent: 10px; text-decoration:none; width:100%;}
#navigation a:hover{text-decoration:underline;}
#navigation li:hover {background: ##0099cc;position: relative;}
ul.sub-level {display: none;}
li:hover .sub-level {background: #003399; border: #fff solid; border: 1px solid; margin:10 px; display: block;position: absolute;left: 150px;top: 5px;}
ul.sub-level li {border: none; float:left; width:150px; border: 1px solid; font-family:Calibri}
</style>
</head>
<body onload="calcular_edad();">
<div style="position:relative; top: 5%; left:7%"></div>
<table style=" padding-left:25%">
<tr>
<td>
<div style="position:relative; top:30%; left:7%" id="navigation">
<ul class="top-level">
<li>Menu 1
<ul class="sub-level">
<li><a href="#">submenu1.1</a></li>
<li><a href="#">submenu1.2</a></li>
<li><a href="#">submenu1.3</a></li>
<li><a href="#">submenu1.4</a></li>
</ul>
</li>
<li>Menu 2
<ul class="sub-level">
<li><a href="#">submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
</ul>
</li>
<li>Menu 3
<ul class="sub-level">
<li><a href="#">submenu 3.1</a></li>
<li><a href="#">submenu 3.2</a></li>
<li><a href="#">submenu 3.3</a></li>
</ul>
</li>
<li>FAQ</li>
<li>contact</li>
</ul>
</div>
</td>
<td>
<div style="position:relative;left:35%; padding-left:15%">
<table border="1">
<tr>
<td><b>Nombre Completo:</b> Usuario 1</td>
</tr>
<tr>
<td><b>Experiencia Total Laboral en años:</b> 18</td>
</tr>
<tr>
<td><b>Fecha de inicio de labores: </b><a id="dia">14</a>/<a id="mes">04</a>/<a id="anio">1800</a></td>
</tr>
<tr><td>Actualmente tiene <a id="edad">años</a> laborando </td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
No voy a ponerme a revisar todo lo que hay para pulir, pero puse unos campos de texto (que es lo que deberías usar, o mejorar mucho lo que tenés) para que ingresen las fechas y así probar mejor el escript sin editar el código. Para no recargar a cada rato, le puse la opción de "Calcular" al menú.
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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<meta charset="UTF-8" />
<title>Subject Matter Expert</title>
<script type ="text/javascript">
function calcular_edad()
{
var dia = parseInt(document.getElementById( 'dia' ).value);
var mes = parseInt(document.getElementById( 'mes' ).value);
var ano = parseInt(document.getElementById( 'anio' ).value); ;
fecha_hoy = new Date();
var ahora_ano = fecha_hoy.getYear();
var ahora_mes = fecha_hoy.getMonth();
var ahora_dia = fecha_hoy.getDate();
var edad = (ahora_ano + 1900) - ano;
if (ahora_mes < (mes - 1)) {
edad--;
}
if (((mes - 1) == ahora_mes) && (ahora_dia < dia)) {
edad--;
}
if (edad > 1900)
{
edad = edad - 1900;
}
var ed = document.getElementById('edad');
ed.value = edad;
}
</script>
<style type="text/css">
#navigation {color:White; font-family:Calibri; border: 1 px solid; text-align:center; width:150px; }
#navigation ul {margin:10 px; padding:0;}
#navigation li {list-style: none; padding:10px 10px;}
ul.top-level {background:#003399;}
ul.top-level li {border-bottom: #fff solid; border-top: #fff solid; border-width: 1px;}
#navigation a {color: #fff;cursor: pointer; display:block; height:25px; line-height: 25px; text-indent: 10px; text-decoration:none; width:100%;}
#navigation a:hover{text-decoration:underline;}
#navigation li:hover {background: ##0099cc;position: relative;}
ul.sub-level {display: none;}
li:hover .sub-level {background: #003399; border: #fff solid; border: 1px solid; margin:10 px; display: block;position: absolute;left: 150px;top: 5px;}
ul.sub-level li {border: none; float:left; width:150px; border: 1px solid; font-family:Calibri}
input {text-align: center; border: 0; font-size: 0.75em; }
</style>
</head>
<body onload="calcular_edad();">
<div style="position:relative; top: 5%; left:7%"></div>
<table style=" padding-left:25%">
<tr>
<td>
<div style="position:relative; top:30%; left:7%" id="navigation">
<ul class="top-level">
<li>Menu 1
<ul class="sub-level">
<li><a href="#">submenu1.1</a></li>
<li><a href="#">submenu1.2</a></li>
<li><a href="#">submenu1.3</a></li>
<li><a href="#">submenu1.4</a></li>
</ul>
</li>
<li>Menu 2
<ul class="sub-level">
<li><a href="#">submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
</ul>
</li>
<li>Menu 3
<ul class="sub-level">
<li><a href="#">submenu 3.1</a></li>
<li><a href="#">submenu 3.2</a></li>
<li><a href="#">submenu 3.3</a></li>
</ul>
</li>
<li>FAQ</li>
<li>contact</li>
<li onclick="calcular_edad()" style="cursor: pointer"
title="Calcular tiempo trabajado.">Calcula</li>
</ul>
</div>
</td>
<td>
<div style="position:relative;left:35%; padding-left:15%">
<table border="1">
<tr>
<td><b>Nombre Completo:</b> Usuario 1</td>
</tr>
<tr>
<td><b>Experiencia Total Laboral en años:</b> 18</td>
</tr>
<tr>
<td><b>Fecha de inicio de labores: </b><br>
<input size="2" id="dia" value="14" title="Ingrese el día.">/
<input size="2" id="mes" value="04" title="Ingrese el mes.">/
<input size="3" id="anio" value="1800" title="Ingrese el año."></td>
</tr>
<tr><td>Actualmente tiene <input size="2" id="edad"> años laborando </td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Por último, si vas a mostrar código, que sea entre etiquetas de código.
La etiqueta de cita, es para hacer citas.