[Résolu] Background étrange sous Opéra

Bonjour à tous,

j'ai un petit soucis avec mon site web, en effet le peu que j'ai testé marche presque parfaitement sous Ie 7, 8 et 9, idem sous Firefox 3 et 4, Safari et Google Chrome sont également ok.
Mais sous Opéra, voilà que j'ai un léger bug que je n'arrive pas à résoudre tout seul. Dans le menu vertical de mon blog (à droite), j'ai remplacé les puces des listes par des images appelées grâce à du CSS dans des balises <span> vides (oui je sais, c'est mal !). Sur tous les autres navigateurs, je ne rencontre aucun problème de fonctionnement, mais sous Opéra, mes puces remontent lorsque je fais un hover et se comportent étrangement.

Bref, je vous laisse constater par vous-même : http://www.alibi-sasori.net/blog

Et merci d'avance à tous.
Modifié par sasori (14 Jun 2011 - 08:24)

Bonjour,

Bon je devrais pas le dire mais l'effet que ça faisait m'a bien fait marré, c'était sympa

J'ai pas testé le changement sur les autres navigateurs, mais en effectuant les changements suivant dans le css ça marchera sous opera.

Pour "#sidebar_right .block a span" :
- enlever le position:absolute
- modifer en display:inline-block;
- rajouter padding-right:5px; (pour décaler l'image du texte)

Edit : ça marche aussi sous FF, par contre pour que ça s'aligne bien comme avant il faudra modifier le padding-left dans "#sidebar_right .block a" et "#sidebar_right .block a:hover"
Modifié par Natha (02 Jun 2011 - 18:25)

Salut,

Passe ton code au validateur
Tu as des <ul class="menu block"> qui se promènent tout seul dans ton html ...
Peut être que ...

Bonsoir, et tout d'abord, merci pour votre aide.

@Natha : Pour info, moi aussi ça m'a bien fait marrer... On aurait dit les lianes qui grimpent dans "Super Mario World."
Alors j'ai essayé ce que tu m'as dit et tout fonctionne impec, en partie grâce à la fonction "display:inline-block;" alors pour ça : MERCI.
J'ai encore quelques trucs à régler car j'installe une fonction -moz-transition sur ces liens, mais à part ça, le reste roule comme sur des roulettes.

@Ghost : merci pour cette info car effectivement, j'avais placé des balises <ul> au lieu de balises <div> ; mon fichier est corrigé sur ce point.
Concernant la validation dont tu parles, peux-tu m'expliquer comment tu fais en ce qui te concerne. Merci d'avance (sachant que moi je suis sous Dreamweaver CS4).

Je fais encore quelques corrections et je mettrai le nouveau fichier CSS accompagné des modifications html en ligne dans la journée de demain.

Merci encore de votre aide précieuse.

De rien

Bonjour,

Pour faire court, concernant la validation html et css, http://openweb.eu.org/ressources/validation ou utilise firefox + firebug + web developer qui te fourniront des outils puissants pour le développement

Quelques détails
Les ul ne doivent contenir que des <li></li> donc exit les h2
Pour tes puces tu te compliques la vie, un background sur tes <a> en display: block + un padding-left qui va bien devrait simplifier (améliorer) ton code

<h2>mon titre</h2>
<ul class="classe-menu">
<li><a href="#" title="titre-lien" > item1 </a></li>
....
</ul>

li a{
display: block;
background: url(ma-puce.jpg);
background-repeat: no-repeat;
background-position: center left;
padding-left: largeur de ma puce et plus;
}

Modifié par ghost (03 Jun 2011 - 12:47)

Salut Ghost,

et merci pour tes précieux conseils, je suis en train de faire la validation et de corriger les défauts de mon code.
Concernant les balises <h2> ; je ne comprends pas car chez moi elles apparaissent dans une <div> puis vient ensuite, viennent les <ul>... Peux-tu être plus précis s'il te plait ?
Pour ce qui est des puces, il me semble avoir essayé la manière que tu énonces mais en vain ; je crois à cause d'un background déjà existant (les pointillés).
Je vois ça dès que j'ai nettoyer mon code.

Encore une fois, merci de ton aide, c'est cool.

Je viens de mettre online les mises à jour déjà effectuées et controlées... si l'un de vous deux veut jeter un oeil...

Bonne journée !