Discussion :

[laurentSc]

Bonjour,
j'ai indiqué dans mon CSS une couleur de fond jaune et pourtant elle est verte. Comment se fait-ce ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="divtable-cell-150 fond-colore-yellow">unactive license</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.divtable-cell-150 {
    display:table-cell;
    padding:6px;
    width:150px;
}
.fond-colore-yellow{
    background-color:yellow;
    color:white;
}

[NoSmoking]

Bonjour,
aucune raison sauf si :

• le cache n'est pas vidé ;
• un sélecteur autre à plus de poids ;
• et peut être !!!

[laurentSc]

Pour être sûr d'éliminer le problème du cache, j'ai rebooté le PC.

Pour la question du poids des sélecteurs, existe-t-il un outil pour faire le calcul ?

[Doksuri]

clique-droit sur l'element > inspecter l'element
=> dans la console, ca t'as ouvert l'onglet "elements" > dans la colonne de droite : t'as l'onglet "style"
==> ca te liste tous les styles appliques a l'element (et qui ecrase quoi)

[laurentSc]

==> ca te liste tous les styles appliques a l'element (et qui ecrase quoi)

J'ai suivi tes indications. Mon navigateur est Google Chrome. J'ai bien les 2 onglets "éléments" et "style". Il y a bien la liste des styles appliqués (dont

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.fond-colore-yellow {
    background-color: yellow;
    color: white;
}

(avec un carré vert en face de background-color: yellow;). Il y a certaines règles barrées ; comme

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div {
    display: block;
}

mais déjà, pas background-color: yellow;, et en plus aucune indication de qui l'a écrasée...

[NoSmoking]

Pour être sûr d'éliminer le problème du cache, j'ai rebooté le PC.

Un Ctrl + F5 est suffisant.

existe-t-il un outil pour faire le calcul ?

fait une recherche avec ton moteur de recherches préféré avec comme mots clé : « CSS Specificity Calculator »

(avec un carré vert en face de background-color: yellow;).

ne serait ce pas yellowgreen alors ? sinon il nous faudrait le contexte.

Essaie en mettant simplement #FF0 à la place de yellow.

[laurentSc]

Un Ctrl + F5 est suffisant.

Oui, j'avais des doutes sur son efficacité.

Essaie en mettant simplement #FF0 à la place de yellow.

Même chose.

sinon il nous faudrait le contexte.

J'ai reproduit le problème sur un code très simple (la partie html, sachant que je n'ai pas touché au CSS) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="fond-colore-yellow">du texte</span>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
ul {
    list-style-type: none;
}
 
table {
    border-collapse: collapse;
}
 
td {
    padding-left:15px;
    padding-right:15px;
    padding-top:5px;
    font-weight:bold;
}
 
.entoure {
    border: medium solid #000000 !important;
}
 
.gras {
   font-weight:bold !important;
}
 
.border_double_bottom {
    border-bottom : double thick;
    border-bottom-width:10px;
}
 
.tdblue {
    color:blue;
}
 
.tdbkglightgrey {
    background-color:lightgrey;
}
 
.icone {
    width: 50px;
    height: 15px;
    background-image: url("mon-image3.png");
    background-repeat:  no-repeat;
}
 
.icone-r { background-position: center 5%; }
.icone-o { background-position: center 50%; }
.icone-v { background-position: center 95%; }
 
.divtable{
    display:table;
}
 
.divtable-row{
    display:table-row;
}
 
.divtable-cell {
    display:table-cell;
}
 
.divtable-cell-150 {
    display:table-cell;
    padding:6px;
    width:150px;
}
 
.fond-colore-green{
    background-color:green;
    color:white;
}
 
.fond-colore-yellow{
    background-color:#FF0;
    color:white;
}
 
.fond-colore-red{
    background-color:red;
    color:white;
}

Dans mon IDE, en face de background-color:#FF0;, il y a un carré vert...

[laurentSc]

Bonjour,
je reproduis le problème avec un code simplissime !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <!doctype html>
    <html lang="fr">
    <style>
        .fond-colore-yellow{
            background-color:#FF0;
        }
    </style>
    <head>
        <meta charset="utf-8">    
    </head>
    <body>
    <span class="fond-colore-yellow">du texte</span>
    </body>
    </html>

[ProgElecT]

Salut

Avec ton code minimaliste

impossible de reproduire ton problème.

[laurentSc]

Mais tu as aussi un fond vert alors qu'on a demandé un fond jaune ! C'est bien ça le problème...

[mathieu]

j'ai ouvert l'image de ProgElecT avec gimp et les 2 zones jaunes ont le code couleur #FFFF01
c'est peut-être un effet d'optique ou un problème de votre écran si vous les voyez vert.

[laurentSc]

Merci d'avoir regardé. Comme vous dites que ça vient peut-être de l'écran, j'ai regardé sur un autre PC (j'en ai 2), et c'était bien jaune ! Donc, OK.

[ProgElecT]

j'ai ouvert l'image de ProgElecT avec gimp et les 2 zones jaunes ont le code couleur #FFFF01
c'est peut-être un effet d'optique ou un problème de votre écran si vous les voyez vert.

Oui la compression jpg à modifié la couleur, mais quand je vérifie avec la pipette directement sur l'écran je retrouve bien #FF0.
Comme quoi il ne faut pas prendre à la lettre se qui est rendu sur nos écrans.