Hola!!
A ver, mi problema es el siguiente: estoy intentando hacer una página sencillita, y mi primera idea fue hacerla con capas y asi practicar un poco con el css, pero fue un completo desastre
porque en cada navegador se vea como le venía en gana, y como lo de los tamaños y el posicionamiento no los llevo muy bien pues decidi hacerlo con tablas y con css, pero aun no llevo ni la plantilla general y ya están ahi otra vez las incompatibilidades entre explorer y firefox!! (y eso que solo lo compruebo con dos navegadores) vamos fatal.
Si alguien es capaz de decirme que hago mal para que todo se descuadre de esta manera se lo agradecere de verdad.
Aqui dejo el código lo mas reducido que he podido:
Código HTML:
<html>
<head>
<style type="text/css">
body{margin-top:0; margin-left:50px; margin-right:50px; margin-bottom:20px; padding:0; background:#FFFFFF;}
table.General{ width:95%; height:100%; border-width:0; border-spacing:0; border-collapse:collapse}
td.Cuerpo{text-align:right; background-color:#B8FBA2; border-style:solid; border-color:#000000; border-width:1px;}
td.Cabecera{ border-width:0; padding:0; background-color:#000000;}
td.MenuSuperior{border-style:none; border-width:0; background-color:#000000;}
td.MenuSuperior ul{margin: 0; padding: 0; margin-bottom: 0; float: right;
font: bold 70% Verdana; background-color: #00FF00; border: 1px solid #000000;
}
td.MenuSuperior ul li{display: inline;}
td.MenuSuperior ul li a{ float: left; padding: 2px 12px;
color: black; text-decoration: none; border-left-width:1px; border-left-style:dashed;
}
td.MenuSuperior ul li a:visited{color: black;}
td.MenuSuperior ul li a:hover{color: black; background-color: #008800;}
td.Noticias{background-color: #000000; font: bold 90% Verdana; padding: 0px; margin: 0px;}
td.MenuLateral{position:relative; background-color: #B8FBA2; font: bold 95% Verdana; border-color:#FF6600;
width:90px; height:50px; padding: 0px; margin: 0px; vertical-align:top; border-width:0; border-style:none;
}
td.MenuLateral h1 {position:relative; display: block; background-color:#00FF00; color: #000000;
font-size: 95%; padding: 3px 0 5px 3px; text-transform:uppercase; font-weight:1;
border: 1px solid #000000; margin: 0px; width:100%; text-align:center; border-left: 7px solid #000000;
}
td.MenuLateral ul {list-style: none; margin: 0px; padding: 0px; border: none; text-align:left;}
td.MenuLateral ul li {margin: 0px; padding: 0px;}
td.MenuLateral ul li a {font-size: 80%; display: block; border-bottom: 1px dotted #333333; padding: 5px 0px 2px 4px;
text-decoration: none;color: #666666;width:160px; border-left: 7px solid #000000;
}
td.MenuLateral ul li a:hover, #vertmenu ul li a:focus { color: #000000; background-color: #B8FBA2; border-bottom: 1px dotted #000000; }
</style>
</head>
<body>
<table align="center" class="General">
<tr>
<!-- CELDA DE CABECERA DE LA PÁGINA -->
<td colspan="2" height="80px" class="Cabecera"> </td>
</tr>
<tr>
<!-- CELDA DEL MENÚ DE NAVEGACIÓN SUPERIOR -->
<td colspan="2" height="10px" class="MenuSuperior">
<ul>
<li><a href="opcion1">Opcion 1</a></li>
<li><a href="opcion2">Opcion 2</a></li>
<li><a href="opcion3">Opcion 3</a></li>
</ul>
</td>
</tr>
<tr>
<!-- CELDA DE MENU LATERAL -->
<td width="50px" class="MenuLateral">
<h1>OPCION A</h1>
<ul>
<li><a href="opcion1">Opcion 1</a></li>
<li><a href="opcion2">Opcion 2</a></li>
<li><a href="opcion3">Opcion 3</a></li>
</ul>
</td>
<!-- CELDA DE CONTENIDO -->
<td rowspan="2" class="Cuerpo"> </td>
</tr>
<tr>
<!-- CELDA DE NOTICIAS -->
<td class="Noticias" width="50px"> </td>
</tr>
</table>
</body>
</html>