IE, bloc qui bouge au survol d'un bouton

Bonjour à tous !

Alors, aujourd'hui, j'ai un petit problème qu'il me semble avoir déjà rencontré, mais j'avais du le détourner et je n'ai jms réussit à le comprendre et à le corriger.

Que sous IE.

Voici deux images :



La première représente la page telle qu'elle doit être et qu'elle est lorsque l'on arrive sur le site.
La seconde représente la page lorsque l'on est passé sur les 2 boutons "lire l'article".
Lorsque l'on passe sur l'un de ces boutons, son bloc se rétrécie (uniquement s'il n'y a pas bcp de texte).
Et si l'on passe sur le bouton "retour" tout rentre dans l'ordre.
Ya de quoi devenir chèvre !

Voici le code css des boutons :

.boutlirearticle, .boutretour{
	display:block;
	height:17px;
	width:96px;
	float:right;
	margin-top:10px;
}

.boutlirearticle {
	background:url(images/lirearticle.gif) top left no-repeat;
}

.boutlirearticle:hover {
	background:url(images/lirearticle.gif) 0px -17px no-repeat;
}

.boutretour {
	background:url(images/retour.gif) top left no-repeat;
}

.boutretour:hover {
	background:url(images/retour.gif) 0px -17px no-repeat;
}

et le code HTML d'un bloc :

<li class="resumeevenement">
<img src="image.jpg" alt="nom image"/>
<h5>Titre news</h5> <span class="dateevenement">Date news</span>
<br />
Résumé de la news	
<br />
<a class="boutlirearticle" href="article"><span class="hidden">Lire l'article</span></a>
</li>

Un truc qui peut aussi servir (et dont l'astuce : width:100%, float:left m'a été donné ici.)

.resumeevenement {
	display:block;
	margin-bottom:20px;
	background-color:#F7F7F7;
	padding-top:5px;
	float:right;
	width:100%;
	padding-bottom:5px;
}

Si vous avez déjà rencontré un tel bug, merci de m'aider !
Modifié par johanna33 (10 Mar 2005 - 11:24)

non, mais si je fais ça, je n'aurai plus de changement au survol.
Enfin, j'essaie pour voir ce que ça change au niveau des blocs.

Edit : aucun changement, mis à part que je n'ai plus de changement d'état de bouton, évidemment.

Merci qd même d'essayer de m'aider!
Modifié par johanna33 (10 Mar 2005 - 12:14)

johanna33 a écrit :
non, mais si je fais ça, je n'aurai plus de changement au survol.
Enfin, j'essaie pour voir ce que ça change au niveau des blocs.

Edit : aucun changement, mis à part que je n'ai plus de changement d'état de bouton, évidemment.

Merci qd même d'essayer de m'aider!

ben ce que je remarques par rapport à tes captures, c'est une différence de 17px en moins... comme par hasard...

Non il ne faut pas tenir compte de la taille.

En fait, si le texte est assez long, les blocs ne bougent pas.
Plus le texte est court et plus le cadre se rétrécie.

Par contre, il est vrai que si le lien "lire l'article" est un lien normal sans style, il n'y a plus aucun pb.

Est-ce que ça pourrait être un problème de float encore une fois ?
Modifié par johanna33 (10 Mar 2005 - 16:17)

si j'enlève le width:100% de mon conteneur

.resumeevenement {
display:block;
margin-bottom:20px;
background-color:#F7F7F7;
padding-top:5px;
float:right;
[#red]width:100%;[/#]
padding-bottom:5px;
}

ya plus le pb.
Mais par contre vive la présentation
Modifié par johanna33 (10 Mar 2005 - 16:18)