HTML Declarations Screwing Up CSS
Has your CSS ever been acting funny on you, but it looks as if you’ve done everything perfectly? It just might be your HTML declarations that are screwing you up. Sometimes when you are just throwing together a little sample, you just use the <html> tag to start your page and everything works just fine. As things get more complicated, and you forget to use a “real” declaration, you may notice things not behaving as you intended. For example, using this little trick to center something isn’t working:
.page_wrap {
margin: 0 auto;
}
Make sure you are using a page declaration that will support such wizardry. The example below is the most common and should be your go-to HTML declaration used on every page unless you are doing something specific and weird and you know what you are doing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
For a really nice explanation of the different page declarations check out this HTML Dog article.
UPDATE: Reader David points out that the declaration above isn’t exactly the best choice for a declaration being that it isn’t supported by IE. After some tests the following declaration seems healthy in both old IE and modern browsers:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
For Microsoft’s explanation on the subject, read here.
Loading ...
1
I would question that as the best declaration, since IE doesn’t support it.
Comment by David Mills — July 23, 2007 @ 11:39 am
2
You are absolutely right. I’ll update the article to better point that out.
Comment by chriscoyier — July 23, 2007 @ 11:56 am