Simple HTML standards question, DOCTYPE messes the CSS [closed]_问答_开发者

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 9 years ago.

a very basic question:

When I include the DOCTYPE at the beginning of my .html document:

<!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">

It messes only a small part styling of the page.

Here you can see a live example:

Without DOCTYPE (Right) - With DOCTYPE (Wrong)

I think I kind of "know the answer", (besides that the HTML a开发者_运维百科nd CSS seems to be written by a smart chimp), the problem seems to be that some of the elements of the CSS I'm using are not part of the standards of the DOCTYPE I'm using and because of this, some parts are not loaded (in plain English).

That's just me guessing but if this is the case, I would like to know which elements am I using that I should´t and (if specific enough) a "general guide" as to how should they be used.

Thanks in advance!

Try adding px after the 700 in your body style (and everywhere you specify a width in css)

The reason for this is that adding a doctype puts the browser into standards mode (a good thing). You should run your css through a validator to catch errors you get in standards mode.

Sorry! We found the following errors (5)

line # Error

2 body Value Error : width only 0 can be a length. You must put a unit after your number : 700 700

18 p.titulo Property text-shadow doesn't exist in CSS level 2.1 but exists in : 2px 2px 2px #aaa 2px 2px 2px #aaa

140 #rect Value Error : width only 0 can be a length. You must put a unit after your number : 235 235

151 #form Value Error : width only 0 can be a length. You must put a unit after your number : 235 235

174 #navcontainer ul Value Error : margin only 0 can be a length. You must put a unit after your number : 5 5

The only thing a browser uses the DOCTYPE declaration for is to switch between "Standards Mode" and "Quirks Mode" (and sometimes "Almost Standards Mode"). What it affects is slightly different across browsers.

The main difference (and the biggest one) is that in IE6 it switches between IE's old proprietary CSS Box Model and the "standard" W3C box model which affects how widths and heights are calculated.

http://en.wikipedia.org/wiki/Quirks_mode

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Unless you know what you're doing you are much better off choosing a DOCTYPE that puts you in Standards Mode

Note that the doctype you're using lands you in "limited quirks mode"/"almost standards mode". The right one would be

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

if you insist on XHTML (you shouldn't), or

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

if you insist on an obsolete version (you shouldn't), or

<!DOCTYPE html>

if all you need from a doctype is standards mode (it is).

The CSS for your page is perfectly fine, in the sense that they are valid and correct. Remember that Quirk mode, which is the mode that browsers go into when there's no/invalid doctype is IE5.5 mode, what you were really doing before this was to compensate for the semi-broken box model introduced by IE5.5.

Having said that, you might want to clean up your HTML first before moving on to the CSS. The <b> tag ~~is officially deprecated~~ are not recommended because they are presentational elements, so you should wrap a span around that bit of the title, and giving it a font-weight: bold instead.

You should also be using labels for your forms. You can then group the label - input pairs together using a list.

Finally, as for the title, you can simply remove all the relative positioning, and use text-align: center, or, if you need the text to be centered but right aligned, a fixed width and margin: 0 auto. Do the same for your main content, and throw away all of the relative positioning and negative margin used to center your content.