Display:inline avec image en background

Bonjours à tous. J'aimerais disposer des liens qui ont une image en background avec display:inline. Toutefois, pour que je puisse appliquer une image à mon lien, ça ne fonctionne qu'avec display:block. Du coup je me trouve obligé de positionner mes éléments avec des margin top en valeur négative, mais internet explorer ne reconnait plus le lien à ce moment. J'ai tenté de créé un UL avec des LI items et de les dispositionner avec display:inline mais ça ne fonctionne pas. Quelqu'un aurait-il une idée?

alors mon code...

<a id="img1" href="../journal/html/articles/exercices/pullover.html" target="_self" title="Exercice de la semaine">Exercice</a>
<a id="img2" href="../journal/html/articles/recettes/barreprots.html" target="_self" title="Recette de la semaine">Recette</a>
<a id="img3" href="#" target="_self" title="Articles">Articles</a>

et mon css...

#img1
{
background-image:url(images/img1.png);
background-repeat:no-repeat;
display:block;
height:91px;
width:108px;
text-indent:-99999px;
margin-top:-15px;
margin-left:5px;
}

#img2
{
background-image:url(images/img2.png);
background-repeat:no-repeat;
display:block;
height:92px;
width:99px;
text-indent:-99999px;
margin-top:-92px;
margin-left:130px;
}

#img3
{
background-image:url(images/img3.png);
background-repeat:no-repeat;
display:block;
height:94px;
width:72px;
text-indent:-99999px;
margin-top:-93px;
margin-left:245px;
}

En espèrant que cela puisse vous aider.

Merci beaucoup!!
Modifié par silentshade (11 Sep 2007 - 16:31)

Hello,
moi je répondrait bien mais j'arrive pas à bien imaginé ce que tu veux obtenir .. tu n'aurais pas une petite maquette ?

Salut,

Difficile de te dire comment positionner un élément par rapport à un autre quand tu ne nous donne pas l'élément initial.

Aurais tu une page en ligne, ce qui serait l'idéal, ou au moins l'intégralité du code HTML et CSS ? Sans cela j'ai peur qu'aucune réponse ne te soit apportée par méconnaissance du problème.

Et sinon, les bonnes vieilles images insérées avec la balise <img> sont des éléments de type en-ligne, tout en étant des images. Royal, non?

<a href="..." title="Exercice de la semaine"><img alt="Exercice" src="..." /></a>
<a href="..." title="Recette de la semaine"><img alt="Recette" src="..." /></a>
<a href="..."><img alt="Articles" src="..." /></a>

Et voilà, une solution accessible et graphiquement adaptable.