Doctype takes styles away 1

[UncleMortis]

Hi, I just added doctypes to a website I was working on. The pages are valid now that I've added the doctype but it's taken the styles away from my paragraphs. I had my paragraphs centered and 60% of the width, now they aren't. I take away the doctype and it all goes to the way it should be. The site is

http://www.thebookproject.com.au.

If someone can have a look and see what's going on as for the life of me I can't see it other than the doctype, which incidentally works on another site I've done

http://www.corneroftheattic.com.au

and it does what it's supposed to... Arghhh!

 

[Vragabond]

In your CSS you have:

width:"60%";

In css, the only attributes that need to be put inside quotes are font names with more than one word in their name. For everything else, quotes must not be used. Without a doctype, your browser is in quirks mode and is more lenient to allow mistakes like the one above to pass and still apply them. With a doctype, in standards-compliance mode, the attribute will simply get ignored because it is constructed illegaly.

Remove the quotes from the width declarations and you will see it work.

 

[UncleMortis]

I'd taken the Doctype out of the documents and it caused them to appear the way they should. Have I slipped behind in Css as I have always put a percentages, words 100px 0.9em, etc into " " because they wouldn't work without them. Has this changed? Thanks heaps for pointing this out as it was driving me silly.

 

[Vragabond]

Attributes in html need to be quoted. So, instead of:

<input type=text name=myField size=20 class=myFieldClass>

you do

<input type="text" name="myField" size="20" class="myFieldClass" />
or 
<input type='text' name='myField' size='20' class='myFieldClass' />

However, in CSS, quoting must in most cases not be used (just about all the values), is advised against (quotes around a file reference in the url() command). AFAIK, it is only needed when specifying font families where font name is comprised of two or more words.

.myElement {
  width: "100px";
  border: "1px dotted red;";
  margin: "0 auto";
  font: "normal 1.2em/1.5em Times New Roman, serif";
}

.myElement {
  width: 100px;
  border: 1px dotted red;;
  margin: 0 auto;
  font: normal 1.2em/1.5em "Times New Roman", serif;
}