[CSS] white-space:nowrap et IE 6 [Résolu]

Saluton,

J’utilise un tableau html pour visualiser le résultat d’une requête sur une table MySQL.
Le tableau html <table> a un style table-layout:fixed et width=700px, les colonnes ont un style width (dont la somme égale 700px) et un style white-space:nowrap; overflow:hidden.
Ce qui, sous Mozilla, me donne ce que j’attends : des lignes identiques avec des colonnes aux largeurs fixes et pas de retour à la ligne quand le texte est trop long et le dépassement de texte caché.
Mais sous IE 6, nenni, la largeur des colonnes n’est pas fixe et les retours à la ligne y vont bon train.

Quelqu’un connaitrait-il une astuce, une DTD XHTML à mettre en entête ou un lien …

Merci

Commence par supprimer toute entête XML : ça géne IE…
Ensuite, vérifie bien que tu n’utilises que du CSS 1.0 : IE ne pigera que celui là :slight_smile: et table-layout ça me semble sortir tout droit de CSS2 http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

Donc ton code ne fonctionnera jamais sous IE faute de CSS1.

Et là, il faut ruser. Tu as éventuellement les ruses suivantes :

  1. commentaires conditionnels : tu te débrouille pour appliquer un style spécifique compris par IE.

  2. sélecteurs d’attributs CSS2 : pas reconnu par IE, c’est le paradis quand il s’agit de faire un code pour fx/opera, et un autre pour IE

J’ai personnellement du résoudre un problème d’affichage avec ces deux astuces.

Merci, Sans-Nom,
Le problème, (enfin, un des problèmes), c’est que je ne vois pas d’équivalent au couple table-layoiut : fixed et white-space: nowrap en CSS1.
Si l’on doit abandonner les tableaux html <table>, même dans le cas de leur seule justification sémantique : l’affichage des données tabulaires, au profit de blocs <ul> avec display:in-line, uniquement pour des raisons de contournement de non-support par IE des attributs CSS2, il y a de quoi devenir chèvre.
L’autre problème c’est que je ne comprends pas grand chose à ta réponse.
un commentaire conditionnel, késako ?
Ets-ce un truc du genre html * , comme j’ai pu voir par endroits ?

S’agit-il des hacks CSS ?

Faire du CSS 2.1 c’est pas un hack hein :slight_smile: mais utiliser les sélecteurs d’attributs (.foo = [class=foo], #xx = [id=xx]) compatibles sous fx, opera, mais pas IE.

Ensuite, les commentaires conditionnels d’IE devrait te permettre de créer un tableau malgré tout, etc.

Donc, si je te comprends bien, ce que tu appelles des sélecteurs d’attributs, ce sont des déclarations de styles pour des dientifiants uniques dans les balises html (#xx) ou des classes (.foo) que IE 6 ne reconnaitrait pas. Toutes choses que j’utilise évidemment, et les commentaires conditionnels (<!if IE … >) une implémentation proprétaire de MS IE permettant de faire des ‘aiguillages’ au sein des feuilles de style, un peu à la manière d’XSL ?
Mais je ne vois toujours pas par quelle magie simuler white-space:nowrap et overflow:hidden fut-ce avec un commentaire conditionnel.

En essayant de voir si ça n’existe pas déjà. Ceci dit, c’est vrai c’est limité.

Sinon, d’où tiens-tu que IE 6 ne reconnait pas les id et les class dans les CSS ?

Bon, j’ai fini par obtenir une solution sur le forum d’Alsacréations.
Elle ne me convient pas en terme de propreté du code (encapsuler les infos des <td><div>…</div></td> et appliquer le white-space:nowrap et le overflow:hidden sur les div des td.
Je n’aime pas beaucoup faire du multi-postage sur plusieurs forums, mais là j’ai fait une exception.
Je vous donne donc, pour ceux aue ça intéresserait, le lien vers ce post
Merci quand même à toi, Sans-Nom, pour t’être donner la peine de me chercher des éléments de réponse qui, comme toujours, sont pleins d’intérêt.

:slight_smile: j’ai jamais dis qu’IE6 ne reconnaît pas id & class. C’est juste qu’il ne reconnaît pas les sélecteurs d’attributs. Donc si tu veux un code spécial Fx/Opera, tu t’en sers.

Alors je te le redis : je ne comprends pas ce que sont les sélecteurs d’attributs.
Si c’est une syntaxe comme celle que tu as donné (.foo = [class=foo], #xx = [id=xx]), je ne la connais pas, en outre je ne vois pas trop à quoi elle servirait.
Donc ça ne doit pas être ce que tu ceux dire.

Atta :

http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Tu vois les trucs genre :

div a ?

Ce sont des sélecteurs d’éléments. Les sélecteurs d’attributs c’est la même chose appliqué aux attributs.

D’accord, j’ai rencontré cette nui lors de ma lecture de CSS 2 pratique du design web de Raphaël Goetter.
Il ne fait que les évoquer du fait de leur (provisoirement ?) non prise en charge par IE 6.
Comme beaucoup, ce que je veux c’est obtenir qqe chose qui fonctionne sous IE 6, aussi.
Mais j’avoue que la solution qui m’a été suggérée <td><div>data</div></td> en appliquant white-space:nowrap et overflow:hidden au style des <div> internes aux <td>, si elle a le mérite de me fournir le résultat attendu en termes de rendu écran, ne m’apparaît pas très élégante.
Mais bon, je vais m’en satisfaire, faute de mieux.
Merci encore, Sans-Nom.