Jeffrey Palermo 11:58 am on July 5, 2005  

Consistent look in multiple browsers: Use a DOCTYPE – level 200

The <!DOCTYPE /> tag in an Html document is very fundamental,
but a good number of people don’t know what it is, and they don’t use
it.  If you are one of them, read on. 

The W3C makes standards recommendations for the web and DOCTYPEs is one of them. 
The Doctype tells the browser what content to expect and what set of
rules to apply.  Look at a web page you created with Visual Studio
2003.  You will notice that it defaults the Doctype to :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

If you only test your web applications in Internet Explorer, you
have probably, through trial and error, found the workarounds to make
your web pages look good.  Switch this top line in any page to:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

See what parts of your web page look messed up.  You will
see that CSS is rendered differently in some cases.  There are
plenty of resources on the web for learning the rules of a particular
Html version.  What you want to do is choose a Doctype that will
allow you to write a web page once and have it look good in multiple
browsers.  With that goal in mind, don’t use the Html 4.0
Doctype.  Use at least the Html 4.01 doctype.  There are some
specific CSS rendering *bugs* with the 4.0 Doctype, but you can study
those on your own if you wish.  Here’s a simple web page you can
use to see the difference each Doctype makes (with different browsers
as well). 

<html>
 <head>
  <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
  <meta http-equiv=”Content-Style-Type” content=”text/css” />
  
  <style type=”text/css”>
    #myDiv{
     background-color: yellow;
     padding: 5px;
     margin: 5px;
     border-style: double;
     height: 100px;
    }
  </style>
 </head>
 <body style=”margin:0px; background-color:AliceBlue”>
  

Hello, this is a div.

 </body>
</html>

This page is incomplete because it doesn’t have a Doctype at the top.  Choose a doctype from the W3C and
see how this page is rendered.  You won’t see any difference
between Html 4.01 and the Xhtml varieties.  This page doesn’t have
any mal-formed tags, so there’s no observable differences.  Note
that ASP.NET 1.1 server controls don’t render Xhtml, so it may be a
good idea to use the Xhtml 1.0 Transitional Doctype.  ASP.NET 2.0
server controls will render proper Xhtml.

With Internet Explorer, you can control “standards-compliant”
mode.  If your Doctype includes the full Url where the DTD can be
found, it will render with standards in mind.  If the full Url is
left out, it will render in old-style “Quirks mode”  Check out this page by Microsoft that explains how to ensure IE 6 renders in standards mode.

There are valid reasons to choose one Doctype over the other, and
currently I use Html 4.0, Html 4.01 as well as Xhtml 1.0
Transitional.  A gotcha is that VS 2003 puts the Html 4.0 Doctype
at the top of the page without the Url to the DTD.  Excluding the
DTD Url leaves IE in quirks mode, and will render pages differently
that other standards-compliant browsers.  To tell IE to use web
standards, add the DTD Url to the Doctype, and IE will switch its
rendering mode.

I would also recommend reading up on web standards. 
Doing that will take the mystery out of afternoons when you can’t
figure out why your pages don’t render as you expect them too.  If
you know the rules that are being applied, you can create your web
pages faster.