has anybody ever found an explanation of the very small differences you get in display from html4 to xhtml transitional to xhtml strict etc. I notice that even with perfectly valid code when you change doctypes you will usually see very small shifts in your layout. Nothing major usually only about a pixel or so. Has anybody ever found an explanation for this? I'd really just like to know what differences to expect. It's nothing really crucial, but I think it would be some cool knowledge to possess.
Back to top

Hi Mike, yes, there are differences between the doctypes, some more major than others.

The doctype declaration triggers behaviors in browsers, the main differences you'll see usually involve table cells, td, images in table cells, and inline elements.

That's one reason I currently tend to use HTML 4.01 strict, it's the most consistent cross browser.

Inline elements are what usually cause the issues, it's correct behavior technically, but can be annoying to figure out. There's a lot of hacks you use to get around those, but it's a pain learning them all.

What I've found in general is that XHTML 1 strict works best with pure div construction, or very simple table construction. Remember that things like img, li inline, and a few others will have different behaviors based on the doctype. I try to avoid most of the problem areas by just not using those methods in general, like slicing images into table cells, having images that link in table cells is a very hard problem to resolve, requires some tweaks.

A lot of people tend to forget that a doctype is telling the browser to treat the page in a certain way, it's not just something pasted into the top of the page, it has a real function.
Back to top

well what triggered this for me was a pretty simple div based layout.

when i switched from xhtml transitional to xhtml strict all it did was move the divs down about 1px. It didn't mess up anything at all. I was just kinda curious as to what it was that triggered it. I declared all the padding and margins for all of the elements in the css (at least i'm pretty damn sure I did). For me tables seem to be pretty stable regardless of what doctype i use, as long as they're clean and i'm sure to declare everything in the css.

even stranger the shift seemed to occur cross-browser, and not just on msie. or firefox. It even happened in opera I think
Back to top

Yes, that means it's almost certainly a doctype thing, the behavior is correct.

I assume you zeroed out this:


before starting the CSS? html and body change slightly in XHTML 1 strict I think, it's a more rigorous treatment of the standards.
Back to top

I have:



the divs all have the padding set to zero by each id , unless of course they have padding for a reason. Most have their margin set to:



to correct the issue I simply took the div that moved a bit and changed it to:


this fixed the slight shift in all browsers.
Back to top