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

**Bisûnûrs** · 20/03/2007, 15h35

Coucou.

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

Je bloque sur un nouveau problème que voici :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

Merci !

**magnus2005** · 20/03/2007, 15h48

tu as quoi comme DOCTYPE ?

**Bisûnûrs** · 20/03/2007, 15h50

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

**magnus2005** · 20/03/2007, 15h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

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 .. :/

**Candygirl** · 20/03/2007, 18h59

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.

**Bisûnûrs** · 21/03/2007, 08h59

@Candygirl : Encore une fois je m'incline.

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 !

**magnus2005** · 21/03/2007, 09h44

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

En supprimant le float left aussi ça fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

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.

**Candygirl** · 21/03/2007, 10h04

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

En fait si, ça marche pour autant que le dernier div soit doté de layout

Finalement, il y a un brin de logique dans IE6

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>