[Résolu] list-style-image n’apparaît pas sous Firefox • Forum • Zeste de Savoir

sparadra1, samedi 05 mars 2016 à 18h17
Modifié

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

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.

05/03/16 à 18h17
Modifié

+0 -0

artragis, samedi 05 mars 2016 à 18h25

Qu'as-tu sur firefox (peux-tu faire une capture d'écran stp)?

05/03/16 à 18h25

+0 -0

WinXaito, samedi 05 mars 2016 à 19h20

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 ?

05/03/16 à 19h20

+0 -0

sparadra1, samedi 05 mars 2016 à 20h23
Modifié

Firefox est à jour ( je viens de le mettre à jour et de tester ) Le cache est vidé chrome Firefox

05/03/16 à 20h23
Modifié

+0 -0

Arius, samedi 05 mars 2016 à 21h21

Plop, peux-tu éditer ton sujet et mettre un titre plus adapté stp ?

05/03/16 à 21h21

"Throw me to the wolves and I will return leading the pack." — Seneca

+0 -0

sparadra1, samedi 05 mars 2016 à 21h56
Modifié

C'est fait

Enfin une communauté active (non je ne vais pas sur openclassroom la plupart du temps )

05/03/16 à 21h56
Modifié

+0 -0

WinXaito, samedi 05 mars 2016 à 22h06

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

<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.

05/03/16 à 22h06

+0 -0

viki53, vendredi 11 mars 2016 à 10h48

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.

11/03/16 à 10h48

Mes tutos / Blog d’un dev(ops) Web

+0 -0

Buddy, vendredi 11 mars 2016 à 16h42

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 ?

11/03/16 à 16h42

Bien le bonjour tous !

+0 -0

sparadra1, vendredi 11 mars 2016 à 18h13

J'ai essayé toutes vos propositions mais rien :/

11/03/16 à 18h13

+0 -0

viki53, vendredi 11 mars 2016 à 18h34

As-tu ouvert les outils de développement pour voir s'il y avait une quelconque erreur (dans les styles ou dans les requêtes réseau) ?

11/03/16 à 18h34

Mes tutos / Blog d’un dev(ops) Web

+0 -0

sparadra1, vendredi 11 mars 2016 à 21h27
Modifié

J'ai désactivé le js du chat qui m’empêcher de voir le code css des <li> dans la console. Et les propriétés sont barrées

11/03/16 à 21h27
Modifié

+0 -0

viki53, vendredi 11 mars 2016 à 21h44
Modifié

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…