css background color disappears with doctype

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

  •  11-09-2019
  •  | 
  •  

Question

I'm trying to set background colours on a few different elements in an html page, but whenever I apply a doctype declaration the colours get ignored. Other styles seem unaffected. I'm sure I'm being an idiot.

It happens on IE7, FF3 and Chrome. With Strict and Transitional html 4 Doctype. Body and Div backgrounds are affected. A minimal example is below. If you delete the Doctype delcaration, it's rendered in all it's garish glory, with doctype - tedious black and white only.

<!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 - I'm not using XHTML because I think I once overheard a conversation in a pub between much cleverer people than myself who said that said you shouldn't declare XML unless the mime types are correctly set on your server. On my cheapo hosting account I can't do that sort of thing easily.

Was it helpful?

Solution

You forgot the # in the color values.

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

OTHER TIPS

The reason that the colors are ignored is because the declaration is incorrect. In quirks mode the interpretation is more relaxed, and the colors are accepted eventhough they are incorrect, but in standards compliant mode the declaration has to be correct.

Change FF00FF to #FF00FF, and 00FFFF to #00FFFF.

#FF00FF can also be written in the short form #F0F, and #00FFFF as #0FF.

In CSS you can define colors in RGB or Hex. This is what you did. But Hex-Colors are written like #rrggbb. You missed the #. Seems like when it comes to validation because a doctype is set, then such "almost-correct" color definitions are not interpreted correctly.

remove the following line

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org

then it'll be ok,but I don't know why.

Your should allsoo use <style type="text/css"> OR even better, don't use inline styling!

Allways validate your html code here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top