[Résolu] Espace entre 2 divs de hauteurs définies sous IE

Bonjour tout le monde,

Ca paraît pourtant si basique que je m'attends au pires retours...
Mais après avoir recheché dans le livre CSS2 (vraiment utile, bravo !), suis passé par les tutos, la FAQ et enfin le forum sans trouver ma réponse. Donc je tente :

Sur un PC ce CSS :

<style type="text/css">
<!--
html {
	font-size: 100%;
}
* {
	margin: 0; 
	padding: 0;
}
body {
	background-color: black;
	font-family: "Tahoma", Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	text-align: center;
}
#global {
	background-color: white;
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	height: 12em;
}
#global .left {
	background-color: lime;
	float: left;
	width: 15em;
	height: 10em;
}
#global .right {
	margin-left: 15em;
	height: 10em;
	background-color: blue;
}
#global .clear {
	clear: left;
}
-->
</style>

avec le HTML

<div id="global">
  <div class="left">&nbsp;</div>
  <div class="right">
    <p>abc</p>
  </div>
  <div class="clear">&nbsp;</div>
</div>

donne sous IE 6



L'espace entre les deux colonnes vient de la valeur "height" dans

#global .right {
	margin-left: 15em;
	height: 10em;
	background-color: blue;
}

Bien sûr tout est parfait sous FF.

Donc existe-t-il un moyen de 'coller' le div droit au div gauche Sous IE. avec des hauteurs définies ?

Le traditionnel merci d'avance.
Modifié par rolland (25 Apr 2007 - 21:16)

Bonjour et bienvenue,

pas si basique que ça, ce bug de IE < 7. Enfin tout dépend de ce qu'on appelle basique: il est très connu (une fois qu'on le connait ) mais pas évitable

Je cite Florent V. pour éviter de dire des bétises:

Florent V. a écrit :

Comme dit plus haut, il s'agit du « Three Pixel Jog », un bug bien connu et plutôt bien documenté d'IE6. Je te conseille donc une petite recherche (sur le forum et/ou sur le Web) pour plus d'informations.

À ma connaissance, pas de correctif disponible. On peut juste jouer sur l'application du décalage : sur le texte ou bien carrément sur tout le bloc. Et, si besoin, appliquer un style spécifique pour IE6 via un commentaire conditionnel, pour corriger le décalage avec une marge négative par exemple.

Three Pixel Jog et HasLayout :
http://www.test.blog-and-blues.org/haslayout/tests/float6.html

Pour les commentaires conditionnels, voir la FAQ du forum.

Modifié par Felipe (22 Apr 2007 - 09:14)

Bonsoir,

Merci Felipe, d'abord pour la bienvenue et ta réponse claire et précise.
J'ignorais complètement ce bug n'ayant jusque là jamais eu à dimensioner 2 divs accollés. Je n'oublierai plus ce principe des 3 pixels !!!
Appliqué la méthode d'un style spécifique < ie7 avec marge négative et ça marche.
Celà ajouté à quelques recherche php, fait que je ne réponds que ce soir, mais avec grand plaisir et respect pour la courtoisie de ce forum.