La couleur d'arrière-plan CSS disparaît avec doctype

StackOverflow https://stackoverflow.com/questions/599777

  •  11-09-2019
  •  | 
  •  

Question

J'essaie de définir des couleurs d'arrière-plan sur quelques éléments différents dans une page HTML, mais chaque fois que j'applique une déclaration doctype, les couleurs sont ignorées. D'autres styles ne semblent pas affectés. Je suis sûr que je suis un idiot.

Cela se produit sur IE7, FF3 et Chrome. Avec doctype strict et transitionnel HTML 4. Les arrière-plans du corps et du div sont affectés. Un exemple minimal est ci-dessous. Si vous supprimez le Doctype Delcaration, il est rendu dans toute sa gloire criard, avec du noir et blanc fastidieux uniquement.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
        body{background-color:FF00FF;}
        .class1{background-color:00FFFF;}
    </style>
</head>
<body>
    <div class="class1">Some Text</div>
</body>
</html>

BTW - Je n'utilise pas XHTML parce que je pense que j'ai entendu une conversation dans un pub entre des personnes beaucoup plus intelligents que moi qui a dit que cela disait que vous ne devriez pas déclarer XML à moins que les types de mime ne soient correctement définis sur votre serveur. Sur mon compte d'hébergement Cheapo, je ne peux pas faire ce genre de chose facilement.

Était-ce utile?

La solution

Tu as oublié le # dans les valeurs de couleur.

body {
    background-color: #FF00FF;
}
.class1 {
    background-color: #00FFFF;
}

Autres conseils

La raison pour laquelle les couleurs sont ignorées est que la déclaration est incorrecte. En mode bizarrerie, l'interprétation est plus détendue, et les couleurs sont acceptées bien qu'elles soient incorrectes, mais en mode conforme aux normes, la déclaration doit être correcte.

Modifiez FF00FF en # FF00FF et 00FFFF en 00FFFF.

# FF00FF peut également être écrit sous la forme courte # F0F et # 00FFFF comme # 0FF.

Dans CSS, vous pouvez définir des couleurs en RVB ou en hexadécimal. C'est ce que vous avez fait. Mais les couleurs hexagonales sont écrites comme #rrggbb. Tu as manqué le #. On dirait que lorsqu'il s'agit de validation car un doctype est défini, alors ces définitions de couleurs "presque correctes" ne sont pas interprétées correctement.

Supprimer la ligne suivante

Doctype html public "- // w3c // dtd html 4.01 transitional // en" "http://www.w3.org

Alors ça ira, mais je ne sais pas pourquoi.

Vos devraient utiliser AllSoou003Cstyle type="text/css"> OR even better, don't use inline styling!

Valide toujours votre code HTML ici.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top