Decalage FF / IE ( encore :)

[xis]

Bonjour à tous,

Après avoir pas mal cherché, puis consulté plusieurs sites, je me résouds (encore diront certains) a demander l'aide de la communauté.

Apres avoir codé un site et l'avoir vérifié sous FF je l'ai passé sous IE 7 et quelle ne fut pas ma surprise de voir des décalages notables alors que j'ai pris soins de spécifier pour chaque "conteneur" la taille des marges internes et externes:

Illustration:

Version FF:

Version IE7 (les décalages sont les zones éclairées):

On constate qu'il y a un décalage au dessus et au dessous du bandeau ainsi qu'un décalage au niveau du tableau de photo sur la gauche.

Les portions de code concernées:

HTML:

<div id="conteneur">		


<h1 id="header"><a href="index.php" title= "Accueil"><img src="pix/header_a.png" alt=header d'accueil, photo de la réception" /></a></h1>
			
		<!-- liste sur une seule ligne pour éviter un bug d'affichage avec IE -->
		<!-- Menu -->
		<div id="menu">


		<!-- menu horizontal -->
		<span class="preload1"></span>
		<span class="preload2"></span>

		<ul class="menu2">
			<li class="top"><a href="accueil.php" title= "Accueil" id="home" class="top_link"><span>Accueil</span></a></li>
			<li class="top"><a href="hotel.php" title= "Hôtel" id="hotel" class="top_link"><span class="down">Hôtel</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

				<ul class="sub">

					<li><a href="chambre.php" title= "Chambres">Nos chambres</a></li>

					<li><a href="tarifs.php" title= "Tarifs des chambres">Tarifs</a></li>			
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li class="top"><a href="restaurant.php" title= "Restaurant" id="restaurant" class="top_link"><span class="down">Restaurant</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="sub">

					<li><a href="menu.php" title= "A la carte..">Menus</a></li>
					<li><a href="vins.php" title= "Notre cave"">Carte des vins</a></li>

				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li class="top"><a href="banquet.php" title= "La salle de bal" id="banquet" class="top_link"><span>Banquet</span></a>

			</li>

			<li class="top"><a href="equipe.php" title= "Une équipe à votre service" id="team" class="top_link"><span>Equipe</span></a>


			</li>
			<li class="top"><a href="contact.php" title= "Conctactez nous" id="contacts" class="top_link"><span>Contact</span></a></li>
		</ul>

		<!-- menu des languages -->
		<div id="flag">

			<a href="index.php" title= "Accueil"><IMG src="pix/flag_fr.png" alt="drapeau.png" /></a>

			<a href="index_en.php" title= "Home"><IMG src="pix/flag_en.png" alt="flag.png" /></a>
			<a href="index_ru.php" title= "Accueil"><IMG src="pix/flag_ru.png" alt="drapeau.png" /></a>

		</div>	
		<div class="col_g">

			<div id="grille">

					<table> 
		 				 <tr>

		   				 	 <th><a href="/hdf v3/hotel.php"><img src="pix/ico_h.png" alt="Bouton Hôtel"></a></th>
								 <th><a href="/hdf v3/restaurant.php"><img src="pix/ico_r.png" alt="Bouton Restaurant"></a></th>

		 				 </tr>

		 				 <tr>
		   					  <td><a href="/hdf v3/banquet.php" target="_blank"><img src="pix/ico_b.png" alt="Bouton Banquet"></a></td>
		   					  <td><a href="/hdf v3/contact.php" target="_blank"><img src="pix/ico_c.png" alt="Bouton Contact"></a></td>

		 				 </tr>



					</table>

				</div>


		</div>



		<div class="col_d">

		<h2>L'équipe</h2>

CSS:

CSS:

[code]
body {	

	text-align: justify;
	font: small, Arial, sans-serif;
	background:  blue  /*#D8C6B3*/;
	overflow: auto;




	}

div#conteneur
	{	
		width: 785px;		
		background: brown   /* #56453A */;
		text-align:center;
		border: solid 1px #FDC80F; 
		position: relative;
		margin: 0;
		margin-left: auto;
		margin-right: auto;
		padding: 0;


	}


h1#header
	{
		height: 211px;
		background: yellow /* #56453A */;
		padding: 0;
		margin: 0;			
	}

h1#header a
	{
		width: 785px;
		height: 211px;
		border: none;
		margin: 0;
		padding: 0;
	}

	#header img {border: none;}


.|	{	
	color: #FFFF00;
	}


/* Drapeaux */

#flag {
	text-decoration: none;
	text-align: left;
	margin: 10px;
	margin-right: 0px;
	background: gray /*#56453A*/;
	}

	#flag img {border: none;}


/*Corps du site */

.col_d {
		float: right;
		width: 400px;
		margin: 20px;
		margin-left: 0px;
		padding: 10px;
		padding-top: 0px;

		background: #BFAB82;
		color: #493722;
		text-align: justify;
		font-size: 1.2em;	
	}

		.col_d h2 {

			text-align: right;

			}


.col_g {
		float: left;
		width: 300px;
		background: pink;				
		margin: 20px;
		padding: 0px;

		/* background: yellow; */

	}			



/* Pied de page */	

#footer {
		clear: both;

	}

#footer a {

		text-decoration: none;
		color: #5B6E7C;
		font-weight: bold;
		padding-bottom: 20px;
		clear: both;


	}

		#footer a:hover, #footer li a:focus, #footer li a:active {

				text-decoration: underline;

				}


/* Accueil: tableau: */


a img {border: 0;}

#grille	{ 

	width: 250px;
	margin-top: 2px;
	margin: 0px;
	background: green;	
	 }

#grille table 
		{
	border: 2px solid white;
	padding: 0px;

	border-collapse: collapse;
	width: 150 px;
		}

#grille	td, th 
		{
	border: 0 solid white;
	height: 150px;
	text-align: center;
	padding: 0px;
		}

Bon ca fait un sacré pavé, merci d'avance a ceux qui auront pris la peine de le lire =)

Pour m'a part, j'ai vraiment cherché avant de demadner votre aide et je pense avoir fait tout ce qu'il est conseillé de faire contre ce type de pb: ne pas laisser les margin/padding par défaut etc etc.

Néanmoins le résultat est inutilisable, sous IE7 ca passe presque, sous IE6 c'est une catastrophe, que faire ?

Modifié 25 Octobre 2007 par xis

[marcb]

Bonsoir,

Ce ne serait pas plutôt possible de filer l'url de ta page, pour que chacun puisse constater avec ses outils ?

M

[captain_torche]

Quand tu postes un code long, il vaut mieux utiliser les balises CODEBOX.

Pour ton souci, utilises-tu un doctype ?

[xis]

Captain_torche: apparemment quelqu'un s'en est chargé pour moi ! Merci l'inconnu

Sur ce site je déclare un doctype: html 4.01 transitionnal

Marc: Voila !

avec un css aux couleurs chatoyantes pour que chaque block soit bien apparent , les pages hotel et banquet fonctionnent également.

Modifié 25 Octobre 2007 par xis

[xis]

1er point résolu: Sous IE7 le tableau de la page accueil était décalé sur la droite par rapport a son <div> "grille" (vert) malgré la remise a zero des margin/padding. En supprimant le <div> "grille" et en appliquant l'id grille au <table> on résoud le décalage. 1ere victoire !

Modifié 25 Octobre 2007 par xis

[xis]

Nouveau flash info:

A ce jour sont résolus deux pbs:

- Le décalage du menu-tableau de la page d'accueil causé par l'inclusion du <table> dans un <div> inutile. IE7 générait un padding-left qui décalait le <table> exagéremment.

Solution: Supression du <div>

- Les écarts au dessus et au dessous du header, causés par ce que j'interprète comme un pb de compatibilité php/utf8 (voir plus haut le détail du pb)

Solution: Réencodage en ascii, déclaration en ISO-8859-1

Avec Uedit pour chaque page: conversion utf-8 > ascii

et dans la déclaration: charset=ISO-8859-1

Reste sans doute le pb le plus génant mais le moins compliqué a apprender: les décalages dans IE 6 du au padding par défaut. Pour l'instant je vois mal comment résoudre le pb.

J'y travaille, et si je ne trouve pas je reviens vers vous