Hola Hedwing!
Antes que nada tu código HTML estaba mal organizado. Tenías etiquetas
p sin cerrar y en otros casos las cerrabas antes de lo necesario.
Acá te paso el código HTML bien organizado:
Código HTML:
<body>
<div class="contenedora">
<div class="menu">
<ul style="margin-top:108px;">
<li>
<p>
<button class="button">Historia</button>
</p>
<p>
<button class="button">Historia</button>
</p>
<p>
<button class="button">Historia</button>
</p>
</li>
</ul>
</div>
<!--fin menu-->
<div class="encabezado">
<p>
<h1>ENCABEZADO</h1>
</p>
</div>
<!--fin encabezado-->
<div class="cuerpo">
<p>
<h3>CONTENIDO DEL CUERPO</h3>
</p>
<p>
<h4>CONTENIDO DEL CUERPO</h4>
</p>
</div>
<!--fin cuerpo-->
<div class="clear"></div>
</div>
<!--fin contenedora-->
<div class="pie">
<p>CONTENIDO DEL PIE</p>
</div>
<!--fin pie-->
</body> Acá tenés un ejemplo para que veas el resultado final: http://jsfiddle.net/6TAqY/
Imagino que el error de los navegadores se debía a esto. Si no es así, no dudés en decirme. De todas maneras, IE 7 e inferiores no soportan
display: table. No sé que IE utilizás, pero si es del 7 para abajo es bueno que sepas eso. IE8+ sí que lo soportan.
Un saludo,
Leo!
EDITO: Lo único que agregué a tu código CSS fueron reglas para resetear los valores de la UA stylesheet:
Código:
body, div, p, button,
ul, li, h1, h3, h4 {
margin: 0;
padding: 0;
}