Differing Layout between XHTML Strick/Transitional

[cags]

First off, I couldn't decide whether to put this in here of CSS, it's technically a styling issue, but it's caused by the DOCTYPE declaration, which I consider to be more a HTML issue.

 

Please feel free to correct me if I'm wrong, but it was my understanding that the objective of a DOCTYPE declaration was to specify a set of rules that a document must follow. These rules consist of a list of required tags & attributes including where and in what format they should be placed, along with a list of allowed tags/attributes that can be used. Therefore any document that will validate against XHTML 1.0 Strict will automatically validate against XHTML 1.0 Transitional, since the only difference is that Transitional will merely allow a few extra (transitional) tags. Therefore it was my understanding that if I was to change the DOCTYPE of a document that will validate against XHTML 1.0 Strict to XHTML 1.0 Transitional there should be no issues at all. Indeed when I tried it on my test project everything still validated fine. The problem I'm encountering is that the layout of my page is slightly different and I can't for the life of me work out why.

 

It was my belief that the DOCTYPE itself should not effect layout at all. Out of the browsers I've tested the issue arises in Chrome and Safari, but not in IE or FireFox. Here are example links for the two documents. Take note of the gap between the menu and the header image.

 

Strict

Transitional

 

Incidentally I've since fixed the erroneous gap by changing the img tag to 'display:block'. But I'm still curious as to why there's a difference. It's althought Chrome/Safari use a different stylesheet for the two DOCTYPEs, but surely there would be no reason to?

 

[haku]

You are right in your thoughts on what a doctype does. I have no idea on why the layout would change between doctypes though. It must be a webkit thing, since they look the same on firefox.