[Résolu] Avertisement validateur CSS : bckgd-color et bckgd-image ?

Bonjour tout le monde !

Je me posais une petite question concernant le validateur CSS : quelle importance doit-on accorder aux avertissements qu'il fournit ?

Je m'explique...
J'ai testé ma feuille de style dont voici une partie :

 .rubrique a:hover{
 background-image:url(img/puce.gif);
 background-position: left;
 background-repeat: no-repeat;
 color: #015;
 }

et il m'indique cet avertissement :

a écrit :
Ligne : 101 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : .rubrique a:hover

Or comme c'est indiqué, j'ai définit pour le rollover une image de fond. Par contre, si je modifie mon script en tenant compte de l'avertissement indiqué, cela me donne ça :

 .rubrique a:hover{
 background-color:#fff;
 background-image:url(img/puce.gif);
 background-position: left;
 background-repeat: no-repeat;
 color: #015;
 }

Cela fonctionne toujours dans les différents navigateurs et le validateur css ne trouve plus aucun avertissement.

Ma question est donc la suivante :
vaut-il mieux définir une couleur de fond et une image de fond pour satisfaire le validateur, sachant que le code fonctionne parfaitement le cas échéant ou alors vaut-il mieux ne pas en tenir compte ?

Merci pour vos réponses...

Modifié par Cygnus (13 Nov 2005 - 14:46)

Bonsoir,

Parmi les cas les plus fréquents : le texte déborde de son conteneur en raison d'un agrandissement de taille des caractères par l'utilisateur. Sans couleur de fond définie, la partie qui déborde hérite de la valeur d'arrière-plan de la zone où se vient se placer... sans garantie d'un contraste suffisant.

Bonjour,

Je n'arrive pas à comprendre les avertissements récents du W3C sur le background-color qui doit toujours aller de pair avec un "color" .
Je pensais que les propriétés de color et background déclarées au niveau le plus haut (body par exemple) se répliquaient, par défaut, à tous les éléments enfants, sauf instructions propres indiquées pour des éléments précis.
Il me semble que c'est cela la notion d'héritage.
Me trompe-je ?
J'ai modifié ma feuille CSS et maintenant je la trouve redondante.
qu'en pensez-vous ?

-----------------

/*css inspiré en partie depuis alsacreation */
body {
margin: 10px 0;
padding: 0;
text-align: center;
font: 85% "Trebuchet MS", helvetica, sans-serif;
background:#e8ecff url('../biblio_images/backgrd/bg_fonddegrad.jpg') repeat-x top left ;
color: #000000;
}

div#conteneur {
width: 770px;
margin: 0px auto;
text-align: left;
border: 2px solid #ab4;
color: #000000;
background-color:#fff;
}

#header{
height: 150px ;
}

ul#globalNav{
height: 35px ;
margin: 0 0 0 0;
line-height:35px;
padding: 0em 0.5em 0.1em 0;
list-style-type: none ;
}

ul#globalNav li
{
float: left ;
text-align:center;
letter-spacing: 1px ;
color:#069;
background-color:#E6EBFF;
line-height: 10px ;
font-size: 105% ;
display:inline;
}

ul#globalNav a
{
width: 130px ;
line-height: 10px ;
display: block ;
text-decoration: none ;
border-right: 2px solid #69C ;
}

ul#globalNav a:hover{
background: #fff url("../racine/bg_boutbleu.gif") repeat-x 0 0;
color:#069;
}

#menugauche {
float: left;
width: 12em;
border: 1px;
padding: 0.5em 0 0.1em 0;
margin: 5px 5px 0px 0;
color:#069;
background-color:#fff;
}

#menugauche a {
line-height:2em;
text-decoration:none;
}

#menugauche ul{
font-size:105%;
list-style-type:none;
margin:0 1em 0 0.5em;
padding: 0.1em 0 0;
}

#menugauche li {
list-style-type:none;
line-height:2.4em;
margin:0px;
padding: 0px;
display:block;
width: 5em;
}
#menugauche li a:link,a:visited,a:active {
text-decoration: none;
color: #069;
background-color:#FFFFFF;
font-weight:normal;
}
#menugauche li a:hover{
text-decoration: none;
color:#003399;
background:#fff url("../racine/bg_boutbleu.gif") repeat-x 0 0;
cursor: default;
}
#menugauche a span { /* définition de la balise <span> incluse dans <a> */
display: none;
}
#menugauche li span {
font-size: 120%;
color: #003088;
background-color:#FFFFFF;
font-weight: bold;
line-height:1.4em;
}
#menugauche a:hover span {
display : block;
position: absolute;
font-size:80%;
left: 10px;
width: 150px; /* largeur de la zone de commentaires, selon la taille du menu */
text-align: left;
border-top: 1px solid gray;
color: #FF6666;
background-color:#FFFFFF;
}
#menugauche h3 {
font-size: 1em;
color: #003088;
background-color:#FFFFFF;
font-weight: bold;
}
#menugauche h5{
color: #003399;
background-color:#FFFFFF;
}

div#content {
margin-left:16em;
padding: 0 25px 0 10px;
background-color:#FFFFFF;
color:#000000;
}
div#content h1 {
font-size: 150%;
font-variant:small-caps;
color: #003088;
background-color:#FFFFFF;
padding-bottom:0.2em;
margin-bottom:1em;
font-weight: bold;
}
div#content h2 {
padding-left: 15px ;
line-height: 25px ;
font-size: 140% ;
color: #6699CC;
background-color:#FFFFFF;
border-bottom: 1px solid #69C ;
}

div#content h3 {
margin-top:1em;
font-size:120%;
margin-left: 15px ;
padding-left: 0px;
color: #003399;
background-color:#FFFFFF;
}
div#content h4{
margin-top:0.2em;
margin-bottom:inherit;
font-size:100%;
margin-left: 0px ;
padding-left: 0px;
color: #0000A0;
background-color:#FFFFFF;
}
div#content h5 {
margin-top:1em;
font-size:90%;
margin-left: 0 ;
padding-left: 15px ;
color: #009999;
background-color:#FFFFFF;
border-left: 2px solid #009999;
}
#content q {
font-size:105%;
font-style:italic;
font-weight:normal;
color: #039;
background-color:#FFFFFF;
}

#content p {
text-align: justify ;
text-indent: 0 ;
line-height: 1.7em ;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}

p.legende {
font-size: 0.8em;
color:#006699;
background-color:#FFFFFF;
}

.citation {
font-size: 1em;
font-style:italic;
color: #039;
background-color:#FFFFFF;
line-height: normal;
font-weight: normal;
}

.important{
border-left: 2px solid #f00;
background: #fee;
color:#000000;
}

.gras {
font-variant: normal;
color:#000099;
background-color:#FFFFFF;
font-weight : bold;
letter-spacing: 0.05em;
}

#content a {
color: #00C;
background-color:#FFFFFF;
display:block;
}

#content a:hover {
color: #03C;
background-color:#FFFFFF;
}

#content li {
list-style-image: url(../racine/puce-1.gif);
}

#pied {
clear:both;
height: 40px;
color:#000000;
background-color: #D9E1FF;
text-align: center;
font-size:10px;
}

img.fright {
float: right;
margin: 0 0 1em 1em;
font-size: 0.8em;
color:#006699;
background-color:#FFFFFF;
border:0;
text-align:center;
vertical-align:middle;
}

img.fleft {
float: left;
margin: 0 1em 1em 1em;
font-size: 0.8em;
color:#006699;
background-color:#FFFFFF;
border:none;
text-align:center;
}

a img{border:0;}

div.fleft {
float: left;
margin: 1em 1em 1em 0;
clear: both;
}
pre
{
overflow: auto ;
background: #dea ;
color:#006699;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
-------

Bonjour,

@jaine:
Merci d'éditer ton post pour présenter lisiblement ton code comme demander dans les règles.

@Djgronazz:
Bienvenue, sur Alsacréations . Ravi que ton souci soit réglé mais était-ce bien pertinent de le poster .
Tu peux si tu le souhaites passer par le bar du forum dans le topic unique des présentations.