Le background-position de mon lien déplace mon <img> au survol

Bonjour,

J'ai une liste d'articles avec chacun un titre, une image, un résumé et un lien vers l'article en entier.
J'ai créé pour mon lien une puce qui est une image composée de 3 états disposés verticalement, et dont une seule est visible dans mon lien. Au survol de la souris, j'utilise un background-position pour changer l'aspect de la puce sur ce lien.

L'image illustrant l'article et le lien ne sont pas dans le même bloc, et pourtant, au survol du lien, l'image se décale vers la gauche.

Voici mes codes html et css :

<div class="article_box">                                                                                                                                                                                                                                                                                                                                                                  
    <div class="liste article no-date">                      
        <div class="date"><strong>4<br /></strong>Mai<br /><small>2008</small></div>
        
        <h3><a href="titrearticle.html">Titre de l'article</a></h3>                          
        <div class="tb">                                                                                                                                                       
            <p>
                <img width="185" hspace="10" height="104" border="0" align="left" alt="j&eacute;r&eacute;my" src="P1000530.JPG" />
                texte de l'article
            </p>
            <p class="plus">
                <a href="titrearticle.html">Détail de l'article</a>
            </p>                                                         
        </div>                      
    </div>                      
    <div class="clear">&nbsp;</div>                  
</div> 

.article{
        padding-left: 70px;
        padding-right: 40px;
}

.article.no-date{
        padding-left: 40px;
}

p.plus a{
        color: #666;
        background: url(btn_nav_next.gif) no-repeat 0px 0px;
        height: 17px;
        line-height: 16px;
        padding-left: 15px;
        padding-bottom: 3px;
        font-variant: small-caps;
}
p.plus a:hover{
        color: #333;
        text-decoration: none;
        background-position: 0 -34px;
}
.article.no-date img{
        float: left; 
        margin: 5px 15px 10px 0px;
        border: 2px solid #333;
}

Si je supprime background-position du p.plus a:hover{}, alors je n'ai plus le bug.

Quelqu'un a-t-il déjà eu le problème ? Et un solution s'il vous plait.

Merci d'avance
Modifié par seren10pity (26 Jun 2008 - 11:34)

Bonjour,

on m'a suggéré une solution : mettre l'image en display: block;
je n'ai pas encore testé mais je vous tiens au courant...

;)