Pseudo classe :active et IE6/7

Bonjour à tous ,
suite à ce topic : http://forum.alsacreations.com/topic-4-34889-1-ResoluCenter-un-floatant.html j'ai réussi à régler une bonne partie de mon problème avec mes boutons ^^
Cependant je n'arrive toujours pas à faire fonctionner l'effet "onclick" du bouton et ce sous IE6 et IE7. J'ai l'impression que la pseudo classe :active n'est même pas interprétée.
Peut être est elle interprétée différemment ?

La page de test : http://www.lanforums.com/bouton

Code html :

<p style="text-align:center">
	<a class="ActionLiens" href="#" onclick="this.blur();"><span><span><span><img src="images/picto/back.gif" alt="Icône Retour" />Texte</span></span></span></a>
</p>

Code Css :

a.ActionLiens, 
button.ActionLiens { 
    display:-moz-inline-box; 
    display:inline-block; 
    margin:0; 
    padding:0; 
  	font: bold 12px arial, sans-serif; 
    white-space:nowrap; 
    text-align:center;
    vertical-align:middle; 
    cursor:pointer; 
    border:0;
    color: #444;
    background:none; 
    text-decoration: none;
} 
a.ActionLiens
{
	outline:0;
}
a.ActionLiens span img, 
button.ActionLiens img {
    margin-right: 10px;
	border:none;
	}

	
a.ActionLiens span, 
button.ActionLiens span { 
    float:left; 
    padding:0 0 0 6px; /*Largeur coté gauche*/
    vertical-align:middle; 
    background:url(images/bouton/btn_action_normalG.gif) left top no-repeat; 
} 
a.ActionLiens span span, 
button.ActionLiens span span { 
    padding:0 6px 0 0; /*Largeur coté droit*/
    background:url(images/bouton/btn_action_normalD.gif) right top no-repeat; 
} 
a.ActionLiens span span span, 
button.ActionLiens span span span { 
    height:45px; /*Hauteur bouton*/
    padding:0; 
    line-height: 45px; 
    background:url(images/bouton/btn_action_normalC.gif) left top repeat-x; 
}

a.ActionLiens:hover span,
button.ActionLiens:hover span {
    background-position: left -45px;
}

a.ActionLiens:hover span span,
button.ActionLiens:hover span span {
    background-position: right -45px;
}

a.ActionLiens:hover span span span,
button.ActionLiens:hover span span span {
    background-position: left -45px;
}

/*CLICK*/
a.ActionLiens:active span,
button.ActionLiens:active span {
    background-position: left -90px;
    color: #000;
    outline: none;                   /* cache les pointillés dans Firefox */
}

a.ActionLiens:active span span,
button.ActionLiens:active span span {
    background-position: right -90px;
    color: #000;
    outline: 0;                    /* cache les pointillés dans Firefox */
 
}

a.ActionLiens:active span span span,
button.ActionLiens:active span span span {
    background-position: left -90px;
    color: #000;
    outline: 0;                    /* cache les pointillés dans Firefox */
 
}
 
* html ActionLiens {width:1%; overflow:visible;} 
*:first-child+html ActionLiens {overflow:visible;}

Comme vous pourrez le remarquer tout ceci est extrait du très bon article de babylon design : http://www.babylon-design.com/site/index.php/2007/09/24/192-boutons-extensibles-css-compatibles-tous-navigateurs.

Merci
Modifié par grunky (26 May 2008 - 08:51)