Pb compatibilité FF3 et IE7

Bonjour,

Je viens de reprendre le site d'un collègue qui n'était pas au norme (c'était de la bidouille...)

Donc le code maintenant est valide et je me suis donc attaqué au CSS.
Je fais mes tests sous FF est super, le site est OK.
Sauf que je vérifie quand même avec IE7 et là, je vois une erreur que je vais vous expliquer ...

J'ai 4 div (bannière, menu, contenu, bas) + dans la div contenu, 2 div (news (a gauche) et contact (a droite)).
Le problème vient de la div news d'un décalage (de 360px) vers le droite dans IE qui empiète sur la div contact.

Voici le code:

<div id="contenu">
	<div id="news">
		<img src="./image/news.jpg" width="150" height="49" border="0" alt=""></img>
		<hr />
		<h3>"16 Septembre 2008"</h3> 
		<p>Achats dès aujourd'hui disponible par ch&eacute;que ou esp&egrave;ce sur les 2 premiers models ci-dessous</p>
		
		<a href="./saxo.htm" onclick="javascript:popup('./saxo.html','ACC',520,330,1);return false">
			<img src="./image/saxo.jpg" width="170" height="200" border="2" alt=""></img>
		</a> 
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
		<a href="http://accordingto.fr/vinyls.html" onclick="javascript:popup('./vinyls.html','ACC',520,330,1);return false">
			<img src="./image/vinylpetit.jpg" width="170" height="200" border="2" alt=""></img>
		</a>

		<p>"16 Septembre 2008"<br />Ouverture du Site</p>
		<p>"27 Ao&ucirc;t 2008"<br />Cr&eacute;ation officielle de la marque</p>
	</div>
	<div id="contact">
		<p>Pour tous Renseignements, achats, ou autres </p>
		<img src="./image/droit.jpg" width="360" height="268" border="0" alt=""></img>
	</div>
</div>

#news{
	margin-left:0px;/*Si je met -360px, Dans IE ca marche mais dans FF décalage vers la gauche sous le menu*/
	background-color:red;
	width:500px;
	height:500px;
	text-align:center;
}

#contact{
	margin-left:500px;
	margin-top:-400px;
	background-color:#c1c1c1;
	width:360px;
	text-align:center;
}

Quelqu'un peut m'aider svp ?
Modifié par Flavien22 (09 Oct 2008 - 16:27)

Bonjour Flavien22,

Il devrait suffire de faire flotter ton bloc "news" sur la gauche et d'appliquer une marge à droite à ton bloc "contact" de la largeur du bloc "news" plus éventuellement "un espace de confort" ( a priori inutile de donner une dimension au bloc contact qui devrait naturellement prendre toute la place restante du conteneur)

Une page en ligne ou le code complet de ta page pourrait également permettre de mieux cibler ce qui cause cette différence d'interprétation entre les navigateurs

Cdt,
Sylvain

Merci de ton aide
En fait j'ai rajouter Float:left; dans news et dans contact et ca marche mnt
Merci encore

Re,

Je ne suis pas certain qu'il était nécessaire de faire flotter les deux blocs ni que cela ne posera pas de soucis sur d'autres navigateurs (IE6 par exemple ?) mais si cela résoud tes petits soucis, aurais-tu la gentillesse de bien vouloir ajouter le tag [résolu] dans le titre de ton sujet initial ?

Par avance merci et bonne continuation

Cdt,
Sylvain

Euh pas pour l'instant le tag lol car on va dire que je vais évolué la chose.

Maintenant que ça marche, je voudrais modifier mon css pour qu'il devienne fluide (adaptable selon la résolution).

Arrêtez moi si je me trompe mais pour y arriver, je ne devrais pas modifier beaucoup de chose dans mon css ?

Donc voilà comment j'ai concu le site

En réalité toutes les div sont côte à côte (il n'y a pas d'espace).

La div bandeau, c bon elle est centré selon la résolution.
Par contre le reste je galère

html, body{
	margin:0px;
	padding:0px;
	background-color:white;
}

body{
	background-color:black;
}

#banniere{
	background-color:white;
	
	background-image:url(./image/hautr.jpg);
	background-repeat:no-repeat;
	background-position:50% 0%;
	height:254px;
}

#menu{
	float:left;
	width:140px;
	background-color:red;	
	background-image:url(./image/at.jpg);
	background-repeat: no-repeat;
	background-position:bottom;
	height:520px;
}

#contenu{
	padding-top:10px;
	padding-left:140px;
	background-color:#c1c1c1;
	width:860px;
	height:520px;
	text-align:center;
}

#tout_contenu{
	padding-top:10px;
	padding-left:140px;
	background-color:#c1c1c1;
	width:860px;
	height:520px;
	text-align:center;
}

#news{
	float:left;
	margin-left:0px;
	background-color:#c1c1c1;
	width:500px;
	height:500px;
	text-align:center;
}

#contact{
float:left;
	margin-left:500px;
	margin-top:-400px;
	background-color:#c1c1c1;
	width:360px;
	text-align:center;
}

#bas{
background-color:white;
text-align:center;
}

a:link {
    color:black;
    text-decoration:none;
	font-weight: bold;
	border:0px;
}
a:visited {
    color: black;
    text-decoration:none;
}
a:hover {
    color: black;
    text-decoration: none;
}
a:active {
    color: #FF0000;
    text-decoration: none;
    background-color: black;
}
a:visited img,a:link img{
border:none;
}

#menu hr{
	color:white;
}

#contenu hr{
	color:black;
}

#copyright{
	font-style:italic;
}

Merci d'avance

Personne peut m'aider ?