Discussion :

[Bisûnûrs]

Bonjour,

Qui pourrait me dire pourquoi IE double les marges quand on utilise un float ?

Par exemple, un test tout con :

Code :

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

1
2
3
4
5
6
7
.gnia{
   background:#f00;
   width:100px;
   height:100px;
   float:left;
   margin-left:20px;
}

Code :

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

<div class="gnia"></div>

Sur Firefox, la marge gauche fait 20 pixels alors que sur IE, la marge gauche fait 40 pixels.

J'ai remarqué que IE ne doublait le marges que lorsqu'il y a un float.

Mais pourquoi ? Et quelle(s) solution(s) adopter ?

Au passage, IE7 n'a plus ce problème.

[trotters213]

(1)Mais pourquoi ? (2)Et quelle(s) solution(s) adopter ?

1. Parce que les types qui ont fait IE, ont fait ce qu'ils ont voulu du coup tu te retrouves avec un navigateur qui ne respecte aucun standard.
2. Faire un lien sur ta page vers le site de Mozilla Firefox en incitant les gens à télécharger Firefox et à utiliser un joli renard de feu plutôt qu'un vilain "E" tout bleu

[Bisûnûrs]

1. Parce que les types qui ont fait IE, ont fait ce qu'ils ont voulu du coup tu te retrouves avec un navigateur qui ne respecte aucun standard.

Admettons que les développeurs d'IE ne sont pas supers doués (tout est relatif, même la relativité) et/ou qu'ils ne veulent pas respecter les standards, il n'y a aucune logique à doubler les valeurs d'un margin lors d'un float, c'est d'un aberrance totale.

2. Faire un lien sur ta page vers le site de Mozilla Firefox en incitant les gens à télécharger Firefox et à utiliser un joli renard de feu plutôt qu'un vilain "E" tout bleu

Je développe un backoffice pour une entreprise online assez connue, donc les commerciaux qui utilisent ce backoffice et de surcroît la haute administration de cette entreprise ne passeront malheureusement jamais à Firefox. ^^

[balu]

2. Faire un lien sur ta page vers le site de Mozilla Firefox en incitant les gens à télécharger Firefox et à utiliser un joli renard de feu plutôt qu'un vilain "E" tout bleu

Le logo représente un panda rouge qui est parfois appelé firefox ou red panda en anglais.

[trotters213]

l'Ailurus fulgens pour être très précis j'ai fait la transcription fire=feu fox=renard.
C'est un peu come tout ceux qui croit que Tux est un pingouin, il n'en est pas un

Pour en revenir au problème je dois avoir le même problème que toi puisque sur le site que je fait, sous Opera et FF le rendu est le même et sous IE, les marges sont plus grandes mais j'y est apssé du temps dessus et je ne vois pas de solutions.

PS : voici le lien comme ça tu pourras me dire si le problème est similaire.

[Bisûnûrs]

@trotters213 : Hum, pour le décalage du menu vers le bas par rapport au logo, ce n'est pas le même problème, mais c'en est un récurrent que j'ai souvent rencontré pour la conception de mes tableaux en div, c'est juste que IE, passe en dessous de ton logo, alors que Firefox se place à côté. Mets une bordure à tes éléments pour t'en rendre mieux compte. Je n'ai pas trouvé de solution pour pallier à ce problème.

De plus je n'arrive pas à comprendre le décalage entre le menu et le contenu.

Sinon, mon problème je l'ai résolu depuis longtemps, j'ai tout simplement fait un <div style="width:20px;float:left"></div>, mais le faire à chaque fois à la place d'une marge c'est lourd.

Autre problème d'IE, si tu donnes une valeur inférieure à 20 pixels à un div, il reste à minimum 20 pixels, tu ne peux pas faire un div de 2px de haut.

[MasterOfChakhaL]

Autre problème d'IE, si tu donnes une valeur inférieure à 20 pixels à un div, il reste à minimum 20 pixels, tu ne peux pas faire un div de 2px de haut.

Faux !!!

Code :

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

1
2
 
<div class="gnia"></div>

Code :

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

1
2
3
4
5
6
7
8
9
10
.gnia{
   background:#0f0;
   width:100px;
   height:2px;
   line-height: 2px;
   font-size: 2px;
   float:left;
   border: 1px solid red;
}

Manifestement, IE reserve toujours la place pour au moins une ligne de texte... C'est donc là qu'il faut agir...

[MasterOfChakhaL]

Qui pourrait me dire pourquoi IE double les marges quand on utilise un float ?

Honnetement, je ne sais pas, j'avais entendu parler d'un bug de trois pixels avec les éléments flottants sous ie (cf http://www.cssplay.co.uk/boxes/floatfix.html )

Sinon, si tu peux remplacer le margin-left par un padding-left sur le conteneur.
Mais si tu enfiles les éléments floats, ca ne va pas le faire...

[Bisûnûrs]

@MasterOfChakhaL : Je suppose que ces deux problèmes ont la même origine en effet.

Edit :

Ah, d'accord, merci pour l'astuce !

Mais à priori, juste définir height:2px aurait dû suffire si IE avait bien été programmé, non ?

Surtout qu'il me semble que le problème persiste sur IE7.