Probleme utilisation sprite CSS avec IE

Bonjour à tous,

Je découvre le html/css, et je me débrouille assez bien avec ce que je trouve sur le net, et notamment sur Alsacréation !

Je butte néanmoins sur un problème, et je n'ai pas vu de cas similaire, peut-être pourrez-vous m'éclairer.

En fait, je veux afficher des pictogrammes dans une colonne d'un tableau, et du texte dans une autre colonne à coté pour décrire le picto en question. Vu le grand nombre de pictos, qui se combinent entre eux, je me suis orienté vers un sprite, dont je supperpose plusieurs "vues" pour former mon picto. J'utilise pour cela une feuille CSS, et je mets des div avec des background dans la case souhaitée. Ca marche à peu près bien, MAIS... pas sous IE, car on dirait qu'il m'affiche une zone plus grande que celle voulue depuis mon image.

Pour illustrer mon propos, voici une image de ce que j'obtiens sous IE. Ici, il n'y a qu'une seule image issue du sprite. Le cadre rouge reste présent même si on en mets plusieurs les unes sur les autres. Mon image de sprite est segmentée en cadre rouges pour me faciliter la maintenance de l'image. Mon souhait est évidement de ne pas afficher ces cadres, et les coordonnées sont en conséquence (la preuve: ça marche sous FF!)...



Le tableau est bien sûr stylé par ailleurs. ce que vous voyez au dessus et en dessous du cadre son des images tout à fait classques pour l'instant, en <img>, dans des cases de tableau différentes.
En fait le cadre rouge n'apparait pas dans FF, mais il vient sous IE. Ce que je ne comprends pas, c'est que les coordonnées sont bien les mêmes, puisque je visualise le même fichier. Est-ce que IE s'autorise de faire un zoom out sur mon sprite ?

mon code css est du style

.voie
{
	width: 24px;
	height: 40px;
	display: inline-block;
	background: url("../pict/spt_voie.gif") no-repeat;
} 
.v1010 { background-position: -1px -42px; }
.v1020 { background-position: -101px -42px; }

et mon HTML:

<td><div class="voie v1010">&nbsp;</div></td>

Excusez-moi pour la propreté éventuelle du code. Ce n'est pas ici la question, je mettrais au propre quand je saurais quoi mettre au propre...

Et il s'agit bien d'un tableau de donnée. il n'est pas question ici d'utiliser un tableau pour la mise en forme. mais j'aimerais me servir du tableau pour afficher les images. A mon avis, le problème se situe plus au niveau du mécanisme du sprite.

D'ailleurs, un essais en dehors du tableau montre exactement le même comportement. Précision: j'essaie sous IE 9

Avez-vous une idée de ce qui se passe ?

D'avance merci,

KFFF
Modifié par kfff (27 Jan 2012 - 17:05)

Bonjour à tous,

Bon, personne n'a déjà eu le cas... ?
Ce n'est pas grave, j'indique donc ci-dessous non pas la solution, que je n'ai pas (donc pas "résolu"), mais une façon de contourner, pour ceux qui auraient le même problème:

En fait, c'est bien ça, IE se permet de prendre un peu plus que la zone voulue dans le sprite. La manière de contourner est donc de dessiner le sprite un peu plus grand que prévu, dans mon cas 1 pixel sur tout le tour étant suffisant. Donc si je veux afficher une image de 24 par 40, je dessine dans mon image source mon image sur 24 par 40, mais en reproduisant sur tout le tour une "continuité" du sprite voulu, d'un pixel de large, ce qui permet à FF d'avoir l'image voulue, et à IE d'aller chercher le pixel qui lui fait plaisir sur le pourtour sans que cela ne se voie...
Donc j'ai du décaler toutes mes coordonnées pour prendre cela en compte. Mais ça fonctionne.

Autre chose pour qui serait tenté d'utiliser les sprites:
Comme le mécanisme fonctionne avec le principe des backgrounds, il faut pas compter dessus pour les imprimer, car l'impression des background est au choix de l'utilisateur, et désactivé par défaut dans la plupart des navigateurs. Donc sauf à embêter votre internaute (qui oubliera à coup sûr de désactiver l'option lors d'une impression ultérieure d'un autre site avec un fond noir, et qui ne manqueras pas de vous maudire !), il ne faut pas utiliser les sprites pour du contenu qui doit pouvoir être imprimé. Dommage, car a priori les deux choses ne devraient pas être liées, c'est juste que le mécanisme implique d'utiliser les backgrounds...

Donc, sauf erreur de ma part, ne pas utiliser de sprite si ils ont vocation à être imprimés.
Si quelqu'un sait comment supperposer trois images venant d'un sprite tout en ne faisant pas appel à un background, je suis preneur !

Merci

Cordialement,
Modifié par kfff (29 Jan 2012 - 13:41)