[résolu] Mise en page décalée suivant le navigateur ie ou firefox

Bonjour à tous,
je suis perdue dans ma construction de page je fais appel à vos lanternes bien éclairées !!
Voila je suis en train de mettre en page cet index : http://idays.free.fr/paris/index.html
J'ai développé cette page en la testant sur ie, et quand je l'ai ouverte dans firefox c'était un désastre, toutes mes images se décalent.
Pouvez vous m'aider à fixer tout ça, pour qu'il n'y ai pas de changement suivant les navigateur. Ou bien me dire où je me plante.

Merci beaucoup de votre aide.

poulette

Ma feuille de style : style1.css :

/*Style appliqué à toutes les pages, il contient la structure globale*/
#global { /*permet de centrer le site sur ts les navigateurs*/
     margin-left: auto;
     margin-right: auto;
     width: 740px;
     text-align: left; /* on rétablit l'alignement normal du texte */
	 border: 1px solid #FFFFFF; 
	 background-color:#FFFFFF;		
}
body { /* corps de la page*/
	margin: 0; /*pour éviter les marges*/
    text-align: center;  /*pour corriger le bug de centrage sous IE*/
	background-color:#333333;
}
.entete { /*div qui contient le bandeau flash du haut*/
	 width: 740px;
	 height: 104px;
}
.menu { /*div qui contient le bandeau flash du haut*/
	 width: 740px;
	 height: 20px;
	 background-color:#000000;
}
.menu ul {
	list-style-type : none; /* on supprime les puces des listes*/
	 background-color:#000000;
}
.menu li{
	float :left; /*on aligne les pistes sur la gauche*/
}
.menu a {
	margin-top: 2px;
	height: 20px;
	float : left;
	font-family: verdana;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	text-decoration : none;
	color: #FFFFFF;
	/*background: #000000;*/
}
.menu p {
	margin-top: 2px;
	 height: 20px;
	float : left;
	font-family: verdana;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	text-decoration : none;
	color: #FFFFFF;
	font-weight: bold;
	/*background: #000000;*/
}
.menu a:hover {
	float : left;
	text-align: center;
	text-decoration : underline;
	color: #FFFFFF;
	/*background: #FFFFFF;*/
}
.menu a:active {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration : underline;
}
.contenu {
	width: 509px;
	height: 100%;
	margin-top : -380px;
	background-image : url(../images/tour.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: left bottom;
}
.contenu p{ /*aspect du texte*/
	font-family: verdana;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	text-align: justify;
	margin-left: 58px;
	margin-right: 34px;
}
.contenu a{ 
	font-family: verdana;
	font-size: 11px;
	color: #CE5120;
	text-decoration: none;
	font-weight:bold;
}
.contenu a:hover{
	font-family: verdana;
	font-size: 11px;
	color: #CE5120;
	text-decoration: underline;
}
.contenu-titre h1{ /*aspect des gros titres de page*/
	width: 400px;
	font-family: verdana;
	font-size: 18px;
	font-weight: bold;
	color: #000000; /*couleur : bleu foncé, lumineux*/
	text-decoration: none;
	text-align: left;
	margin-top: 15px;
	padding-left: 20px;
	/*background-color: #F2F2F2;*/
}
.contenu-titre p{ /*aspect des gros titres de page*/
	width: 280px;
	font-family: verdana;
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
	color: #CE5120;
	text-decoration: none;
	text-align: left;
	margin-top: -36px;
	margin-left: 110px;
	padding-left: 13px;
	background-color: #F2F2F2;
}
.droite {
	width: 231px;
	float: right;
}
.pied { /*emplacement du bas de page*/
	clear: both; /*permet de positionner le pied de page en dessous de toutes les autres div*/
	height: 19px;
	width: 740px;
	float: left;
	background-color : #000000;
}
.pied p{ /*aspect du texte*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
}
.pied a{ /*aspect des liens à l'état initial*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF; 
	text-decoration: none;
	text-align: center;
}
.pied a:hover{ /*aspect des liens à l'état survolé*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: underline;
	text-align: center;
}
.pied1 a{ /*aspect des liens à l'état initial*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF; 
	text-decoration: none;
	text-align: center;
	text-decoration: underline;
}
.pied1 a:hover{ /*aspect des liens à l'état survolé*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
}

Bonsoir,
A mon avis tu devrais enlever le margin-top:-380px; qu'il y a sur .contenu, et enlever également le width en le remplaçant par du margin-right.

Bonne continuation.
Modifié par Alan (28 Mar 2006 - 21:53)

Kikou !
Merci Alan en effet, je vois de l'amélioration.
Mais maintenant c'est mon footer qui part tout en bas.

En fait je viens d'essayer en ajoutant un margin-right à ma .class contenue mais ça ne change rien sur firefox.

Le margin-right doit être suffisant, supérieur à la largeur de ta div.droite

Concernant le pied de page qui part en bas, c'est du fait du height:100% sur div.contenu

A+

Merci de tout aide. C'est un grand service que tu viens de me rendre, je n'aurais jamais pensé à ça. !!

Encore des ptits bugs mais je vais potasser un peu dessus.
Modifié par idays (28 Mar 2006 - 22:13)