Our web design consultants provided us the static pages for one of our projects. It consisted of HTML CSS and Image files. We had to use these pages to create dynamic Intranet site. We started writing logics around the layout and converting the static site into a dynamic one. We had then a scheduled meeting with the design consultants to tell them if we have any questions or concerns with designs they have provided and believe me we had a number of them. We applied their CSS and HTML very diligently and compared several times using mozilla’s firebug and IE’s debugbar our dynamic code with their static one. We couldn’t figure out the differences however our layout was so poor than theirs.
Finally we presented them with a list of issues and guess what they solved it all by saying just “did you apply the doctype!!!”
<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
And we were wondering what on earth a doctype is and as they told us we copied the very first line in the html page in our template and aha we had our issues resolved.
We later found that by applying doctype we tell our browser to follow the standard conformance that browser developers are supporting against latest css and html specifications. When we do not apply the doctype declaration the page renders in quirksmode this allows pages designed for older browsers or pages that were not designed with standard conformance to render properly in the latest browser version.
One wonderful example of this can be IE’s interpretation of width of an element in BOX model with and without applying the doctype. Let’s try it with an example
First we create a boxModel.html file with a plain div.
<div class=’content’>
test
</div>
Then we apply CSS on this div.
.content {
padding: 10 px;
margin: 10 px;
width:50 px;
border: 1px solid red;
}
Now we first test this code in IE7 without the doctype declaration. The result appears like this.
Next we test this code with the doctype declaration. The results appear like this.
If we compare both the boxes we can see the difference in their width’s as.
This simply occurs because IE’s BOX Model is different from W3C (Standard) box model read this (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)
In IE Box Model the Width attribute is taken as Width of Entire Box and Width of Content will be calculated as:
50 -10(padding left) -10 (padding right) -1(border left) – 1(border right) = 28 px.
Where as in W3C Box Model the width of Content will be 50px;
So box 1 (in quirks mode) is 22 px smaller in width than box 2 (in standard Mode).
How we learned about “Quirks” Mode.
Quite helpful tip, especially during testing for the audiance still using older version of browsers.
I like the illustration you have done to make the concept clear. Keep up the good work.