Pues mira, basta con poner el código que tenías al lado del que yo te he puesto y ver las diferencias, que te señalo en negrita.
El problema básicamente es que explorer tiene problemillas (otro más) con los height de las tablas. Si tú marcas el alto de una celda en pixels, cuando la tabla va creciendo por el contenido, IE se empieza a pasar por el forro el tamaño de alto que has puesto a tus celdas, mientras que si lo pones en porcentajes, lo respeta mejor.
Una de las cosas más importantes es que a la celda central, la del contenido (main_cell), no le habías puesto ningún alto, y entonces al crecer la tabla hace crecer cada celda de forma proporcional. Si le das un alto en porcentaje a esa celda, siempre ocupa más o menos ese porcentaje del total, y entonces es más fácil que respete el resto de celdas.
El menú lateral tenía un problema con el margen, que al no tener ninguno, IE le pone el que tiene por defecto para esa etiqueta, por lo que forzándolo a 0px se va a su sitio.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<hea>
<title>Kern Liebers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
border: 0px;
width: 100%;
margin: 0px;
height: 100%;
}
body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#table_main {
width: 100%;
height: 100%;}
#top_menu {
padding: 0px;
margin: 0px;
display: inline;
}
#top_menu li {
display: inline;
list-style: none;
padding: 0px;
padding-right: 5px;
}
#top_menu a, #top_menu a:visited {
color: white;
text-decoration: none;
font-size: 12px;
}
#top_menu a:hover {
color: black;
}
.active {
background: #99CC99;
}
#main_cell {
background: #CCFFCC;
padding: 10px;
height: 82%;
}
#menu_lateral {
list-style: none;
padding: 0px;
margin-left: 0px;
}
#menu_lateral a, #menu_lateral a:visited {
color: white;
text-decoration: none;
padding-left: 20px;
font-size: 11px;
}
#menu_lateral a:hover {
color: black;
}
.titulito {
text-align: center;
margin: 0px;
font-size: 11px;
}
</style>
</head>
<body>
<table id="table_main" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="6%" width="153" style="background: url('gris.jpg'); height: 28px;"> </td>
<td style="background: #999999"> </td>
</tr>
<tr>
<td height="3%" style="background: url('gris2.jpg');"> </td>
<td valign="middle" style="background: #4F4F50;">
<img src="aktiv.gif" alt="Bullet" width="9" height="9">
<ul id="top_menu">
<li><a href="http://www.reforma.com">Español</a> </li>
<li><a href="/htmen/index.htm" target="_self">English</a> </li>
<li><a href="http://www.reforma.com"> Imprimir</a></li>
<li><a href="/htm/mapadelsitio.htm" target="_self">Mapa del Sitio</a></li>
<li><a href="/htm/general.htm" target="_self">General</a></li>
<li><a href="/htm/tradeterms.htm" target="_self">Trade Terms</a></li>
</ul>
</td>
</tr>
<tr>
<td height="9%" width="153" rowspan="2">
<img src="logo_prometall.jpg" width="153" height="51" alt="Prometall"></td>
<td height="3" style="background: #CACACC;"></td>
</tr>
<tr>
<td height="47" style="background: #4EA91D;">
<img src="motivbild.jpg" width="587" height="47" alt="Piezas"></td>
</tr>
<tr>
<td style="background-color: #999999;" valign="top" align="left">
<p class="titulito">Grupo Kern-Liebers</p>
<ul id="menu_lateral">
<li class="active"><a href="http://www.reforma.com">Home</a></li>
<li><a href="/htm/productos.htm" target="_self">Productos</a></li>
<li><a href="/htm/compania.htm" target="_self">Compañía</a></li>
<li><a href="/htm/contacto.htm" target="_self">Contacto</a></li>
<li><a href="http://www.kern-liebers.de/" target="_blank">KERN-LIEBERS</a></li>
</ul>
</td>
<td id="main_cell" valign="top">
<h1>AQUI VA TODO EL CONTENIDO</h1>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Estoy de acuerdo con B** en que deberías diseñar esto sin tablas, porque a decir verdad tampoco te resultan imprescindibles en este caso, pero no dije nada por no parecer pesado (ni un talibán de css)
Mikel.