[Résolu] SPAN vide, mais affichage de ses caractéristiques CSS

Mes textes viennent d'une base de données. Parfois un champ est vide.
Pour la mise en forme je balise avec des <span>, et j'ai donc parfois un span vide :

<span></span>

HTML

<p><span class="titre">titre1</span> <span class="commentaire">commentaire1</span></p>
<p><span class="titre">titre2</span> <span class="commentaire"></span></p>

CSS

span.commentaire {  margin-left:8px; padding-left:16px; background:url('puce.gif') left no-repeat; }

Sous IE7, j'ai

Sous FF2.0, j'ai


L'un de mes deux navigateurs a-t-il raison et l'autre tort ?
Peut-être qu'un span vide n'a pas de sens ? dans ce cas je ferai en sorte (php) de supprimer les span vides du code.
Le résultat que j'attendais est celui d'IE. Quelle solution me suggérez-vous ?
Merci et bonne journée.
Modifié par Lolololo (02 Aug 2009 - 17:29)

Bonjour aussi...

Lolololo a écrit :
L'un de mes deux navigateurs a-t-il raison et l'autre tort ?

Je suppose que par "lequel a raison, lequel a tort" tu veux dire "lequel respecte les spécifications et lequel ne le fait pas"... Comme tu le sais certainement IE dans ses versions < 8 n'implémente pas correctement le code css et dans ce cas précis il me semble tout à fait logique que le style soit interprété puisqu'un élément SPAN existe bel et bien (qu'il contienne ou non du texte).

Lolololo a écrit :
Peut-être qu'un span vide n'a pas de sens ? dans ce cas je ferai en sorte (php) de supprimer les span vides du code.

C'est aussi mon avis et ce que je ferais à ta place...

A noter que tes SPAN titre ressemblent vraiment à des titres et que des éléments Hn seraient sémantiquement plus corrects. Cela oblige bien sur à adapter les autres éléments en conséquence.

Merci Heyoan,

Sur le titre :
Mon "titre" n'est pas vraiment un titre, c'est juste un des champs d'une table, le plus significatif, peut-être, puisque le créateur de la base (c'était moi mais un autre jour) a donné le nom de "titre_evenement" au champ et le nom de "titre" à la classe correspondante.
D'ailleurs j'ai simplifié pour poser ma question, puisque dans mon css on trouve en fait, aujourd'hui :

.agenda div.evt span.evttitre { ... }

Mes champs à afficher entre <span></span>, qui existent ou non (base Mysql), et que je liste, sont des lieux, dates, noms d'événements, noms de personnes... et si "titre" est le champ que j'affiche aujourd'hui en premier, il n'a aucune valeur structurante, peut admettre des doublons...
Mais, me direz-vous, si c'est une liste, pourquoi mettre des <p> et non des <li> ? Je ne répondrai pas.

Sur le vide :
Et, rajouterez-vous, si le champ de la table n'existe pas, peut-on encore lui donner le nom de champ de la table ? Ce à quoi je répondrai que c'est la bonne question que de savoir si je peux qualifier en css quelque chose qui n'existe pas, et si oui, si les qualités que j'attribue à quelque chose qui n'existe pas doivent être considérées comme existantes ? L'absurdité de cette deuxième question montre que la réponse à la première est non. Et pourtant, des span vides, on en voit, ah ça oui, on en voit.

Je pense avoir compris que les caractéristiques d'un <div> vide ne sont pas affichées mais celles d'un <span> vide le sont par FF. Dans une autre présentation, ou j'avais mis des SPAN en "display:block", effectivement, la présentation CSS (marges ou petits dessins) ne s'appliquait pas aux <span> vides.
Donc display:block pourrait qualifier un contenu, éventuellement vide.
Et display:inline ne peut qualifier qu'un élément, un contenu existant.
C'est ça ?

a écrit :
Mais, me direz-vous, si c'est une liste, pourquoi mettre des <p> et non des <li> ? Je ne répondrai pas.

Si c'est une liste, pourquoi mettre des <p> et non des <li>

Peut-être qu'un tableau serait-il plus indiqué suivant la nature des contenus à afficher ?
Modifié par Igor (02 Aug 2009 - 15:03)

Lolololo a écrit :
Sur le vide :
Et, rajouterez-vous, si le champ de la table n'existe pas, peut-on encore lui donner le nom de champ de la table ? Ce à quoi je répondrai que c'est la bonne question que de savoir si je peux qualifier en css quelque chose qui n'existe pas, et si oui, si les qualités que j'attribue à quelque chose qui n'existe pas doivent être considérées comme existantes ? L'absurdité de cette deuxième question montre que la réponse à la première est non. Et pourtant, des span vides, on en voit, ah ça oui, on en voit.

Bigre ! Tu ne serais pas un peu compliqué(e) toi ?
En l'occurrence :
* le champ de ta table existe forcément (même s'il est vide).
* l'élément sur lequel s'applique le code css existe également (même s'il est vide).

Donc, encore une fois, personnellement je préfère ne pas créer du tout d'élément si ce dernier ne contient rien (à l'exception d'un TD dans lequel je mettrai &nbsp;)

Lolololo a écrit :
Je pense avoir compris que les caractéristiques d'un <div> vide ne sont pas affichées mais celles d'un <span> vide le sont par FF. Dans une autre présentation, ou j'avais mis des SPAN en "display:block", effectivement, la présentation CSS (marges ou petits dessins) ne s'appliquait pas aux <span> vides.
Donc display:block pourrait qualifier un contenu, éventuellement vide.
Et display:inline ne peut qualifier qu'un élément, un contenu existant.
C'est ça ?

Ceci est valable non seulement pour FF mais aussi pour tous les navigateurs respectueux des standars (IE8 compris).

La différence entre les éléments de type bloc et en-ligne est liée au modèle de boîte (et plus particulièrement au fait que la hauteur de l'aire du contenu pour ces derniers n'est pas égale à 0 mais à celle de la taille de la police : cf. la hauteur des éléments en-ligne non remplacés).

<Edit :>
Comme les règles sont un peu compliquées, voir :
Le modèle des boîtes
Le modèle de mise en forme visuel
Détails du modèle de mise en forme visuel
</Edit>

+1 pour le tableau.
Modifié par Heyoan (02 Aug 2009 - 16:20)

Merci, j'avance.
Dans mes explications, j'avais sans doute mal saisi le sens de "élément". Je croyais bêtement qu'il y avait des "éléments" entourés de balises (span, div, ou autres), et que le CSS donnait des caractéristiques à ce qui se trouvait entre les balises. Mais je comprends maintenant qu'en fait c'est la balise qui crée l'"élément", et qu'elle en fait partie.
Maintenant, pour un élément vide doté d'un "display:inline", je ne vois pas encore comment connaître "la hauteur et la largeur de son propre contenu". Et si je disais à mon css que le vide n'a pas de hauteur ? Même pas celle du niveau au-dessus. Serait-ce possible de lui dire ça ?

Lolololo=Laurent

J'ai édité mon post précédent concernant la hauteur des éléments de type en-ligne.

Comme tu ne peux pas mettre font-size: 1px; puisqu'il ciblerait tous les éléments SPAN et que tu as la main dessus qu'est-ce qui te gêne dans la solution de traiter cela par PHP ?

Pourquoi pas un tableau ?
C'est vrai, j'ai commencé par un tableau. Mais j'en suis maintenant à faire des phrases pour une lecture fluide. Mon problème était dans la transition.
Exemple écrit avec sql et php dans ce style :
"Le <span class="date">champ_date</span>, <span class="evt">champ_evt</span>. <span class="details>champ_details</span>"
qui peut donner :

<p>Le <span class="date">12 janvier</span>, <span class="evt">conférence du Pr Jekyll</span>. <span class="details>Renseignements sur  www.jekyll.com</span></p>
 
<p>Le <span class="date">13 février</span>, <span class="evt">conférence de Mgr Hyde</span> <span class="details></span></p>

Le troisième champ (détails) est optionnel, et, dans sa présentation, est annoncé par un petit carré.
L'affichage (FF) interprète ainsi :

et le petit carré me dérange. Mais je me répète.

Sinon, ok pour votre réponse : soit je fais un tableau avec la satisfaction de voir tous les champs dans le source, même les vides, soit je fais des phrases, je revois mon php, et je n'écris pas de span vide. J'étais resté entre les deux options.
A la prochaine.