views:

572

answers:

5

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"&gt;
<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.

+4  A: 

You forgot the # in the color values.

body {
    background-color: #FF00FF;
}
.class1 {
    background-color: #00FFFF;
}
Gumbo
Genius! (you, not me!). Thanks.
Andrew M
+6  A: 

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.

Guffa
+1  A: 

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.

okoman
A: 

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

Allways validate your html code here.

glavić
That was only for this minimal-case example, it's external style sheets in the real thing.
Andrew M
A: 

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. anyone knows,please contact me at MSN: [email protected]