Does your new web design look slick and professional in Firefox but more like a ransom note in Internet Explorer 7? Frustrated by the seemingly impossible task of trying to get your web site to look the same across multiple browsers?
Just a few years ago, back in the days of the dreaded Netscape 4, web developers had to write lines and lines of css “hacks” to make pages work across all popular browsers and platforms. While modern browsers still have their differences, the gaps have narrowed dramatically as they’ve become increasingly standards compliant.
If you’re still having major problems with cross-browser page rendering, it could be something as simple as your Doctype!
A doctype is a statement which should be the first line of all your web pages. I emphasize “should” because I’m surprised at the number of times I look at the source code for a page and find it missing! Lots of automated site building software is guilty of this omission, including older versions of Microsoft’s FrontPage.
What is a Doctype?
Simply put, the doctype is a statement which tells browsers how to interpret the code on the rest of the page. It tells the browser what “rules” to apply, including which html tags and attributes are to be considered valid.
What many people fail to realize is that using certain doctypes or none at all will tell modern browsers to drop back and emulate earlier versions of themselves. Commonly called “quirks mode” or “compatibility mode”, this can do some very strange things – for example it tell IE7 to emulate all the oddities that were present in IE5, like the “box model” issues!
Which Doctype to use?
If you want standards-compliant rendering across a number of browsers, there are 3 options I recommend for most web sites (sites using Frames and sites intended for mobile devices have their own considerations which I’m ignoring for now).
HTML4.01 Strict – Currently, this is my first choice for most new sites. What? No XHTML, you say?
Due in part to issues concerning the suitability of XHTML for ordinary web pages W3C has committed to the future of HTML and is working on development of the standards for HTML5.0. HTML is very much alive and well and perfectly suited to most web sites.
The proper doctype for HTML4.01 Strict is:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML4.01 Transitional – “Transitional”, you say? Yes, this is a standards compliant doctype as long as you use the entire statement. The correct doctype for HTML4.01 Transitional is:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
It is frequently abbreviated to:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” >
THIS IS NOT THE SAME THING! The shortened “half doctype” version will throw browsers into quirks mode!
When would you choose HTML4.01 Transitional? Generally it’s useful if you have a table-based website layout or complex tables (it actually makes Firefox render in something called “almost standards” mode – you can learn more about that here). Or if you insist on using deprecated html tags like <center> or <font>.
XHTML – Transitional or Strict:
I don’t recommend XHTML for reasons I hinted at earlier (the analysis I referenced is a must-read, so I’ll link to it again), but if you insist on using it, here are the correct doctypes for XHTML1.0 transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
or XHTML 1.1:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
Make sure you code to the standards of the version you use !
Note that if you put anything before the doctype, including an xml prolog or a blank line, IE will drop back to quirks mode rendering!
For more information on all of thesethese doctypes, see their respective dtd’s at W3C.org.
Legacy sites:
If you’re modifying a page which already “works” in compatibility mode, don’t go adding or changing the doctype unless you have plenty of time to retest and make the appropriate changes. If it ain’t broke, don’t fix it!
If your page STILL looks dramatically different across common browsers, it could be because of invalid code. I’ll talk about that some other time.
[tags]web sites, web development, doctype, browsers, web standards, web design[/tags]