[Résolu] Espace insécable... secable

Salut

J'ai un probléme avec un espace insecable qui ne remplis pas sa fonction.

Sur cette page, j'ai un tableau avec en haut une barre de titre. Dans cette barre de titre, j'aimerai placer une petite image qui reste collée à droite du texte. Donc à l'interieur de la cellule, j'ai mis un espace insecable entre le texte et l'image. Le code donne ca :

Support&nbsp;<img src="/images/s_asc.png" alt="Tri ascendant" />

Or, on constate que ca ne fonctionne pas. Si il y a la place dans la cellule, l'image se colle bien à droite du texte, mais sinon, elle passe en dessous

Je ne comprend pas pourquoi le principe de l'espace insecable ne fonctionne pas là, et une aide serait bienvenue...

Le lien vers la css : ici

Merci !
Modifié par Ben (10 Mar 2005 - 23:59)

A mon humble avis, l'espace insécable sert dans le cas de texte, mais pas entre un texte et une image. Il faudrait que l'image soit traitée comme un caractère, ce qui n'est pas le cas.

Si, l'image est considérée comme du contenu en-ligne. Ça devrait fonctionner.
C'est peut-être le navigateur utilisé pour le test qui gère mal l'espace insécable ?

Oui, tout a fait, c'est du inline donc ca devrait marcher, c'est ce que je me disais. Mais je viens de faire le test et effectivement, avec seulement du texte, ca fonctionne

Je vous ai mis le lien vers la page plus haut. Vous pouvez regarder : dans la cellule audio, j'ai remplacé l'image par du texte, et le texte reste correctement collé. Si je remplace ce texte par l'image, elle passe en dessous.

Enfin ca m'etonne quand même ce probléme. Je vais devoir tout mettre en block et utiliser float pour un simple probléme d'espace insécable ? Ca me parait un peu lourd pour pas grand chose

Curiosité : Bobe, t'es le Bobe de 2037 ?

Arf, je viens de regarder, et ca passe bien sur IE. Le probléme ne se pose que sous FF.
Modifié par Ben (10 Mar 2005 - 18:49)

J'ai testé sous les navigateurs suivants :

Sous Mac OS X :
* Firefox 1.0
* Mozilla 1.7
* Netscape 7.2
* Safari 1.2
* Opera 7.5
* IE 5.2

Seul Opera respecte l'espace insécable placée (on dit une espace) entre un mot et une image.

Arfff... Il y a beaucoup de <td class="disk_td_center"></td> dans ta page (450 pour tout dire)

Tu ne pourrais pas mettre disk_td_center par défaut ? Ça allégerait ton code de beaucoup !

Ben a écrit :

Enfin ca m'etonne quand même ce probléme. Je vais devoir tout mettre en block et utiliser float pour un simple probléme d'espace insécable ? Ca me parait un peu lourd pour pas grand chose

Une autre solution serait de supprimer l'espace insécable et de placer un margin-left sur l'image pour qu'elle ne soit pas collée au texte. Mais c'est pas très propre...

Encore une autre solution, mettre cette image en arrière plan plutôt que de la placer avec une balise <img> et placer un padding sur le bord droit des cellules en question (pour que le texte ne déborde pas par dessus l'image en arrière-plan).

Dernière solution: Ne pas tenir compte de ce petit problème, c'est de la faute du navigateur. Comme ça ne gène pas vraiment la lisibilité du contenu, on peut laisser comme ça...

"Ben" a écrit :

Curiosité : Bobe, t'es le Bobe de 2037 ?

Oui, c'est moi
Modifié par Bobe (10 Mar 2005 - 19:40)

Stephan a écrit :
Arfff... Il y a beaucoup de <td class="disk_td_center"></td> dans ta page (450 pour tout dire)

Tu ne pourrais pas mettre disk_td_center par défaut ? Ça allégerait ton code de beaucoup !

Pas bête du tout ca tiens ! Ca m'était pas venu à l'esprit alors qu'effectivement, j'avais constaté que ca faisait beaucoup de disk_td_center
C'est affreux d'ailleurs cet énorme tableau, nan Mais bon, c'est le meilleur usage pour ce type de données. J'aurai bien mis des div partout quand même ^^

Merci d'avoir testé sous différents browser (t'en as d'autres ?? lol).

Bon, je vais voir comment m'y prendre autrement pour l'image. Merci pour ces pistes Bobe

"Bobe" a écrit :
Oui, c'est moi

ravi de te voir ici. Suis aussi sur 2037 sous le même pseudo
Modifié par Ben (10 Mar 2005 - 20:28)

Je viens de me souvenir d'un vieux relicat d'html4 : nowrap !! Ca empeche le passage à la ligne dans une cellule de tableau. z'auriez pu me le dire ! lol

Seul hic, c'est pas valide en strict, seulement transitionnal

J'ai essayé avec les float, même topo, ca passe en dessous.

Et pour les pistes que tu m'as donné Bobe, le margin-left, pareil, ca remplacera l'espace, mais ca devrait pas l'empecher de passer dessous (pas essayé). Pour le padding et l'image en fond, c jouable mais j'ai déjà une image de fond et en réalité, l'image n'apparait que sur une colonne à la fois (elle indique le sens du tri par colonne), donc ca m'oblige à changer la class en fonction du tri... Un peu lourd donc.

Bref, pas de solution propre et efficace

Bon, je viens de trouver l'équivalent css :

	white-space:nowrap;

Voilà, content moi

Et désolé pour le free-post

Ben pourquoi ne pas mettre cette petite image en arrière-plan du a ?

Ca m'aurait obligé à mettre le a en block, mais c'est vrai ca aurait été une solution, j'avais pas pensé à le mettre sur le a.