28173 sujets

CSS et mise en forme, CSS3

[résolu] Ie et les décalages d'éléments flottants.

Salut à tous,
j'aimerais comprendre un comportement douteux de ie dans le cas suivant (je vous donne le source):

HTML :

<html>
<head>
	<style type="text/css">
		@import url(mep.css);
	</style>
</head>
<body>
	<div id="rectangle_rouge">
		<div id="rectangle_jaune_gauche"></div>
		<div id="rectangle_bleu">
			<a id="carre_vert" href=""></a>
		</div>
		<div id="rectangle_jaune_droite"></div>
	</div>
</body>
</html>

et le CSS (mep.css ici):

body{
background-color:#000;
margin:auto;
}

#rectangle_rouge{
background-color:red;
width:100%;
height:200px;
}

#rectangle_jaune_gauche{
float:left;
background-color:yellow;
width:40px;
height:200px;
margin:0;
padding:0;
}

#rectangle_bleu{
position:absolute;
left:50%;
background-color:blue;
width:700px;
height:100px;
margin-left:-350px;
margin-top:100px;
padding:0;
}

#carre_vert{
display:block;
float:left;
background-color:green;
height:40px;
width:40px;
margin-left:20px;
}

#rectangle_jaune_droite{
float:right;
background-color:yellow;
width:40px;
height:200px;
margin:0;
padding:0;
}

celà nous donne donc une div rouge contenant 2 div jaunes aux extémités, une div bleu en bas au centre contenant une div verte flottante.

C'est au niveau de la div verte que se situe le problème:
lorsque je décale celle-ci sur la droite par un subtile margin-left Smiley langue , Firefox effectue le déplacement correct mais ie le fait d'un facteur 2.
En bref si j'effectue un margin-left de 10px sur mon carré vert, ie va le déplacer de 20.
Alors voilà, pourriez-vous, si possible, m'expliquer ce comportement et si il existe une solution "normale" pour le corriger ?
Merci.
Modifié par RaGe (03 Jul 2006 - 17:40)
Bonjour RaGe,

C'est un bug « classique » d'IE qu'on croise assez souvent ici : The IE Doubled Float-Margin Bug
Comme tu verras dans cet article, la solution est d'ajouter {display:inline}.

A mon avis tu ne pourras pas avoir une explication de fond sur le pourquoi de ces comportements. Comme c'est écrit dans l'article :
a écrit :
Why is this happening? Don't ask such silly questions! This is IE, remember? Conformance with the specs is only to be hoped for, not expected.
Merci beaucoup Alan pour cette réponse,

il faut quand même avoué que c'est un bug mineur mais bon, à force de les accumuler IE en devient énervant (nan ?! sans blague ?).

Mon block flottant étant un <a> que je transforme en block, je ne peux pas utiliser le {display:inline} comme fixe, donc j'ai recours à un hacking que l'on m'a gentiment appris, à savoir spécifier 2 margin-left dont un en !important pour FireFox.
Comme il s'agit d'un élément inline par défaut, dans ce cas tu n'as pas besoin d'ajouter display:inline, et il te suffit d'enlever display:block qui ne sert à rien (puisqu'il y a le float) sinon à être confronté avec ce bug.
La personne qui t'a conseillé un hack pour ce bug t'a donné un bien mauvais conseil...

PS: n'oublie pas d'ajouter le tag [résolu] dans le titre du sujet si tu considères que le problème est réglé.
Modifié par Alan (03 Jul 2006 - 16:53)
Bonjour,
Pour compléter ce que dit Alan, l'urilisation du !important repose sur un
default d'implémentation de IE suceptible d'être corrigé dans une version
ultèrieure, IE prendra alors la dernière propriété comme les autres navigateurs.

Pour les variations qui ne peuvent être corrigées qu'avec l'ajout d'un
hack pour IE, tu dois utiliser une css pour IE via les commentaires conditionnels.
Modifié par Hermann (03 Jul 2006 - 16:00)
Merci Hermann ! Très intéressant le sujet des commentaires conditionnels.
Je regarde ça de suite.
Et un grand merci à toi Alan, je me suis tout simplement mis en situation de bug inutilement avec mes {display:block;} sans en être conscient.
Sujet clos
Aller à