Affichage de texte et positionning

Hello,

jai lu l'article comment résoudre les problèmes d'affichage CSS, mais j'ai du mal a comprendre la difference entre IE et FF sur leur interpretation de la page suivante:

http://goirand.christophe.free.fr/voisin/leon.html

quand j'enlève le titre "une entreprise centenaire ya pas de soucis. jai egalement joué sur les P relative et absolute mais rien ny fait.

html, body {
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: center;
line-height: 14px ;
margin: 0;
padding: 0;
background: #4A0000;
}

p {
text-align: left
}

#page {
color: black;
width: 780px;
height: 510px;
position:relative;
margin: 40px auto;
padding: 0;
background: #CC0000;
}

#menu {
width: 780px;
height: 14px;
position:absolute;
top: 36px;
left: 50%;
font-size: 10px;
font-family: "Times New Roman", Times, serif;
margin-left: -390px;
padding:0;
}

#menu li {
display: inline;
list-style: none;
color: #AC9352;
padding: 0px 2px 0px 0px;
margin: 0px 0px 0px 4px;
background :#4A0000;
cursor: pointer;
}

#menu li a {
color: #AC9352;
text-decoration: none;
background :#4A0000;
}

#menu li a:hover {
color: #FFF;
background :#4A0000;
}

#smenuzone{
width: 780px;
height: 14px;
position:relative;
top: 70px;
margin: 0 auto;
padding:0;
color: #A18D50; 
background: #4A0000;
z-index:1;
}

#smenu0,#smenu1,#smenu2,#smenu3,#smenu4,#smenu5,#smenu6 {
display: none;
width: 780px;
margin:0;
padding:0;
}

.sousmenuarticle {
float:left;
list-style: none;
font-size: 11px;
padding: 0 20px 0 6px;
margin: 0;
}

.sousmenuarticle a {
color: #A18D50;
text-decoration: none;
background: #4A0000;
}

.sousmenuarticle a:hover {
color: #FFF;
background :#4A0000;
}

.bord {
border-right: 1px solid #A18D50;
}

#cadre {
color: black;
height: 424px;
position:relative;
top: 62px;
margin: 0;
padding: 0;
background : #830000;
}

#cadre2 {
color: black;
height: 416px;
position:relative;
top: 3px;
border-top: 1px dashed #A18D50;
border-bottom: 1px dashed #A18D50;
margin: 0;
padding: 0;
background: #830000;
}

#cadre3 {
color: black;
height: 237px;
position:relative;
top: 58px;
margin: 0;
padding: 0;
background : #CC0000;
}

#cadre4 {
color: black;
height: 262px;
width: 491px;
position:absolute;
margin: 0px 0px 0px -246px;
padding: 0;
top: 111px;
left:50%;
border-top: 1px dashed #A18D50;
border-bottom: 1px dashed #A18D50;
background: #830000;
}

#cadre5 {
color: black;
height: 252px;
width: 491px;
position:relative;
top: 3px;
border-top: 2px solid #A18D50;
border-bottom: 2px solid #A18D50;
margin: 0;
padding: 0;
background: #830000;
}

#cadre6 {
color: black;
height: 237px;
width: 491px;
position:absolute;
top: 7px;
left:50%;
margin:0px 0px 0px -245.5px;
padding: 0;
background :#FFF;
}

#logo {
position:absolute;
top: 454px;
left: 50%;
margin: 0px 0px 0px -45px;
padding:0;
}

#blason {
position:absolute;
top: 18px;
left: 50%;
margin: 0px 0px 0px -55.5px;
padding:0;
}

#leon {
float: left;
margin: 0px 12px 0px 0px;
padding: 0px 0px 0px 0px;
}

#histoire {
float: right;
}

.texte {
position:relative;
clear: right;
margin: 0px 25px 0px 0px;
padding: 0px 0px 0px 0px;
}

.objet {
position: absolute;
bottom: 5px;
}

#boite {
left: 135px;
}

#boite2 {
left: 330px;
}

#titre1 {
font-size: 14px;
color : #430603;
}