So, I have the following in a css file:

.stdMSGtextBlueSolid {
    color: #FFFFFF;
    padding: 3px;
    background-color: #003595;
}
.stdMSGtextWhite {
    color: #000000;
    padding: 10px 20px 10px 20px;
    background: #ffffff;
    border: 1px #CCCCCC solid;
    text-align: center;
}

And on a page I'll have something like:

 <div class="stdMSGtextBlueSolid">
     Some text here
     <div class="stdMSGtextWhite">
         Some more text here
     </div>
</div>

All looks fine until I add a DOCTYPE to the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This is in a frameset, if that makes a difference. I get the same results using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

I'll admit, I'm a little confused by the entire doctype thing... What am I doing wrong here?

Update: Here are a few examples:

no doctype

doctype included

  • it's not the choice of doctype, it's the sloppy code that doesn't conform to the doctype when you add it. Tony Crockford almost 9 years ago

2 answers

2
points
This was chosen as the best answer

With no doctype, you will be invoking quirks mode in most browsers - which tends to be much more accepting of sloppy coding.

So, when you validate the no-doctype version, the validator (after complaining loudly about the lack of a doctype) only sees two errors. But validation against a specified standard (xhtml 1.0 transitional) finds 11 errors.

So, first fix the HTML errors - close the unclosed <pre>, add </head> and add the type="text/css" to the style element.

Then know that CSS selectors are case-sensitive, so .stdMSGtextBlue does not match class="stdMsgTextBlue" - hence the style is not applied.

Answered almost 9 years ago by Richard Grevers
  • Amen Nathan Duran almost 9 years ago
  • So far, much better...thanks very much for your help. Any advise on the best way to decide which doctype to use? Jason Reljac almost 9 years ago
  • you don't choose a doctype, you use the doctype to describe the code standard you are writing. if you're writing strict html 4 choose the doctype that reflects that. or just start writing htlm5 and use <!DOCTYPE html> <html lang="en"> Tony Crockford almost 9 years ago
1
point

First of all, I'm not sure you copied and pasted that code correctly, which makes your whole question suspect. There is a rule targeting the class "stdMSGtextWhite" in CSS, but no such element. There is, however, an element with class "stdMSGtextWhiteSolid". So there's might be more going on here than shown in your example that might affect the outcome.

However, assuming it's an innocent typo, I want to point out that the issue on the "with doctype" screenshot is not just background color! Your elements appear to have lost all the CSS instructions. I'm not sure how just adding a doctype can do this.

First, can you reproduce this issue in other browsers? I know many older browsers did not handle doctypes well. I don't know how this can affect CSS parsing. However, another possible solution is that the server outputing this sees the doctype and processes the output differently. For example, some application servers process output files with an XHTML doctype by returning them to the browser with mime-type "application/xml". This could horribly confuse some older, non-XML browsers like (I believe) IE6.

Answered almost 10 years ago by Eugene Zaretskiy
  • Yes, that was a typo - fixed now. I also added a few live examples. I've tried in FF 3.6, Safari on OS X and IE8. Same on all. Am I picking the wrong type and incorrect html tag? Jason Reljac almost 9 years ago
  • Why don't you post a live page rather than out-of-context snippets that no one can debug? Nathan Duran almost 9 years ago
  • I did...check my update. Jason Reljac almost 9 years ago