Home/ Questions/Q 300883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T06:57:17+00:00

The following snippet, with or without the DOCTYPE declaration, renders the <pre> content slightly

  • 0

The following snippet, with or without the DOCTYPE declaration, renders the <pre> content slightly differently, i.e., the without-DOCTYPE version renders the <pre> content with less height.

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -->
<!-- "http://www.w3.org/TR/html4/strict.dtd"> -->
<html>
  <head>
  </head>
  <body>
    <pre>1</pre>
  </body>
</html>

What causes this difference?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You, my friend, are seeing quirksmode in action.

    This has a long story behind it but to summarize it briefly:

    alt text
    (source: wikimedia.org)

    In the browser wars era (late 1990’s) every browser rendered html “its own way”. IE’s rendering was different from Netscape. By “rendering differently” I mean kind of what you are experiencing here.. only much, much, much worse.. a site you open in IE fine, would be just completely unusable in Netscape, because the tables would be skewed, or some button completely unreachable because it is off-screen or something.

    This resulted in pages that said things like “Best viewed in Internet Explorer 3.0” or “Best viewed in Netscape 4.0”. Lots of competition. Also icons like this:
    alt text
    (source: toastytech.com)

    All the while these people at W3C are publishing with improved “standards”. W3C kept saying “If each manufacturer stuck to the standard.. then we wouldn’t have any problems”. The W3C standard was supposed to be the CORRECT WAY to render HTML so it should look the same in all browsers. There is the the acid test to check css rules are implemented properly in the browser. If your browser implements it wrong it will look like a bloodspattered war scene (scroll down for sweet screenshots)..

    But Microsoft and Netscape were bent on destroying each other, so W3C’s calls to obey the standard were ignored..

    Quirksmode is the “old” rendering style of a browser. “Standards mode” is when the browser says “OK, we will do it the W3C way (the “right” way)”. Including a DOCTYPE at the top of your html page is a message to the browser that says “THIS PAGE is in standards mode, so please, render it in standards mode, and not your old quirky way.”

    So, your second example (with the plain <html> tag) renders in quirksmode because it lacks a DOCTYPE.

    The margin-top on the <pre> tag is different in quirks mode. Its smaller, in Firefox, at least. Other browsers it may be different.

    Try replacing your <pre> with

    <pre style=”margin:5px;”>1</pre>

    Both pages will look the same if you do that.

    • 0