compatibilité Firefox

[Jeanluc]

Bonjour,

Mon code contient quelque chose comme ceci :

<TD WIDTH=160>
abracadabra-gortier-slouton-3-141592653589793
</TD>

Avec Internet Explorer et avec Opera, la colonne a bien une largeur de 160 pixels. Le mot abracadabra-gortier-slouton-3-141592653589793 est coupé après un tiret. Firefox lui se refuse à considérer le tiret comme un séparateur et élargit la colonne, ce qui, sur les pages en question, est très vilain...

Quelle formule magique faut-il utiliser pour éliminer ce problème, en conservant les tirets (et si possible sans élargir la colonne) ?

Jean-Luc

[Sarc]

L'unité est obligatoire, on perd des points pourtant pendant les études si on met pas les unités... Pareil pour la prog

donc faut mettre width="160px" !

Je sais pas si ça arrange les choses, mais ça sera déjà moins pire

[Jeanluc]

Merci pour la réponse, mais il ne faut pas mettre les unités, comme tu dis. Il faudrait les mettre dans un CSS, mais pas ici. Ce serait incorrect.

Jean-Luc

[Sarc]

Bah déjà t'as raison faudrait mettre la taille de tes cellules dans un CSS si tu respectais bien la chose...

Mais je suis absolument pas d'accord, il faut mettre les unités en HTML également... Là tu veux qu'il te mette 146 quoi ? 146 centimètres, pixels, % ?

Je suis certain qu'il faut les mettre ces unités !

[Remi]

Je ne pense pas que ce soit un problème d'unité :

J'ai déjà observé que Firefox ne faisait pas les césures de mots sur les tirets de la même façon qu'IE...

et dans le cas précis, je ne sais pas s'il y a d'autres solutions que de mettre des retours chariot en dur.

[Sarc]

Je suis d'accord sur le fait que Firefox fait des bêtises de ce côté là (IE fait la même avec les mots trop longs et les DIV, alors bon, 1 partout... :/) mais l'unité reste obligatoire pour éviter des problèmes d'affichage, voilà tout lol

Enfin bon, embêtant de mettre des retours en dur si c'est du contenu de BDD, faut avouer... :/ Faudrait mettre un <br> si le mot fait plus de n caractères, grâce à des fonctions PHP...

[Mamat]

Si je ne me trompe pas par défaut les td sont en px si on ne précise pas l'unité...

[Jeanluc]

Césure (coupure) sur les tirets

Ok pour le <BR>, mais c'est pas super-super... Il n'y aurait pas plutôt moyen d'insérer un caractère invisible qui n'enverrait pas systématiquement à la ligne, mais sur lequel Firefox ferait la coupure si nécessaire ?

HTML, attribut width

Mamat a parfaitement raison. Les seules "unités" possibles sont le pixel, si on ne précise rien, et le pourcentage, si on ajoute %. C'est facile à vérifier dans n'importe quel bouquin sur le HTML ou tuto en ligne, mais ce n'était pas ma question. L'emploi de CSS ou de formatage HTML ne change rien dans ce cas précis.

Pour se rendre compte du problème, il suffit de regarder cette page à travers différents navigateurs et de la rétrécir. On voit que, dans l'expression abracadabra-gortier-slouton-3-141592653589793, Firefox ne fait pas la césure sur le tiret, alors que les autres navigateurs le font.

Jean-Luc

Modifié 28 Avril 2005 par Jeanluc

[Dudu]

Bah déjà t'as raison faudrait mettre la taille de tes cellules dans un CSS si tu respectais bien la chose...

Mais je suis absolument pas d'accord, il faut mettre les unités en HTML également... Là tu veux qu'il te mette 146 quoi ? 146 centimètres, pixels, % ?

Je suis certain qu'il faut les mettre ces unités !

T'es fou lui ?

T'as du trop manger de feuilles de style (miam, des feuilles de styles bien vertes et craquantes avec une petite vinaigrette).

Quand tu es un vilain pas beau qui met sa présentation avec le contenu, la règle est simple. Soit rien, soit un pourcentage. Mais aucune unité. Et du coup, tu ne peux pas faire des centimètres, des pica, des em...

Hum, sinon, j'avais entendu parler de l'entité HTML ­ qui crée un trait d'union obligatoirement considéré comme non-insécable (en gros, s'il se retrouve en fin de ligne, il est obligé de faire un retour chariot), je ne sais pas trop ce que çà vaut, j'ai jamais testé

Mais si çà peut aider, éventuellement....

Y'a aussi comme solution d'aller manifester devant chez Mozilla...

[Sarc]

Bonjour, je suis la secrétaire de Sarc, il est parti en vacances à Hawaï pendant une durée indéterminée, il ne pourra donc pas vous répondre...

J'avoue, j'ai mangé du CSS... Plus de paramètres dans mon fichier chteumeuleu...:/

Bon, désolé, je m'éclipseee

[Dudu]

.o0 { le salaud, il est à Hawaï devant une assiette de CSS-vinaigrette. Y'en a qui se privent de rien, vraiment }

[Hadrien]

Bonjour,

Mon code contient quelque chose comme ceci :

<TD WIDTH=160>
abracadabra-gortier-slouton-3-141592653589793
</TD>

Avec Internet Explorer et avec Opera, la colonne a bien une largeur de 160 pixels. Le mot abracadabra-gortier-slouton-3-141592653589793 est coupé après un tiret. Firefox lui se refuse à considérer le tiret comme un séparateur et élargit la colonne, ce qui, sur les pages en question, est très vilain...

Quelle formule magique faut-il utiliser pour éliminer ce problème, en conservant les tirets (et si possible sans élargir la colonne) ?

Les tirets sont malheureusement assez mal gérés d'un navigateur à un autre.

Celui qui est directement accessible par le clavier, et que tu as utilisé ici, est le caractère Unicode U+002D. Étant donné que personne n'est d'accord sur le sens de ce caractère, il est employé dans différentes optiques. Il peut être considéré comme un tiret sécable (IE, Opera), un tiret insécable (Gecko), comme le symbole de soustraction, comme un trait-d'union, comme un tiret de dialogue...

Firefox et IE ont des comportements différents, mais ils sont tous les deux dans leur droit, et on trouve des utilités dans les deux cas. Par exemple, moi j'aime bien que Firefox ne me casse pas les dates écrites au format ISO : 2005-04-28 par exemple.

Comment lever toutes ces ambiguïtés ? Le standard Unicode a tout prévu en créant une tripotée de tirets pour chaque usage : http://www.cs.tut.fi/~jkorpela/dashes.html

Là où ça bloque, c'est que les navigateurs ne supportent pas bien toutes ces propriétés. Ainsi, Firefox traite les traits d'union sécables comme insécables, alors qu'Opera les gère correctement. IE aura tendance à montrer des carrés à la place de ces tirets spécialisés.

Une autre approche consiste à marquer ton texte avec des espaces sécables de largeur nulle (caractère U+200B) aux endroits où tu souhaites casser ton texte :

abracadabra-​gortier-​slouton-​3-​141592653589793

Mais là encore IE va montrer des carrés au lieu de... rien.

À toi donc de prendre en considération toutes ces informations et choisir le compromis qui te satisfasse

Modifié 28 Avril 2005 par Hadrien

[Sarc]

.o0 { le salaud, il est à Hawaï devant une assiette de CSS-vinaigrette. Y'en a qui se privent de rien, vraiment }

<{POST_SNAPBACK}>

En fait j'hésitais entre cette excuse et celle-là :

Oh ! Quelqu'un a piraté mon compte cet après-midi et a écrit plein de c.... bêtises sur le forum ! Vous inquiétez pas, j'ai changé de mot de passe, maintenant je serai le seul à utiliser ce compte non de non !

Laquelle était plus crédible ?

[Dudu]

Aucune, pourquoi ?

[Jeanluc]

Merci à tous pour les suggestions.

> Dudu : c'est bien dans ce sens-là que je cherchais, malheureusement ­ fonctionne comme il est supposé le faire (affichage d'un tiret, si passage à la ligne, et rien du tout, dans les autres cas).

> Hadrien : tu es un expert! Waw, je suis impressionné. Je viens de tester l'espace sécable de largeur nulle et, comme tu disais, ce n'est pas bon avec IE.

Conclusion : il n'y a pas de solution qui fonctionne à la fois sur Internet Explorer (86% de mes visiteurs sur ce site) et Firefox (7% de mes visiteurs). Je dois me résigner à élargir la colonne. Je ne vais quand même pas insérer une image de 0x0 après chaque tiret...

Jean-Luc