Bug mozilla et caractere 'retour a la ligne'

Bonjour,
voici un petit problème de présentation sous firefox 1.5 (et netscape).
tout d'abord le code
feuille de style

label {
display: inline; 
float:left;
width: 150px; 
}
.conteneur {
   line-height: 25px;
}

le code html qui ne s'affiche pas correctement :

div class="conteneur">
<label for="date">Date :</label><input type="text" id="date"/>[b]<br/>[/b]
<label for="nom">Nom :</label><input type="text" id="nom"/><br/>
</div>

le code qui s'affiche correctement :

<div class="conteneur">
<label for="date">Date :</label><input type="text" id="date"/>[b]
<br/>[/b]
<label for="nom">Nom :</label><input type="text" id="nom"/><br/>
</div>

la seule différence entre ces deux codes est le caractère 'retour à la ligne'.
le bug constaté : les champs ne sont plus alignés les uns sous les autres.

je n'arrive pas à comprendre pourquoi le caractère 'retour à la ligne' intervient dans le rendu final.

merci pour vos réponses

Bonjour,

Pour information, display:inline et float:left sont complètement incompatibles.

Par ailleurs, de mon coté, l'alignement des champs est parfait sous FF quelle que soit la position du <br/> dans le code.

Bonjour,

harold-M- a écrit :

je n'arrive pas à comprendre pourquoi le caractère 'retour à la ligne' intervient dans le rendu final.

<br> est en conflit avec le float de label.

display:inline; est suffisant pour le résultat que tu cherches.

<HS>
@ Xavier :

Xavier a écrit :
display:inline et float:left sont complètement incompatibles

C'est aussi ce que je croyais jusqu'à récemment, mais en fait indiquer display:inline pour un flottant permet d'éviter un bug d'IE (qui double les éventuelles marges) :
Positioniseverything
</HS>

@xavier
j'ai les problèmes sous ff1.5 et netscape 8.1
voici une image du résultat


@vero
si j'enlève 'float:right', ff (au moins) ne tient pas compte de la largeur imposé au label. les champs input viennent se coller au label.

a écrit :
<br> est en conflit avec le float de label.

on n'a pas le droit de mettre un br et un label ensemble?

Nan en fait inline et float sont en comflit. Ses propriétés sont incompatible.
Moi j'aurait fait :

label {
clear: left;
float:left;
width: 150px; 
}

Ceci dit j'avais jamais utilisé de label .. quel est l'interet ?
Modifié par dhjapan (14 Apr 2006 - 12:35)

a écrit :
<HS>
@ Xavier :

Xavier a écrit :
display:inline et float:left sont complètement incompatibles


C'est aussi ce que je croyais jusqu'à récemment, mais en fait indiquer display:inline pour un flottant permet d'éviter un bug d'IE (qui double les éventuelles marges) :
Positioniseverything
</HS>

Non mais ca n'est pas hors sujet, au contraire. Je suis d'accord sur l'existence de ce hack (pour éviter le bug de la double marge), mais il faut savoir à toutes fins utiles que la valeur calculée de la propriété display sera block et non pas inline pour les navigateurs compatibles. C'est pourquoi je parlais d'incompatibilité, et je maintiens, il ne faut pas compter que la propriété display:inline soit prise en compte.

a écrit :
on n'a pas le droit de mettre un br et un label ensemble?

Ce n'est pas interdit bien sur, mais cela n'empêche pas de flotter, donc tu n'es pas satisfait. Il me semble que la solution adaptée consiste à :
- retirer les <br />
- faire flotter label et input
- faire un clear sur label

Par défaut, label est une balise en-ligne, donc, le display:inline; est inutile et c'est le float: left; qui le fait passer en display:block; (justement)

Ensuite, pourquoi ne pas encadrer label et input dans une balise <p>

label {
   float:left;
   width: 150px; 
}

<p><label for="date">Date :</label><input type="text" id="date"/></p>

a écrit :
Ceci dit j'avais jamais utilisé de label .. quel est l'interet ?

La balise label permet de décrire le champs qui va suivre et surtout de le repérer dans un mode de navigation non visuel .
Il est indispensable à l'accessibilité des champs de formulaire.
Modifié par Vero (14 Apr 2006 - 14:14)

Merci

@Xavier : Ok, merci pour ces indications plus précises
Modifié par Jihel (14 Apr 2006 - 14:21)

merci pour tous cos commentaires et éléments de réponses.

si j'ai bien compris il n'y a pas d'elt theorique pour expliquer le fait qu'en rentrant un symbole 'retour a la ligne' (pour le CSS) mais c'est plutôt le fonctionnement de ff qui perturbe la présentation.

Non, je dirais plutôt que le float du deuxième label est contrarié par le retour de ligne : c'est comme si il voulait floater à côté ...

C'est plus un comportement normal lié à une "mauvaise" définition des propriétés qu'un défaut FF.

Ensuite, chaque navigateur interprète un défaut ou une erreur de codage.

Le fait de mettre ton couple label/ input dans un bloc tel que <p> fait que le float ne s'applique qu'à l'intérieur de ce bloc.


Modifié par Vero (14 Apr 2006 - 14:49)

a écrit :
mais c'est plutôt le fonctionnement de ff qui perturbe la présentation.

Cette formulation me parait bien malheureuse. FF a un rendu correcte dans ce contexte (et il se trouve que IE également, (en précisant explicitement la hauteur des blocs, les 2 navigateurs ont le même rendu)) et FF ne perturbe rien. Je crois que c'est à toi de t'adapter à CSS 2.1 et de prévoir le code correspondant à ce qui te plait.

a écrit :
Le fait de mettre ton couple label/ input dans un bloc tel que <p> fait que le float ne s'applique qu'à l'intérieur de ce bloc.

Oui mais est-il bien raisonnable de résoudre un problème de présentation par une modification de la structure du document ? En clair le <p> a -t-il un sens véritable pour ce contenu ?

Xavier a écrit :
Oui mais est-il bien raisonnable de résoudre un problème de présentation par une modification de la structure du document ? En clair le <p> a -t-il un sens véritable pour ce contenu ?

Il est sûrement très raisonnable de résoudre un problème de présentation par une modification du code, surtout si ce dernier a du sens concernant le contenu :

traduction W3C a écrit :

9.3 Les lignes et les paragraphes

Les auteurs découpent habituellement leurs idées et leurs arguments en paragraphes successifs. Cette organisation des informations en paragraphes n'est pas touchée par la manière dont les paragraphes sont présentés : le contenu du paragraphe, qu'il soit entièrement justifié ou seulement justifié à gauche, est toujours le même.

Le balisage HTML qui définit un paragraphe est clair : l'élément P contient un paragraphe.

Il existe un débat sur l'utilisation de <p> dans le sens de ta question, mais je ne le trouve plus ...

Autre argument : c'est comme cela qu'on fait !


Modifié par Vero (15 Apr 2006 - 21:03)

a écrit :
Il est sûrement très raisonnable de résoudre un problème de présentation par une modification du code, surtout si ce dernier a du sens concernant le contenu ...

Autre argument : c'est comme cela qu'on fait !

Je suis un peu déçu par l'argumentation. La définition du W3C est parfaite, mais n'éclaire pas la question dans ce contexte.
Personnellement je trouve l'élément <p> déplacé, comme l'est probablement <div class="conteneur">.
De toute manière seul le concepteur du contenu peut en définitive trancher si le découpage en paragraphe (ou en fieldset, ou en div...) a un sens. Ce choix est de toute façon issue d'une réflexion parfaitement orthogonale à la problématique de présentation. C'est a dire qu'il n'est pas possible pour résoudre la question de la présentation supposer qu'il y aura nécessairement des éléments <p>.

je reviens sur le sujet.

j'ai opté pour mettre les "label" et "inputs" en flottant. j'ai mis un clear:left sur les labels comme tu le proposai vero.
si la solution marche sous ff, elle ne fonctionne pas du tout sous ie : les labels vont biens à la ligne mais les champs inputs restent sur la premiere ligne.
voici le code :

<html>
<head>
	<title></title>
	<style>
	
label {
	float:left; 
	clear :left;
}

input
{
	float:left;
}
	</style>
</head>
<body>
<label>annee : </label><input type="text" value="annee"/>
<label>jour : </label><input type="text" value="jour"/>
</body>
</html>

une idée peut être

personne a une idée