list-style-image n’apparaît pas sous Firefox

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous, je rencontre un soucis avec les icônes de mes deux listes :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
li.me {
    font-size: 100%;
    display : list-item;
    list-style-image : url("css/images/puce-noire.png");
    padding-left: 10px;
}
 
li.you {
    font-size: 100%;
    display : list-item;
    list-style-image : url("css/images/puce.png");
    -moz-list-style-image : url("css/images/puce.png");
    padding-left: 10px;
}

L'icône s'affiche bien sous Safari / Chrome mais rien concernant Firefox. Que Faire ? Merci d'avance.

Édité par sparadra1

+0 -0

Tu ne donne pas beaucoup de détail, et ton titre n'est pas très explicite.

Et chez moi en mettant un CSS similaire au tient j’obtiens bien ma puce sur firefox (et chrome).

  • Es-tu sur que le lien est bon ? (Bon dans ce cas la ça ne devrais pas fonctionner sur chrome également)
  • Essaye de vider le cache sur firefox

Quel version de firefox as-tu ?

+0 -0

Essaye ce code (Et place ton image que tu nomme list.png dans le même dossier)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<ul>
    <li>Test</li>
</ul>

<style>
li{
    font-size: 100%;
    display : list-item;
    list-style-image : url("list.png");
    -moz-list-style-image : url("list.png");
    padding-left: 10px;
}
</style>

Chez moi la puce s'affiche correctement sur Firefox.

+0 -0
Staff

Un peu en retard, mais une petite remarque quand même :

1
2
list-style-image : url("list.png");
-moz-list-style-image : url("list.png");

En général il vaut mieux mettre les version préfixées en premier : c'est la version officielle qui doit être appliquée si elle est reconnue pour avoir la gestion la plus à jour.

Salut ! Essayes de mettre à zéro les propriétés CSS qui puissent entrer en conflit avec. Genre, si tu remplaces :

1
list-style-image : url("css/images/puce-noire.png");

Par :

1
list-style : none outside url("css/images/puce-noire.png");

Ou :

1
2
3
list-style-type: none;
list-style-position : outside;
list-style-image: url("css/images/puce-noire.png");

Est-ce que c'est différent ?

Bien le bonjour tous ! :)

+0 -0
Staff

La propriété barrée -moz-list-style-image est tout simplement parce qu'elle n'existe pas : list-style-image a toujours été supporté par Firefox sans aucun préfixe (cf. MDN).

La propriété list-style-image barrée a tout simplement été surchargée (par le sélecteur du haut), elle n'est donc pas appliquée.

Quant à l'URL de l'image, rappelle-toi bien qu'elle est calculée par rapport au fichier CSS : le css/ dans le chemin me parait donc superflu…

Édité par viki53

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte