XHTML Strict/Transitional, Differing Layout

[Cags]

I’ve been attempting to create a header / menu combination for my site, but ran into problems with a gap that I could not get rid of, after posting on another forum it was discovered that if I changed the DOCTYPE from XHTML Strict to XHTML Transitional the gap disappears. It was my understanding that there shouldn’t really be any layout differences going backwards from Strict to Transitional, so this confused me somewhat. I don’t really consider changing the DOCTYPE a solution, after all I thought the whole point of Transitional was to be just what it’s name describes.

It’s worth noting I’m not especially experienced with CSS, I’m more a back-end programmer than designer, so excuse me if I’ve done something ‘dumb’, the quirks of working with CSS are taking some adjustments to get used to. I’ve created a simple example that demonstrates the point.

Code:

• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5
• Menu 6

Note that if viewed in FireFox you will need an image, but most other browsers obey the width and height attributes used in the <img tag.

Edit: Oops, I nearly forgot to mention that the gap is between the header image and the ‘menu’ below it.

[Cags]

I’ve discovered that setting ‘display:block’ on the <img tag seems to remove the gap. I would still be very much interested if anybody could shine some light on why Strict and Transitional seem to display the layout differently.

[TheDoc]

I may be blind, but it looks like you’ve forgotten to add a link to the site!

[Cags]

I’ve not forgotten anything, there is no link to the site since there is no site, I’m currently just testing locally. Somehow I don’t think giving you http://localhost/ would help you much :). The snippet of code provided is all that is required to emulate the situation I’m having with my ‘site’. Simply changing the two instances (once in the DTD name and once in the link) of the word strict to the word transitional in that code will affect the layout.

Edit: After reading your signature, I thought I should probably add I’ve tested it in Chrome, FireFox, Safari and IE 8. I’m not entirely sure on the exact versions, but they have all been installed within the last month, using whatever was the version available on the respective website at that time. It’s visible with them all assuming you actually have a header.gif the right size. As mentioned in the first post, it’s visible with them all excluding FF without having an image in the directory (since it doesn’t force a space the size of the width & height attributes).

[Cags]

Hmmm… after some further testing and clearing my caches, it appears the problem isn’t quite how I described on all browsers. I ran tests on all 4 browsers that I have installed using strict and transitional DOCTYPEs. For good measure I also ran the same tests after applying the afforementioned ‘fix’ (setting display:block on the img tag). Here are the results:

Chrome
Transitional – No Gap
Strict – Gap
Transitional Fix – No Gap
Strict Fix – No Gap

FireFox
Transitional – Gap
Strict – Gap
Transitional Fix – No Gap
Strict Fix – No Gap

Safari
Transitional – No Gap
Strict – Gap
Transitional Fix – No Gap
Strict Fix – No Gap

Internet Explorer 8
Transitional – Gap
Strict – Gap
Transitional Fix – No Gap
Strict Fix – No Gap

As you can see, the ‘fix’ works. There is no gap on any of the 4 browsers when it is applied. Technically speaking since the ‘fix’ works I no longer have a problem. Having said that, it annoys me not knowing what is causing the difference between the two DOCTYPES in Chrome and Safari, so I would be grateful if anybody can shed some light on the matter.

I decided to throw up some examples for you:
http://www.tib-studios.co.uk/TEST/strict.html
http://www.tib-studios.co.uk/TEST/strict-fix.html
http://www.tib-studios.co.uk/TEST/transitional.html
http://www.tib-studios.co.uk/TEST/transitional-fix.html

[TheDoc]

* { margin:0; padding:0; }
CSS Resets

[Cags]

Since every tag in use on the page (with the exception of the div, body and html which are containers and shouldn’t cause a gap in the middle of the content) has had it’s own ‘padding: 0px; margin: 0px’ this is somewhat irrelevant. I’ve already tried it anyway and it doesn’t make the slightest bit of difference.

Also, to my knowledge browsers don’t use a separate internal CSS for different DTDs (though I could be wrong), so that wouldn’t explain how I can get different output by simply changing the DTD.

[Author]

Posts