Css : display: run-in

[calimo]

Est-ce que c'est FF qui ne supporte pas le "display: run-in" comme défini dans les spécification du css2 ou est-ce que c'est moi qui ai mal compris ?

[Benoit]

Félicitations, tu as trouvé un bug à quatre chiffres

http://bugzilla.mozilla.org/show_bug.cgi?id=2056

[calimo]

Ce qui veux dire qu'il est terriblement ancien ? Donc qu'il ne risque pas d'être réglé de si tôt ? Dommage, je l'aurais bien utilisé sur une de mes pages !
Y a-t-il une solution de remplacement ? inline ne semble pas marcher !

[calimo]

inline ne semble pas marcher !

Je retire ce que j'ai dit, il doit simplement être sur l'élément suivant

EDIT
Non, pardon, sur les deux éléments
/EDIT

EDIT2
En fait non, ça me mets tout sur une seule ligne vu que j'en ai plusieurs à la suite évidemment !
Il va falloir que je mette des <br /> partout A moins que le pseudo-style :after puisse insérer des retours à la ligne ?
Visiblement c'est le même combat avec "compact".
/EDIT2

[Benoit]

Simplement float:left sur ton titre, non? Ou je n'ai pas compris à quoi ça servait

[calimo]

Pas vraiment. Jusque-là j'avais un truc du genre

Code : Tout sélectionner

<p><strong>mot à définir</strong> : définition</p>

Ça marche très bien, mais ça ne mets pas en valeur la structure, donc je me disais si j'arrive à faire un truc du genre

Code : Tout sélectionner

<h3>mot à définir</h3><p>définition</p>

ce serait vachement plus logique, et donc le run-in m'aurais permis de garder cette même mise en page, tandis que là c'est compliqué, j'aimerais vraiment que ça garde le même aspect, dans la même ligne

[Benoit]

Si c'est une liste de définitions, il existe précisément dl, dd et dt

[bobo]

Si c'est une liste de définitions, il existe précisément dl, dd et dt

C'est exact, mais ça ne résoud pas le problème de l'absence de display: run-in. Mais peut-être que d'utiliser float: left sur le <dt> serait suffisant, non ?

[calimo]

Effectivement, je n'y avais plus pensé. Mais le problème est exactement le même.
Le float-left marche pas mal du tout !
Seul problème : j'ai

Code : Tout sélectionner

dt:after {content:" : ";}

L'espace après les ":" n'est pas affiché. C'est le même problème si je mets les ":" dans le code html (<dt>mot à définir : </dt><dd>définition</dd>), je suis obligé de mettre un espace insécable. Est-ce que quelqu'un voit d'où ça pourrait venir ? Ça n'était pas le cas avec h3 et p.

[bobo]

C'est le même problème si je mets les ":" dans le code html (<dt>mot à définir : </dt><dd>définition</dd>), je suis obligé de mettre un espace insécable. Est-ce que quelqu'un voit d'où ça pourrait venir ? Ça n'était pas le cas avec h3 et p.

La gestion des espaces finaux dans une boite flotante et dans une boite inline ne doit pas être équivalente, d'où la différence de traitement. Par contre, tu peux mettre une marge à droite de 1ex pour simuler l'espace.

[calimo]

Voilà !

J'ai "mis à jour" une ancienne page d'un travail que j'avais fait il y a quelques années et que j'avais publié sur Internet. Évidemment c'était une catastrophe d'invalidité avec les <p> et des <a> non fermés, les titres avec <p><font...>&nbsp;&nbsp;Titre etc... ! Le tout formaté à l'aide d'un tableau bien sûr sinon ce serait pas drôle
Étonnament ça s'affichait pas mal du tout avec FireFox &cie.

J'ai tout passé en xhtml et css ce qui ne fut pas une mince affaire, mais c'est fait, et je suis plutôt content du résultat
Il y a encore quelques petites choses à mettre au point, dont une qui me tracasse : c'est en rapport avec ce float:left je pense. Allez voit sur : http://mypage.bluewin.ch/prion/prion.htm#glossaire. Le serveur est affreusement lent, mais vous verrez tout de suite la première définition s'affiche bizarrement.
Ça ne vient pas d'elle-même puisque si je la supprime, c'est la suivante qui est bizarre . Le plus étrange c'est que tout s'arrange si je mets un <br /> juste avant J'ai essayé de jouer sur les margin-top et bottom, rien n'y fait, je ne comprend vraiment pas

Si quelqu'un avait une idée pour résoudre ça, je serais vraiment heureux !

Bonne soirée !

[bobo]

J'ai étudié ton problème, et j'ai à peu près compris. Il faudrait sans doute vérifier dans les specs, mais bon, on va admettre que j'ai raison
Les marges d'un élément flotant ne fusionnent pas avec celles de l'élément conteneur, contrairement à un élément dans le flux, ce qui provoque le décalage.
Solutions possibles :

• Utiliser des margin-bottom à la place des margin-top sur les éléments <dd> (je viens de faire un essai, et en fait c'est pas une bonne idée, il y a d'autres problèmes)
• Enlever le margin-top du premier élément <dt> (dt:first-child)
• Introduire un padding-top à l'élément <dl> (mais augmente l'espace avec le titre précédent)

[calimo]

Super ça marche ! J'ai définitivement adopté le dt:first-child

Pour le dl j'avais pas pensé au padding mais c'est vrai que c'est moins bien que le dt:first-child qui a en plus l'avantage de pas avoir d'effet sous IE.

Merci beaucoup !