[Résolu] Float correct sous Opera mais nulle part ailleurs

Bonjour,

J'ai fait une rapide recherche mais n'ai rien trouvé qui s'applique directement à mon cas. Comme une image vaut mille mots, voici, graphiquement, mon problème:


Le problème c'est qu'un élément float right décale et prend deux fois plus de place (verticalement) qu'il ne devrait, sous Firefox et IE7 mais pas sous Opéra. Je n'ai pas encore testé avec Konqueror ou Safari. Il s'agit d'un simple formulaire (situé ici avec le CSS ici) mais voilà j'ai un problème d'alignement. Je suis loin d'être un expert en CSS alors peut-être que la solution que j'ai trouvée serait faisable d'une autre (meilleure?) façon. Si c'est le cas je suis tout ouïe. Dans le cas contraire, quelqu'un sait-il comment régler un problème où un élément float prend plus de place verticalement? Selon ce que j'ai pu voir, l'élément float right (le prix, en gras) fait en sorte que chaque ligne occupe le double de la hauteur qu'elle devrait normalement occuper.

Toute idée est la bienvenue!

Merci!
Modifié par Saeletra (23 May 2008 - 21:29)

Bonsoir Saeletra,

Ceci semble fonctionner : (IE6 & 7, FF, Opera, Safari)

<div id="type_inscription">
	<p><input id="reguliere" name="type_inscription" value="reguliere" type="radio"/><label for="reguliere">Inscription régulière (incluant soirée jazz) :<b> 200,00$</b></label></p>
	<p><input id="sur_place" name="type_inscription" value="sur_place" type="radio"/><label for="sur_place">Inscription sur place (incluant soirée jazz) :<b> 250,00$</b></label></p>
	<p><input id="etudiante" name="type_inscription" value="etudiante" type="radio"/><label for="etudiante">Inscription étudiante (incluant soirée jazz) :<b> 65,00$</b></label></p>
	<p><input id="journee" name="type_inscription" value="journee" type="radio"/><label for="journee">Inscription à la journée :<b> 115,00$</b></label></p>
	<p><input id="soiree_jazz" name="type_inscription" value="soiree_jazz" type="radio"/><label for="soiree_jazz">Gala cocktail et soirée jazz :<b> 100,00$</b></label></p>
</div>

A supprimer :

type_inscription b {
float:right;
font-weight:bold;
margin-right:425px;
text-align:right;
}

Cdt,
Sylvain

Bonsoir Sylvain,

Merci de ta réponse rapide. Je me rends compte que j'ai oublié de préciser que je voulais que les prix soient tous alignés vers la droite, c'est-à-dire que l'on puisse facilement les comparer et qu'ils soient légèrement à l'écart de la description du type d'inscription. En enlevant la définition CSS et en les plaçant à l'intérieur du label cela résout le problème du décalage mais du même coup enlève l'alignement.

Désolé de l'erreur! Par contre si tu as une solution pour conserver l'alignement en faisant sauter le décalage, j'en serais très heureux!

Merci encore,

Olivier

Saeletra,

C'est effectivement une donnée non négligeable

Bon, je suis absolument persuadé qu'il y a une explication toute bête pour cette histoire de flottant, et qu'une réponse intelligente ne tardera pas à t'être donnée (Florent si tu passe par là )
En ce qui me concerne, mes lacunes en css et ma méconnaissance des formulaires, ne me permettent pas de te venir en aide efficacement

Néanmoins, je suis un poil "tétu" et en attendant une réponse forcément plus intelligente

Sans changer le code html que je t'ai donné, en rajoutant dans tes déclarations css ce qui suit :

Pour les bons élèves (Safari et Opéra n'auront besoin que de cette déclaration) et les moins bons :

label b {
float:right;
}

Pour Firefox :

html:not([lang*=""]) label b { margin-top:-16px;}

Pour IE, on peut passer par un commentaire conditionnel :

<!--[if IE]> 
<style type="text/css">
label b { margin-top:-16px;}
</style>
<![ endif]-->[#blue] Sans espace avant endif[/#]

Ou cibler (pour le fun ici ce soir uniquement ) les versions du navigateur qui nous intéressent (IE6&7) :
IE6:

* html  label b{ margin-top:-16px;}

IE7:

*+html  label b { margin-top:-16px;}

Et tu devrais avoir une mise en forme quasi identique sur tous ces navigateurs
(tu peux ajouter une marge à droite pour placer ces prix où tu le souhaites )

Bon évidemment c'est pour le fun, ce genre de "bidouilles" est ingérable et non souhaitable

As-tu pensé à un tableau de mise en forme ?

Je dors et je repasse dire moins de bétises

Bon courage pour la suite,
Cdt,
Sylain

Sylvain,

Merci beaucoup de ton aide, je ne connaissais pas tous les trucs pour les codes conditionnels au navigateur. Je connaissais bien le fameux * html de IE6 mais pas l'équivalent pour Firefox. Si personne d'autre ne peut trouver la raison à savoir pourquoi certains navigateurs incluent une marge d'une ligne dans mon cas, j'utiliserai ce genre de bidouillage, qui, somme toute, donne un bon résultat.

Qu'entends-tu au juste par tableau de mise en forme? Veux-tu dire un vrai tableau HTML mis en forme grâce au CSS? Si oui j'y ai effectivement pensé mais la personne pour laquelle je fais ce formulaire ne veut malheureusement pas de tableau.

Merci encore,

Olivier

Oups, petite erreur, message posté en double.
Modifié par Saeletra (23 May 2008 - 15:28)

Bonjour Saeletra,

Oui c'est à cela que je pensais concernant les tableaux, mais c'est effectivement ton client qui décide (tu peux le conseiller tout de même... )
Concernant mes petits tests nocturnes (même s'ils fonctionnent) cela reste du domaine de l'amusement, il y a forcément une explication logique voire même évidente au comportement des flottant, be patient, tu auras (moi itou) une bien meilleure proposition

Je me demande s'il n'y a pas un "soucis" avec les line-height ?!

Cdt,
Sylvain

Bonjour,

Saeletra a écrit :
Si personne d'autre ne peut trouver la raison à savoir pourquoi certains navigateurs incluent une marge d'une ligne dans mon cas

Explication: mauvaise implémentation de float dans certains navigateurs. Il me semble que c'est le cas d'Internet Explorer 6-7, de Firefox 2-3, de Safari 2 (peut-être corrigé dans Safari 3 ou Safari 3.1). Ces navigateurs font passer les flottants à la ligne (en quelque sorte) alors qu'ils devraient rester sur leur ligne «de départ». À vérifier dans la spécification CSS 2.1.

Saeletra a écrit :
j'utiliserai ce genre de bidouillage, qui, somme toute, donne un bon résultat

Un peu casse-gueule tout de même (le hack pour Firefox...). Autant partir sur un tableau, ou peut-être tenter du display: inline-block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css">
	body {
		width: 400px;
		margin: 100px auto;
	}
	p {
		background: #eee;
	}
	p label {
		cursor: pointer;
		-moz-user-select: none;
	}
	p span {
		display: inline-block;
		width: 250px;
	}
	p em {
		font-weight: bold;
	}
	</style>
</head>

<body>
<p>
	<input type="checkbox" id="machin1" />
	<label for="machin1">
		<span>Bla bla du texte…</span>
		<em>Et voilà.</em>
	</label>
</p>
<p>
	<input type="checkbox" id="machin2" />
	<label for="machin2">
		<span>Bla bla du texte…</span>
		<em>Et voilà.</em>
	</label>
</p>
<p>
	<input type="checkbox" id="machin3" />
	<label for="machin3">
		<span>Bla bla du texte…</span>
		<em>Et voilà.</em>
	</label>
</p>
</body>
</html>

Compatible tous navigateurs sauf Firefox 2. Firefox 3 apporte le support de display: inline-block. Vérifier que ça passe dans IE 6-7 tout de même, mais ça devrait être le cas.
On peut tout à fait envisager l'utilisation d'une telle solution. Même si ça ne marche pas dans Firefox 2, le rendu dégradé est très correct... et d'ici six mois la moitié des utilisateurs de Firefox aura la version 3.
(Au fait, ne pas faire attention au -moz-user-select, je m'amusais un peu.)

Mais si vraiment ça bloque, il faudra faire quelque chose du genre:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css">
	body {
		width: 400px;
		margin: 100px auto;
	}
	p {
		overflow: hidden; /* empêche le dépassement des flottants */
		width: 100%; /* hasLayout pour IE6 */
		background: #eee;
		text-align: right;
	}
	p input {
		float: left;
	}
	p span {
		float: left;
		width: 250px;
		text-align: left;
	}
	p em {
		font-weight: bold;
	}
	</style>
</head>

<body>
<p>
	<input type="checkbox" id="machin1" />
	<label for="machin1">
		<span>Bla bla du texte…</span>
		<em>Et voilà.</em>
	</label>
</p>
<p>
	<input type="checkbox" id="machin2" />
	<label for="machin2">
		<span>Bla bla du texte…</span>
		<em>Et voilà.</em>
	</label>
</p>
<p>
	<input type="checkbox" id="machin3" />
	<label for="machin3">
		<span>Bla bla du texte…</span>
		<em>Et voilà.</em>
	</label>
</p>
</body>
</html>

(Testé dans Firefox 2 et 3 mais pas ailleurs.)

Ah je savais bien que tu passerais par là

Florent a écrit :
Un peu casse-gueule tout de même (le hack pour Firefox...). Autant partir sur un tableau, ou peut-être tenter du display: inline-block.

Tout à fait, je ne disais ni ne conseillais pas autre chose
C'est curieux tout de même ce rendu, je n'ai rien trouvé de cohérent à ce propos (propre au label, le line-height ?)

Concernant tes tests, il me semble que le 2ème remporte le suffrage à l'unanimité ok sous IE6 et IE7, FF2, Opéra et Safari (3.1.1)

Comme je le disais précédemment seuls Opéra et Safari s'en sorte sans soucis avec uniquement la seule déclaration "float:right"

Cdt,
Sylvain

Merveilleux! Merci à tous deux de vos savants conseils. J'ai mis en place la deuxième solution, testée sous IE, Firefox, Opéra et Safari et tout fonctionne à merveille.

Étant assez débutant en mise en forme CSS je ne voulais pas accuser trop vite les navigateurs mais puisque ça semble être le cas, ça m'enlève un poids de sur les épaules. Je déteste ce genre de problème où la théorie stipule que tout devrait fonctionner mais où à cause de problèmes hors de mon contrôle ce n'est pas le cas.

Enfin, merci encore, à tous les deux, pour votre aide. J'ai une autre question sans aucun rapport avec mon problème et je me dépêche donc de démarrer une nouvelle discussion pour la poser, puisque sur les forums Alsacréations on trouve toujours la bonne réponse.

Olivier