Affichage css sur moz

Bonjour,

J'ai un problème concernant une image en position absolue intégré dans un bouton.
Ce choix car l'image change en fonction de l'état du bouton (survol).

L'affichage fonctionne très bien sous webkit mais sous moz ça ne se positionne pas correctement à moins d'indiquer des positions absurdes.

Comme un exemple de code vaut mieux qu'un long discours :

Le bouton

<button id="monBouton" type="button"><img src="monImage.png" alt="monImage" /></button>

Le css

button, button img { width:20px; border:0; }
button { position:relative; height:20px; margin:0; padding:0; background:none; cursor:pointer; overflow:hidden;  }
button img { position:absolute; height:40px; top:0px; left:0px; }

Le js

window.onload=function(){
    var bt=document.getElementById('monBouton');
    bt.onmouseover=function(){
        this.firstChild.style.top='-20px';
    };
    bt.onmouseout=function(){
        this.firstChild.style.top='0px';
    };
};

Voilà, rien de bien extravagant seulement je n'arrive pas à trouver de solution pour le moment (seul problème de ma page).
Le bouton est affiché via une class static php donc ça ne change pas grand chose.

Merci par avance à celui ou ceux qui pourront m'aider.
Modifié par t00rist (21 Mar 2012 - 14:52)

J'ai trouvé une alternative mais n'en suis franchement pas convaincu :

Css juste pour moz

button::-moz-focus-inner { padding:0; border:none; }
button, button img { width:20px; border:0; }
button { height:20px; margin:0; background:none; cursor:pointer; overflow:hidden;  }

button img { position:relative; height:40px; top:0px; left:0px; }

Ca fonctionne sur moz et pourrais intégrer ceci mais ça s'apparente trop à du bidoullage maison pour être satisfaisant donc je demande toujours votre aide pour ce sujet.

Salut,
j'ai peut-être pas tout compris, mais pourquoi tu n'utilises pas que du css pour ça ?

Ce que tu veux faire c'est qu'au hover du bouton, l'image se décale d'une vingtaine de pixel.
Soit le code suivant si je ne fais pas d'erreur :

button:hover > img {top:-20px;}

Salut,

J'utilise du js sans addEventListener pour ne pas avoir à faire un tas d'exception ou de feuilles différentes pour la compatibilité ie7 ou 6.

Ma solution est compatible IE7+

Oui effectivement merci pour ce détail, ce (ces) boutons une fois cliqués affichent l'image précédente ou suivante via un slider standard ou play/ pause le setTimeout de celui-ci (tout ça fonctionne)... en gros 4 boutons.

Que ce soit en js (bt.onmouseover) ou en css (button:hover) le problème reste le même sauf si je passe les images en position relative au lieu d'absolue, ce qui me semble hasardeux et peu fiable d'où mon problème (juste sur moz).

Si tu as une solution pour ça je suis preneur .
Modifié par t00rist (21 Mar 2012 - 17:04)

Je n'arrives pas à reproduire ton problème =/

J'ai résolu mon problème en réalité du à une erreur de concentration mais je ne vois pas où indiquer le sujet comme "résolu".
Bref merci à vous.