Table inline dans un élément de liste

Version imprimable

Bonjour,

J'essaie d'insérer un tableau dasn un élément de liste, et le moins qu'on puisse dire, c'est que les différents navigateurs sur le marché confèrent à mon projet une variété d'une richesse incroyable.
Voici un exemple de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <UL> <LI>List Element 1: <TABLE BORDER="2" CELLSPACING="0" CELLPADDING="0" STYLE="display: inline; vertical-align: top;"> <TR><TD>1</TD><TD><TD>2</TD></TD></TR> <TR><TD>1</TD><TD><TD>2</TD></TD></TR> </TABLE> </LI> <LI>List Element 2: <TABLE BORDER="2" CELLSPACING="0" CELLPADDING="0" STYLE="display: inline; vertical-align: top;"> <TR><TD>1</TD><TD><TD>2</TD></TD></TR> <TR><TD>1</TD><TD><TD>2</TD></TD></TR> </TABLE> </LI> </UL>
... et voici ce que ça donne sur respectivement
- Safari et Google : Bravo ! c'est exactement ça que je veux.
- Opera : pas mal pour la mise en place, mais la bordure des tables est réduite à une seule rangée;
- Explorer : Pas trop mal, mais la puce est alignée en bas au lien du haut;
- Firefox : le pire, cumule à peu près tous les défauts.

Est-ce que quelque gourou de la feuille de style ici serait capable de m'aider à contourner les différents problèmes ?

http://www.contentbox.com/claude/test.gif

Merci.
P.S. Si c'est pour me répondre « Ils ont tous tort, y a que Mords-zy-la qui suit les standards » merci de s'abstenir ;-)

Bonjour,
Je ne sais pas si cela marchera pour tous mais tu peux toujours essayer de remplacer le display:inline de ta table par ceci :
Code:

1 2 3 4 5 ul li table { display: inline-block; display: -moz-inline-stack; /* pour cibler les versions de FF < 3 */ vertical-align: top; }
+ le commentaire conditionnel pour les versions <= à IE7
Code:

1 2 3 4 5 6 7 8 
PS: Je ne sais pas si tu es en XHTML mais si c'est le cas, tu dois éviter de mettre le nom des balises et attributs en majuscules.

29/04/2009, 20h31
Erwan31

Bonsoir,
pour commencer il faudrait savoir si le mode de rendu est standards ou non standard (Quirks) mais ou cas ou le document serait en mode standard, webkit (Safari/Chrome) serait je pense le plus proche du comportement standard mais ce que tu fais (changer le display par défaut d'un tableau) est fortement déconseillé. Dans le pire des cas remplaces le display:inline par un float:right ou un display:inline-block (en attendant une implémentation suffisante de inline-table)
qui permet au moins de conserver la boîte de bloc généré par le display:table.
Par ailleurs le comportement exacte qui devrait être adopté au cas ou le display du table n'est pas standardisé.
De toute façon je doute que ce choix de structuration soit pertinent ;)
29/04/2009, 21h50
schnee

Citation:

Je ne sais pas si cela marchera pour tous

Ben c'est pas si mal que ça ! Ça marche pour tous SAUF Explorer qui se met à faire un saut de ligne entre le texte et la table, mais avec une partie conditionnelle pour IE, je devrais pouvoir m'en tirer.

Merci.

Citation:

Je ne sais pas si tu es en XHTML

Non, personnellement, je suis complètement allergique au XHTML.
Je préfère utiliser les minuscules pour tout ce qui est texte ou Javascript, et les balises en majuscules ressortent mieux.
Mais c'est mon opinion, et je la partage...

Citation:

De toute façon je doute que ce choix de structuration soit pertinent

Merci pour ce conseil, mais dans la mesure où cette structuration me permet d'afficher ce que je veux, de la façon que je veux, et à défaut de trouver une structuration meilleure, je ne vois pas ce qu'il y aurait d'impertinent dans la démarche ;-)
30/04/2009, 12h13
Erwan31

Citation:

Envoyé par schnee

Merci pour ce conseil, mais dans la mesure où cette structuration me permet d'afficher ce que je veux, de la façon que je veux, et à défaut de trouver une structuration meilleure, je ne vois pas ce qu'il y aurait d'impertinent dans la démarche ;-)

Disons qu'un tableau n'est en général pas vraiment approprié à désigner un item de liste mais ne connaissant pas le contexte je peux pas t'en dire plus.
Tu code à ta manière ok, tu es dans ton droit mais en temps normal ce n'est pas à toi que s'adresse ce code mais à des utilisateurs ou plus exactement à des machines (navigateurs graphiques/texte, lecteur d'écrans, robots d'indexation...) qui doivent l'exploiter au mieux de manière à servir l'utilisateur final, ce qui implique le respect de certaines règles sémantiques.
30/04/2009, 15h26
schnee

Citation:

Disons qu'un tableau n'est en général pas vraiment approprié à désigner un item de liste.

Mon tableau ne désigne pas l'article de liste, il en fait partie.
Ma liste donne les caractéristiques d'un évènement dans un congrès, dont
- le lieu,
- la date,
- le coût, et il peut se trouver que le coût puisse contenir plusieurs cas, comme membre, non membre, étudiant, retraité, etc, et en plus il peut y avoir un tarif avant une date déterminée, et après.
Le tableau est alors parfaitement justifié, et comme il fait partie de l'article Coût, il n'y a pas de raison de l'afficher à la ligne suivante. Voilà.

Citation:

Tu code à ta manière ok, tu es dans ton droit mais en temps normal ce n'est pas à toi que s'adresse ce code mais à des utilisateurs ou plus exactement à des machines (navigateurs graphiques/texte, lecteur d'écrans, robots d'indexation...) qui doivent l'exploiter au mieux de manière à servir l'utilisateur final, ce qui implique le respect de certaines règles sémantiques

Merci pour cette leçon de morale, mais j'ai quand même 40 années d'expérience un programation, et des utilisateurs et des machines, j'en ai ai vu défiler pas mal dans ma carrière, et j'ai toujours su les écouter et mettre à profit leurs remarques ;-)