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

I don't truly understand this quirk myself. I do think it has to do with white space. In quirks mode, white space is more forgiving. However, in standards, white space can cause issues.

For instance, in your example, you have a nice beautified source that is easily readable. Removing the white space and line breaks between containers and elements will allow you to remove the gap in some browsers (FF I believe). To fix it in IE, you will need to add line-height:0; to the containing element of the image (in this case the containing anchor or link tag).

You should also note, if you care about IE6 at all, that having each of your <li>'s on their own line will add extra lines between each list item when rendered.

Answer 2

There are only a few differences between Strict and Transitional DOCTYPES, none of which really explain this. (note, I only have FF, IE installed so I can't see the error itself).

As far as what caused this to happen, it could be a case of browser's having different stylesheets for the different rendering modes. However, I think it really just comes down to the fact that the browser takes different approaches to how it renders the page for each mode Strict/Trans/Quirks/Frames. While the only documented difference between Strict and Trans is how to handle inline images inside tables, browsers don't have to adhere to W3C specs and can do whatever they really want, and this tends to cause bugs like the one you apparently just found.

Answer 3

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.