[CSS] Float et Margin

Bonjour,

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

Par exemple, un test tout con :

Code:

---

1 2 3 4 5 6 7

.gnia{ background:#f00; width:100px; height:100px; float:left; margin-left:20px; }

---

Code:

---

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

:salut:

Citation:

---

Envoyé par BisounoursJos

(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 :mrgreen:

Citation:

---

Envoyé par trotters213

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.

Citation:

---

Envoyé par trotters213

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 :mrgreen:

---

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. ^^

Citation:

---

Envoyé par trotters213

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 :mrgreen:

---

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

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 :D

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.

@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. 8O

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.

Citation:

---

Envoyé par BisounoursJos

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

Citation:

---

Envoyé par BisounoursJos

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:

---

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

---

Code:

---

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 : 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 ? :roll:

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

Citation:

---

Envoyé par BisounoursJos

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

---

Tu sais ce qu'on dit... Avec des si, on mettrait paris en bouteille...
Et si IE était bien programmé... Ce forum serait bien triste...:aie:

Citation:

---

Envoyé par MasterOfChakhaL

Et si IE était bien programmé... Ce forum serait bien triste...

---

C'est vrai, et on ne pourrait plus médire sur ses développeurs. :twisted:

Effectivement IE double la marge du premier élément flottant (si tu en mets un autre à la suite la marge est normale). Il me semble qu'un simple display:inline; sur le flottant suffit à le faire disparaître.

Par contre pour le bug des 3 px c'est une autre histoire et le mieux est d'adopter, quand c'est possible, une configuration qui ne le laisse pas apparaître

Citation:

---

Envoyé par Candygirl

Effectivement IE double la marge du premier élément flottant (si tu en mets un autre à la suite la marge est normale). Il me semble qu'un simple display:inline; sur le flottant suffit à le faire disparaître.

---

En effet ça marche pas mal. Je vais retenir cette solution comme viable et mettre mon topic comme résolu.

Merci beaucoup. =)