Aide sur CSS

Je vais craquer !!!

Après avoir fini mon CSS et ma page en HTML sur mon portable de 15.5" je suis venue vérifier le résultat sur un écran 15" et tout est différent :colere:

.

Ensuite, histoire de m'achever j'ai tester sur firefox... et là aucune marge n'est respectée, tout est collé... et même un lien vers météo france ne veut pas se centrer (alors que sur IE pas de problème)

.

Si quelqu'un peut m'aider parce que là j'fatigue à bidouiller dans l'vide. Voici mon code CSS :

body
{
width: 500px;
text-align:center;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #FAE3F8
}

#en_tete
{
width: 760px;
height: 100px;
background-position: absolute;
background-image: url("Images/banniere.jpg");
background-repeat: no-repeat;
text-align:center;
margin: auto;
margin-top: 20px;
margin-bottom: 50px;
}

#menu
{
width : 190px;
position: absolute;
left: 0.5%;
}

#menu1
{
width: 190px;
position: absolute;
right: 0.5%;
}

.element_menu
{
background-color: #FAE3F8;
background-image: url("Images/Motif1.gif");
background-repeat: repeat-x;
border: 1px solid black;
margin-bottom: 30px;
text-align: center;
}

.element_menu1
{

background-image: url("Images/Motif1.gif");
background-repeat: repeat-x;
border: 1px solid black;
text-align: left;
margin-bottom: 30px;
font-size: 20px;
font-size: 22px;
}

.element_menu2
{

margin-bottom: 20px;

}

.element_menu3
{
background-image: url("Images/Motif1.gif");
background-repeat: repeat-x;
border: 1px solid black;
margin-bottom: 20px;
}
.element_menu h2
{
color: black;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
background-repeat: repeat-x;
text-align: center;
}

.element_menu h3
{
color: black;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
text-align: center;
background-repeat: repeat-x;
}

.element_menu3 h3
{
color: black;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
text-align: center;
background-repeat: repeat-x;
}

.element_menu ul
{
list-style-image: url("Images/fleche.gif");
padding: 5px;
padding-left: 30px;
margin: 20px;
margin-bottom: 15px;
text-align: left;
background-repeat: repeat-x;
}

.element_menu3 ul
{
list-style-image: url("Images/carre2.gif");
padding: 5px;
padding-left: 30px;
margin: 20px;
margin-bottom: 15px;
text-align: left;
background-repeat: repeat-x;
}

.element_menu a
{
text-decoration: none;
color: black;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
text-align: center;
}

.element_menu1 a
{
text-decoration: none;
color: black;
font-family: "Monotype Corsiva", "Arial Narrow", Arial, Times, serif;
}

.element_menu3 a
{
text-decoration: none;
color: black;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
}

#corps
{
width:590px ;
height:300px ;
position:absolute;
left:32% ;
margin-left: -115px;
margin-top:-07px
background-color: #FAE3F8;
text-align: center;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
border: 2px solid black;
}
p
{
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
color: black;
text-align: center;
margin-bottom: 10px;
}

#corps a
{
text-decoration: none;
color: blue;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
font-weight: bold;
}

#corps h1
{

color: #800080;
text-align: center;
font-family: "Arial narrow", Arial, "Times New Roman", Times, serif;
margin-bottom: 100px;
}

#corps h2
{
text-align: center;
margin-top: 50px;
margin-bottom:0px;
}

#pied_de_page
{
width:700px ;
height:100px ;
position:absolute ;
text-align:center;
margin: auto;
left:-650px;
top: 850px;
color: blue;
font-size: 10px;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
}

#pied_de_page a
{
text-decoration: none;
color: blue;
font-size: 14px;
font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
}

Qu'est-ce qu'il faut faire pour que l'affichage ne caffouille pas d'un PC à un autre et régler le problème des séparations pour firefox??