title: How do I make Standards mode work as well as quirks mode?
body: <p>The following Html works great for me in FireFox or IE7/8 (with or without the Style Tag)</p>
  
  <pre><code>&lt;!-- Deliberately no DocType to induce Quirks Mode --&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          Input.quirks
          {
              margin: 1px 0px 1px 0px;
              border: solid black 1px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  Should work in Quirks Mode &lt;br /&gt;
      &lt;input class="quirks" type="text" style="width: 300px;" /&gt;&lt;br /&gt;
      &lt;input class="quirks" type="text" style="width: 147px;" /&gt;&lt;img src="./Graphics/SpacerPixel.gif" border="0" /&gt;&lt;input class="quirks" type="text" maxlength="25" style="width: 150px;" /&gt;&lt;br /&gt;
      &lt;input class="quirks" type="text" style="width: 94px;" /&gt;&lt;img src="./Graphics/SpacerPixel.gif" border="0" /&gt;&lt;input class="quirks" type="text" style="width: 100px;" /&gt;&lt;img src="./Graphics/SpacerPixel.gif" border="0" /&gt;&lt;input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However I am told that the absence of a DocType at the top of said HTML is causing both both browsers to work in "Quirks" mode.</p>
  
  <p>I am told this is bad.</p>
  
  <p>I have tried several DocTypes but have not found a DocType/HTML combination which yields a correct rendering in both browsers.</p>
  
  <p>Anything other than "Quirks" mode causes the browsers to react differently to the attempt to set the width of a textbox. This seems to lead to a position where I can correct my instructions for either FF or IE and suddenly the other will fail. </p>
  
  <p>Some detail...</p>
  
  <p>1.> The objective here is that the 3 rows should appear to be the same width exactly when rendered in each browser. It is not nessecary that the rendered widths are the same across browsers, merely that they appear correctly justified/alighned inside each browser.</p>
  
  <p>2.> The image referenced is a spacer image 3 pixels wide and 1 high (an alternative to this would also be good)</p>
  
  <p>3.> I do not want to introduce tables if at all possible.</p>
  
  <p>It seems as though the Quirks mode is the only mode which is consistent across the browsers. I am worried however that the final version of IE8 or indeed in some future browser, the quirks mode will not be the default.</p>
  
  <p><strong>What should I do ? How do specify a DocType (and maybe alter my html) which will create a consistent look across browsers?</strong></p>