[IE] Répète le margin-bottom

Version imprimable

Coucou. :aie:

Aujourd'hui j'ai décidé de relever la liste des bugs IE. :roll:

Je bloque sur un nouveau problème que voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div style="width:400px"> <div style="margin-bottom:15px;background:#0ff"> A </div> <div style="float:left;background:#0f0;width:400px"> B </div> <div style="background:#f09"> C </div> </div>
Dans le cas présent, IE6 (bug corrigé sur IE7 visiblement) me répercute le margin-bottom du premier div sur le second.

Avez-vous trouvé le moyen de corriger ce beugallamormoileneux ? :mrgreen:

Merci !

20/03/2007, 15h48
magnus2005

tu as quoi comme DOCTYPE ?
20/03/2007, 15h50
Bisûnûrs

Peu importe le DOCTYPE, ça le fait avec tous ceux que j'ai essayé, HTML ou XHTML.

Tu as essayé en forçant le margin bottom a 0. ?

Code:

1
2
3
4
5
<div style="width:400px">  
<div style="margin-bottom:15px;background:#0ff">  A </div> 
 <div style="margin-bottom:0;float:left;background:#0f0;width:400px">  B </div>  
<div style="background:#f09">  C </div> 
</div>

20/03/2007, 16h09
Bisûnûrs

Citation:

Envoyé par magnus2005

Tu as essayé en forçant le margin bottom a 0. ?

Je n'avais pas essayé, non, mais visiblement ça n'a aucune incidence .. :/
20/03/2007, 18h59
Candygirl

Ce comportement est induit par le bug des 3px d'IE6. Si tu attribues un width de 403px ou plus à ton div conteneur tu verras qu'il n'y a plus ton espace. T'expliquer exactement le raisonnement D'ie, par contre, je ne saurais pas... ;)

De même si tu places ton dernier conteneur aussi en float left tu n'auras plus le pb.
21/03/2007, 08h59
Bisûnûrs

@Candygirl : Encore une fois je m'incline. :hola:

C'est vrai que si je mets 402 à la place de 403 ça ne fonctionne plus.
Donc, comme mon design est fixe et qu'augmenter la taille de 3px de mon div conteneur est inconcevable, je vais prendre la deuxième solution, soit mettre un float sur le dernier div. =)

Merci à toi !

Ceci est du domaine de l'etrange (musique X files en arriere plan)

En supprimant le float left aussi ça fonctionne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TEST HTML</title>
<style type="text/css">
 .main {width:400px; }
    .a {margin: 0px 0px 15px 0px;background:#0ff; }
    .b {background:#0f0;width:400px; }
.c {background:#f09; }
</style>
</head>
<body >
<div class="main">  <div class="a" >  A </div> 
<div  class="b">  B </div>
<div class="c" >  C </div> </div>
</body>
</html>

21/03/2007, 09h58
Bisûnûrs

Citation:

Envoyé par magnus2005

En supprimant le float left aussi ça fonctionne

Oui, je sais, mais j'ai besoin de ce float:left. ^^

Là j'ai épuré le code au maximum pour reproduire le bug avec le minimum de code.

Citation:

Envoyé par magnus2005

En supprimant le float left aussi ça fonctionne

Effectivement je me demandais aussi le pourquoi du float ici ...
EDIT: @Bisûnûrs je me disais aussi que tu avais du simplifier et donc que le float était pas là pour rien ;)

En fait le bug des 3px apparaît lorsqu'on a du contenu dans le flux, adjacent au flottant (dans ce cas, le 3ème div se serait placé à côté du flottant s'il avait eu la place, d'où l'apparition du bug).

Plus de float = plus de problème, tout en float = plus de problème non plus :)

Ce qui m'amène en fait à une autre solution, pour autant que le float soit requis:
mettre un clear sur le dernier div pour qu'il ne soit plus vu comme adjacent par IE. Mais bon, faut pas rêver; ça ne marche pas :aie:

En fait si, ça marche pour autant que le dernier div soit doté de layout :yaisse2: Finalement, il y a un brin de logique dans IE6 :mouarf:
Code:

1 2 3 4 5 <div style="width:400px"> <div style="margin-bottom:15px;background:#0ff"> A </div> <div style="float:left;background:#0f0;width:400px"> B </div> <div style="background:#f09;clear:left;width:100%;"> C </div> </div>

21/03/2007, 11h04
Bisûnûrs

Citation:

Envoyé par Candygirl

Finalement, il y a un brin de logique dans IE6 :mouarf:

La logique d'IE6 n'apparaît-elle que lorsque l'on doit corriger nous-mêmes les bugs illogiques de celui-ci ? :roll:

Vous avez 4 heures. :aie:

En tout cas félicitations pour la trouvaille de toutes ces solutions à tous ces bugs. =)
21/03/2007, 19h53
magnus2005

Trop forte Candygirl,
perso en general je renonce,
quand je parviens pas à faire afficher les DIV correctement sous IE 6 je repasse en TABLE