28173 sujets

CSS et mise en forme, CSS3

Float + IE6 = Marges problèmatiques

Bonjour à tous,
j'utilise depuis un bon moment les floats, mais j'ai un problème de mise en page à chaque fois sur IE6.
Voici un extrait du code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
	 	<title>Test de Floats</title>
		<style type="text/css">
		<!--
			#blocPrincipal{
				background: #FFF; color: #000; width: 950px;
			}
			#bloc1{
				float: left; background: #F00;  width: 550px;
			}
			#bloc2{
				margin-left: 550px;
				background: #0F0;  width: 400px;
			}
		-->
		</style>
	</head>
	<body>
		<div id="blocPrincipal">
			<div id="bloc1">
				Bloc 1
			</div>
			<div id="bloc2">
				Bloc 2
			</div>
		</div>
	</body>
</html>


Sur l'ensemble des navigateurs, le bloc rouge et vert sont alignés, alors que sur IE6 le bloc vert se retrouve à la ligne et je suis obligé à chaque fois de faire une autre feuille de style avec commentaires conditionnels pour retirer 2px à un des blocs pour corriger ce problème. J'aimerai donc savoir si quelqu'un sait d'où vient ce problème, s'il a une solution alternative pour le corriger ou une méthode plus appropriée pour l'éviter. Cependant je veux que la largeur totale de mes deux blocs soient égales au bloc conteneur pour des raisons d'agencement graphique vis à vis de mes design.

Merci.
Modifié par T.E.I. (23 May 2007 - 20:55)
Ok merci, grâce à ton aide je suis tombé sur ce topic détaillant le problème :
http://www.test.blog-and-blues.org/haslayout/tests/float6.html
ainsi que celui-ci pour le corriger :
http://forum.alsacreations.com/topic.php?fid=4&tid=14989&s=jog#p117066

Ok, donc en gros, on à ce bug à chaque fois avec cette méthode, pour un rendu des moins hasardeux selon qu'on ai le layout ou non... Maintenant que le problème est identifié, je t'en remercie grandement, j'ai une autre question : Y a-t-il une autre méthode pour avoir un rendu identique multi-navigateurs tout en esquivant ce bug ? Car le problème de la solution avancée (en plus d'être dans l'obligation d'utiliser les commentaires conditionnels) est d'enlever la taille du bloc conteneur, mais il m'arrive parfois de vouloir faire un design centré avec la propriété margin: auto et donc je suis contraint d'utiliser une largeur pour le bloc conteneur.
Modifié par T.E.I. (23 May 2007 - 21:36)
Je ne me rappelle pas bien, mais il me semble qu'on peut s'en tirer en utilisant une marge négative de 3 pixels quelque part (toujours via les commentaires conditionnels).
Oui oui, tout à fait, c'est d'ailleurs la méthode recommandée dans mon second lien, je viens de tester, ça marche apparemment :

position: relative;
left: -3px;
margin-right: -3px;


Bon merci à toi en tout cas Smiley cligne .

Si d'autres personnes ont des idées à suggérer pour avoir une alternative pour se passer des commentaires conditionnels, n'hésitez pas. Merci.
a écrit :
Si d'autres personnes ont des idées à suggérer pour avoir une alternative pour se passer des commentaires conditionnels, n'hésitez pas.
Mmmh, un bon vieux hack IE de derrière les fagots ? Smiley lol

Sérieusement, pourquoi vouloir éviter les commentaires conditionnels ? C'est la manière la plus propre, et de loin la plus sûre, de corriger les différents bugs d'IE Smiley cligne
Oui tout à fait d'accord avec toi, mais s'il existe une solution sans, et donc plus facile en mettre en place (surtout pas de hack douteux lol) pourquoi ne pas l'essayer et la comparer, bref, j'aime utiliser les commentaires conditionnels qu'en derniers recours, car même si c'est la façon la plus propre, c'est toujours plus agréable de s'en passer. Smiley ravi (mais heureusement qu'ils existent).
T.E.I. a écrit :
Si d'autres personnes ont des idées à suggérer pour avoir une alternative pour se passer des commentaires conditionnels, n'hésitez pas. Merci.

Ne pas donner de largeur au bloc de droite, mais le laisser se dimensionner naturellement grâce à son margin-left. Ainsi, on évite de conférer le layout au bloc de droite (du moins si on ne lui donne pas non plus de hauteur fixe avec la propriété height...), et on se retrouve alors dans le cas « classique » du Three Pixel Jog : le texte est repoussé de 3px, mais pas le bloc lui-même.

Quoi qu'il en soit, donner une largeur fixe « pour que ça tienne pile poil » à un bloc qui jouxte un flottant, c'est suicidaire étant donné la faculté d'IE à faire passer ce genre de bloc à la ligne au moindre poil qui dépasse. Smiley cligne
Sujet clos
Aller à