28220 sujets

CSS et mise en forme, CSS3

[résolu] Bug IE, marge qui augmente quand on lui dit de diminuer.

Bonjour,
J'ai un bug très bizzare : quand je diminue une marge dans le code CSS, celle-ci augmente graphiquement.
Cela fait maintenant 2 heures que je m'acharne à comprendre ce bug, mais sans résultat. J'ai supprimé étape par étape des bouts de code de ma page en vérifiant à chaque fois que cela n'avais pas d'influence sur le bug. J'ai donc cerné au maximum le bug. Voici le code (tous ce qui est dedans est à priori utile pour que le bug fonctionne convenablement Smiley lol ) :

<style>

h3  {
margin-top:20px /*changer 20px par 15px : la marge est plus grande !?*/
}

p {
margin:5px 0 0 25px;
line-height:1.3em;
}

#cdr1 {
width:284px;
}

#cdr1 h1, #cdr1 h3 {
clear:left;
}

#cdr1 .image {
width:100px;
height:70px;
background-color:green;
float:left;
margin:5px 10px 10px 25px;
}

</style>

<div id="cdr1">
		
		<h3> dgkjkl jkljg dklfl jgkl</h3>
		<div class="image"></div>
		<p>fsd jkldfj klkj</p>
		<p>fd jksdj klgj kl sdfjkl</p>

		<h3> dgkjkl jkljg dklfl jgkl</h3>
		<div class="image"></div>
		<p>fsd jkldfj klkj</p>
		<p>fd jksdj klgj kl sdfjkl</p>

		<h3> dgkjkl jkljg dklfl jgkl</h3>
		<div class="image"></div>
		<p>fsd jkldfj klkj</p>
		<p>fd jksdj klgj kl sdfjkl</p>

</div>


Voilà, c'est donc en changeant la margin-top de h3 qu'on se rend compte du probleme (faire l'essai avec 20px et 15px)

Une idée de l'origine de ce bug mistérieux ?

PS : J'ai remplacé les images par des div pour que vous puissiez les voir.
Modifié par mathmax (07 Nov 2005 - 14:51)
Bonjour,

Je viens ce copier coller ton code dans mon éditeur, et je n'ai pas ce problème. Une page en ligne avec donc tous les éléments serait un plus pour la résolution de ton problème.

ps: penses également aux 5 posts que tu as laissé à l'abandon dernièrement. Un problème après l'autre Smiley cligne .
désolé mais je viens de reéxucuter ce code (en le copiant collant dans mon éditeur). Es-tu sûr de l'avoir éxécuté avec IE ?

Pour ce qui est des 5 posts laissés à l'abandon, je ne vois sincèrement pas de quoi tu veux parler. J'ai marqué [résolu] à chaque fois que j'ai obtenu réponse à mes questions. Pourrais tu m'indiquer lesquels ?
Bonjour,

Le code ci-dessus ne provoque pas de bug sur les marges des h3 dans IE5.01 et IE6.0 Windows.

Dans IE5.5, l'absence de point-virgule entre la propriété margin-top:20px et le commentaire /* ... */ fait que la propriété est ignorée.

(En revanche, les 3 versions d'IE Windows buguent sur la double marge de l'image flottante flottant et sur le three pixels jog des paragraphes).
Modifié par Laurent Denis (31 Oct 2005 - 08:03)
Re-bonjour,

Ah, effectivement, je ne regardais que le premier h3.

Il semble que ce soit un bug de fusion des marges verticales.

Selon CSS2.1, la marge finale au dessus des h3 est le résultat d'une double contrainte :
- la marge inférieure de .image. S'agissant d'un flottant, cette marge est une contrainte incompressible qui devra être respectée dans tous les cas de figure.
- la distance entre h3 et p, qui est le résultat de la fusion de leurs marges (fusion des marges en flux). Si cette distance est suffisante pour la contrainte précédente soit respectée, c'est elle qui définit la marge finale au dessus des h3. Si elle est insuffisante, c'est la contrainte précédente qui l'emporte.

IE Windows ne prend pas en compte correctement ces contraintes :
- quand la distance entre h3 et p est insuffisante pour respecter la première contrainte, la marge finale au dessus des h3 est égale à la somme marge de .image + marge de h3 au lieu d'être égale à marge de .image seule. La marge finale est donc incorrectement trop grande (de 15px dans l'exemple ci-dessus).
- quand la distance entre h3 et p devient suffisante pour que soit respectée la première contrainte, IE retombe sur le comportement normal. La marge finale se réduit alors brusquement.

A noter: Opera 8.5 émule partiellement ce bug d'IE Win. En revanche, Merlin (Opera 9.0) respecte CSS2.1 sur ce point, tout comme Firefox.
Modifié par Laurent Denis (31 Oct 2005 - 15:20)
Merci pour cette explication! Smiley smile
Si j'ai bien compris il n'y a fusion entre la marge du bas de .image et la marge du haut de h3 que si cette dernière est supérieur à la première. (car en fait la margin-bottom de p est nulle donc n'entre pas en jeu ici).
Pour corriger le bug, il suffierait donc que je mette à 0 mes margin-bottom des .image ?
Modifié par mathmax (01 Nov 2005 - 12:27)
A priori ça ne change rien si je met les margin-bottom de .image à 0. Le bug est à présent visible entre 5 et 10px pour la margin-top de h3.
Voici le code :

<style>

h3 {
margin-top:10px; /*changer 10px par 5px : la marge est plus grande !?*/
}

p {
margin:5px 0 0 25px;
line-height:1.3em;
}

#cdr1 {
width:284px;
}

#cdr1 h1, #cdr1 h3 {
clear:left;
}

#cdr1 .image {
width:100px;
height:70px;
background-color:green;
float:left;
margin:5px 10px 0 25px;
}

</style>
</head>
<body>
<div id="cdr1">

<h3> dgkjkl jkljg dklfl jgkl</h3>
<div class="image"></div>
<p>fsd jkldfj klkj</p>
<p>fd jksdj klgj kl sdfjkl</p>

<h3> dgkjkl jkljg dklfl jgkl</h3>
<div class="image"></div>
<p>fsd jkldfj klkj</p>
<p>fd jksdj klgj kl sdfjkl</p>

<h3> dgkjkl jkljg dklfl jgkl</h3>
<div class="image"></div>
<p>fsd jkldfj klkj</p>
<p>fd jksdj klgj kl sdfjkl</p>

</div>


Du coup je ne comprends plus trop l'explication car on ne peux jamais se trouver dans ce cas de figure avec la margin-bottom de .image mise à 0 :

a écrit :
- quand la distance entre h3 et p est insuffisante pour respecter la première contrainte, la marge finale au dessus des h3 est égale à la somme marge de .image + marge de h3 au lieu d'être égale à marge de .image seule. La marge finale est donc incorrectement trop grande (de 15px dans l'exemple ci-dessus).


Smiley sweatdrop
Modifié par mathmax (01 Nov 2005 - 12:19)
Sujet clos
Aller à