Grow your CSS skills. Land your dream job.

HTML Declarations Screwing Up CSS

Published by Chris Coyier

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.

Comments

  1. David Mills
    Permalink to comment#

    I would question that as the best declaration, since IE doesn’t support it.

  2. You are absolutely right. I’ll update the article to better point that out.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".