Browser Rendering Difference Between strict/transitional DOCTYPEs

Question

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.

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.

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 display:block to the img tag stops the gap appearing in all cases (which was my objective).

transitional example, strict example

Answer 1

It would appear that by default in 'strict' mode an image is displayed as an inline element. Inline elements are given a space at the bottom to account for descender characters such as g or q. Since an image will not have any descender characters this was considered strange behaviour which led to the introduction of 'almost strict' mode. In 'almost strict' mode all img tags are rendered as display: block rather than inline. Further details can be found here.

The final piece of the puzzle is that all modern browsers render pages with a strict DOCTYPE in 'strict' mode and pages with a transitional DOCTYPE in 'almost strict' mode. More details can be found here.

Many thanks to both Moses and Riley, some of the information they provided helped me find the answer.