[Positionnement CSS] Bug sous Opera

Bonjour a tous,

Alors, j'ai fait un site présentant différent produit de carton. Pour cela j'ai fait un systeme en CSS sur le modele d'une infobulle et au passage de la souris la chemise change de couleur.

Pour voir par vous même, le lien est ICI

Si vous êtes sur Firefox, IE6, IE 7, pas de problème.

Mais si vous êtes sur Opera, ça ne fonctionne pas bien du tout.

Deja les chemises ne se positionnent pas correctement mais en plus elle ne sen vont pas super bien quand on a retirer la souris de la couleur voulu.

Screen:



Ensuite voici un bout de mon code XHTML:

<a class="infol" href="#"><img src="images/cf/CFbleu1mini.jpg" alt="bleu" width="100" height="100" /><span><img class="nobordure" src="images/cf/chemise/chemisebleufonce.gif" alt="bleucfgrand" width="549" height="436" /></span></a>

Et le code CSS correspondant:

a.infol {
position: relative;
text-decoration: none;
color: black;
cursor:default;
}
a.infol span {
display: none;
}
a.infol:hover span {
display: inline;
position: absolute;
top: 26px !important;
top: 114px;
left:113px;
}

Merci d'avance, je précise que j'ai rechercher dans le forum et la faq et que j'avais trouver ce post mais je ne comprend pas très bien les reponse qui lui ont été apportés.
Modifié par TiB (17 Dec 2006 - 15:58)

Up

Bonsoir TiB,

D'après un rapide essai, en passant les liens concernés en display:block; on obtient le même résultat avec Opera qu'avec Firefox (je n'ai pas regardé au pixel près non plus). En revanche cela obligerait à redéfinir les valeurs, du moins pour "top".

Sinon la feuille de style pourrait être considérablement car il y a beaucoup de déclarations identitiques. Soit en choisissant un sélecteur plus approprié, soit en les regroupant par exemple.

Salut, merci d'avoir repondu déja

Alors apres un essai, le display:block n'a pas l'air de marché., j'obtient la même chose que pour display:inline.

C'est a dire que la chemise bug, ne sen va pas tres bien ...

Une autre idée?
Modifié par TiB (22 Dec 2006 - 19:19)

Up

TiB a écrit :
Alors apres un essai, le display:block n'a pas l'air de marché.

Je viens de restester et l'application du display:block aux liens me donne bien exactement le même résultat avec Firefox et Opéra.
Modifié par Alan (27 Dec 2006 - 00:37)

a écrit :
Je viens de restester et l'application du display:block aux liens me donne bien exactement le même résultat avec Firefox et Opéra.

Tu entend quoi par la, car j'ai beau appliquer un display block, Opera fait toujours la tête chez moi.

Voici ce que j'ai fait:

a.infol {
position: relative;
text-decoration: none;
color: black;
cursor:default;
}
a.infol span {
display: none;
}
a.infol:hover span {
display: block;    //AU LIEU DE inline         MODIF ICI
position: absolute;
top: 26px !important;
top: 114px;
left:113px;
}

Modifié par TiB (28 Dec 2006 - 00:07)

Non, au lien lui-même (ici a.infol) et non à l'élément span

A+

Ah ok, ça marche impec, voila un probleme qui me fesais vraiment cogiter ^^.


MERCI BEAUCOUP