title: Browser Rendering Difference Between strict/transitional DOCTYPEs
body: <p>I came across an 'issue' some time ago that I never did get to the bottom of. Hopefully somebody can shine a light on it. What causes certain browsers (Chrome, Opera and Safari) to render a page differently when I change the DOCTYPE from strict to transitional. I know the general cause of this is quirks mode being triggered, but both the XHTML and CSS for both files validate according to the w3c validator.</p>
  
  <p>I can only assume that these browsers use different internal style sheets for the two DOCTYPEs, but have no real idea why they would do so. I was just hoping somebody could confirm why this happens.</p>
  
  <p>The difference that can be seen is the space between the bottom of the 'header image' and the border of the menu bar. In the aforementioned browsers there is no gap between the two when using a transitional DOCTYPE, but there is when using strict (in IE and FF the gap is present on both). I eventually worked out that adding <code>display:block</code> to the img tag stops the gap appearing in all cases (which was my objective).</p>
  
  <p><a href="http://share.tib-studios.com/transitional.html" rel="nofollow noreferrer">transitional example</a>,
  <a href="http://share.tib-studios.com/strict.html" rel="nofollow noreferrer">strict example</a></p>