I think every web developer or designer had at least one or more sleepless nights because a web page looked entirely different in all the different browsers on the market. It seems impossible to ever get rid of all the tiny and annoying differences but there are two main considerations that may minimize the effect…
1. Choosing a proper HTML DOCTYPE
The HTML DOCTYPE is a very important point to consider when starting to generate HTML output, because it can influence the appearance on different browsers drastically. There is a bunch of different Doctypes available and the most important effect is to trigger the so called Quirks mode in different browsers. Basically the Quirks mode is used to simulate former browser bugs to ensure, that pages that have been developed against these bugs are still displayed properly.
So to make sure that you won’t have to deal with these bugs choose at least a doctype from the Quirks comparison table that makes even the much loved Internet Explorer work in an “Almost standard” mode. I use to choose XHTML strict doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
because it can be handled like a normal XML document. Let’s just hope for HTML 5 where a
<!DOCTYPE html>
is enough.
2. Make your HTML valid
In October 2008 Opera published the markup validation report showing that in January 08 only 4.13% out of 3,509,170 pages validated against their Doctype.
So even if it may sound easy, especially in larger web projects or when using HTML generating Frameworks, CMSes or Plugins etc. it is really hard to ensure that all you pages have valid HTML, but it can save a lot of a hassle. It happened to me quite a few times, that seemingly browser specific displaying errors have been caused e.g. by a misspelled HTML tag and therefore invalid HTML. For local developing I’m using the HTML Validator Firefox Plugin. It has a lot of nice features and you can see if your page validates against the W3C validation algorithms in an instant.
If this article helped you, please consider to flattr it. Thanks.
