Probleme css avec firefox et opera

Bonjour,
J'ai dans mon css un cette classe qui fonctionne très bien sous firefox:

.info-button {position:absolute;cursor: pointer;margin-left: -64px;}

Le problème est que pour avoir le même résultat sous opéra je devrais mettre ceci:

.info-button {position:absolute;cursor: pointer;margin-left: 158px;}

Mais je ne sais pas faire un hack css pour que ceci soit prit en compte
J'ai fait quelques recherches mais sans grand résultat. Merci de votre aide.

Il peut arriver que Firefox ou Opera aient des comportements divergents et pour lesquels l'un ou l'autre soit en tort. Mais globalement ça arrive surtout si on conçoit mal ses styles, et il suffit de les corriger plutôt que d'utiliser des hacks.

Ici, je suppute une utilisation peu maitrisée du positionnement absolu. Me trompè-je?
Modifié par Florent V. (06 Nov 2008 - 14:07)

Non non la position absolute est obligatoire car le info-button est un bouton qui se superpose sur une thumbnail-div avec un backgrund image pur ouvrir un slide donc je dois utiliser la position absolute.
Exemple ici http://weezonaute.fr/category/tout-wordpress/theme-en-francais/

Si on regarde avec opera le bouton rouge est a sa place et avec firefox il est completement décalé

Je confirme ce que je disais: utilisation non maitrisée du positionnement absolu. Tu ne devrais pas utiliser un margin-left, mais plutôt les propriétés top et right (ou left, éventuellement) pour placer cet élément. Bien entendu, div.thumbnail-div devra être placé en relatif.

(Réviser le positionnement absolu si nécessaire:
http://openweb.eu.org/articles/initiation_absolue
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html )

Ici, tu laisses le navigateur deviner la place exacte de l'élément, et il ne s'en sort pas toujours bien (IE est notamment connu pour perdre les pédales avec un élément positionné en absolu sans propriété left ou right). Avec Firefox, le fait que l'image dans div#cat (qui devrait être div.cat, mais passons) n'a pas de dimensions spécifiées en HTML ou CSS fait qu'il ne sait pas où placer exactement les contenus lors du premier chargement de la page. Une fois l'image placée en cache du navigateur (et donc ses dimensions connues), Firefox s'en sort correctement.
Modifié par Florent V. (06 Nov 2008 - 14:53)

Bon ben merci, c'est pas dans mes compétences je vais enlever tout ça ca ira plus vite
Merci de ta réponse

Ha cool ca fonctionne j'ai changer la position absolute de la thumbnail-div en position relative puis j'ai changer comme tu le dit le #cat en .cat et j'ai mis une propriété top/right et les deux navigateur affiche la même chose, merci beaucoup
Modifié par le_blogueur_masque (06 Nov 2008 - 15:18)