A cor de fundo do CSS desaparece com Doctype

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

  •  11-09-2019
  •  | 
  •  

Pergunta

Estou tentando definir cores de fundo em alguns elementos diferentes em uma página HTML, mas sempre que aplico uma declaração doctype, as cores são ignoradas. Outros estilos parecem não afetados. Tenho certeza de que estou sendo um idiota.

Isso acontece no IE7, FF3 e Chrome. Com html 4 rígido e transitório Doctype. Os fundos do corpo e da div são afetados. Um exemplo mínimo está abaixo. Se você excluir a Doctype Delcaration, é renderizada em toda a sua glória extravagante, com apenas Doctype - apenas em preto e branco.

<!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 - não estou usando o XHTML porque acho que uma vez ouvi uma conversa em um pub entre pessoas muito inteligentes do que eu que disse que isso dizia que você não deveria declarar XML, a menos que os tipos de MIME estejam corretamente definidos no seu servidor. Na minha conta de hospedagem barata, não posso fazer esse tipo de coisa facilmente.

Foi útil?

Solução

Você esqueceu o # nos valores de cores.

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

Outras dicas

A razão pela qual as cores são ignoradas é porque a declaração está incorreta. No modo peculiaridades, a interpretação é mais relaxada e as cores são aceitas, apesar de estarem incorretas, mas no modo compatível com padrões, a declaração deve estar correta.

Altere FF00FF para #FF00FF e 00FFFF para #00FFFF.

#Ff00ff também pode ser escrito no formulário curto #f0f e #00ffff como #0ff.

No CSS, você pode definir cores em RGB ou Hex. Isso é o que você fez. Mas as cores hexadecrais são escritas como #rrggbb. Você perdeu o #. Parece que, quando se trata de validação, porque um doctype está definido, essas definições de cores "quase corrigidas" não são interpretadas corretamente.

Remova a seguinte linha

Doctype html public "-// w3c // dtd html 4.01 transição // pt" "http://www.w3.org

Então vai ficar tudo bem, mas não sei por quê.

Seu uso deve usaru003Cstyle type="text/css"> OR even better, don't use inline styling!

Sempre valide seu código HTML aqui.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top