differences between Doctype Loose and Strict

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
StoweKeller
Rank 0 - Newcomer
Posts: 2
Joined: Fri Sep 25, 2009 12:05 am

differences between Doctype Loose and Strict

Post by StoweKeller »

While experimenting with DocTypes I noticed that Loose and Strict behave differently when it comes to positioning adjacent images. With Loose I can place images vertically and have them touch each other, but if I change the Doctype to Strict -- while leaving the rest of the code the same -- I end up with vertical whitespace appearing between the images when I view it in browsers outside of HTMLvalidator.

Anybody know why?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"-->

<!-- 2011-01-16 with Doctype strict, the images end up separated with vertical whitespace, but with loose.dtd it does not... -->
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Test of differences between Strict and Loose Doctypes</title>
</head>
<body>

<img alt="text" src="redblock.png" style="width: 400px; height: 200px;" width="400" height="200"><img alt="text" src="blueblock.png" style="width: 400px; height: 200px;" width="400" height="200"><img alt="text" src="greenblock.png" style="width: 400px; height: 200px;" width="400" height="200"><img alt="text" src="redblock.png" style="width: 400px; height: 200px;" width="400" height="200"><img alt="text" src="blueblock.png" style="width: 400px; height: 200px;" width="400" height="200"><img alt="text" src="greenblock.png" style="width: 400px; height: 200px;" width="400" height="200">

</body>
</html>
Attachments
Screenshots_DoctypeStrictVsLoose_DifferenceInVerticalWhitespace.png
Screenshots_DoctypeStrictVsLoose_DifferenceInVerticalWhitespace.png (60.34 KiB) Viewed 26498 times
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: differences between Doctype Loose and Strict

Post by MikeGale »

How does that work cross browser? (The answer to that can help track down what it is.)

Do you need the strict DTD?

In a situation like this I'd try a class on img with at least padding and margins controlled. I'm not sure they'll impact an Img though. You might need to wrap img in a div or span to control. (I view such wrapping as a kludge if it's forced on you.)

The img tag is a bit odd. There's a very old discussion, published online, between Marc Andreesen and others about the idea when it was first being considered. Not entirely thought out, and not all the ideas implemented, even today. (We've been stuck for years with an interim design. Unfortunate!)

I'd also use the developer tools in some browsers to visualise the box model around the img tag.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: differences between Doctype Loose and Strict

Post by Albert Wiersch »

Yes, this is strange. I don't know why, but it seems the strict doctype may be affecting the line-height. If you search for "strict line-height" on google, then you might get some more useful information. It seems there may be an issue with table row heights as well (http://stackoverflow.com/questions/3931 ... -ff-chrome).

What if you used something like this in the document:

Code: Select all

<style type="text/css">
img { line-height: 0; }
</style>
Does that fix the problem? It seemed to in my quick test, but don't know about any side-effects it might introduce.

I suspect the browser may be applying different behaviors/cascading for transitional and strict doctypes.

Maybe you should stick with transitional if you are trying to convert.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Daniel Lacroix
Rank III - Intermediate
Posts: 92
Joined: Sat Dec 11, 2004 2:38 pm
Contact:

Re: differences between Doctype Loose and Strict

Post by Daniel Lacroix »

It's probably because of quirk mode.

See http://en.wikipedia.org/wiki/Quirks_mode

Daniel.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: differences between Doctype Loose and Strict

Post by Albert Wiersch »

Daniel Lacroix wrote:It's probably because of quirk mode.

See http://en.wikipedia.org/wiki/Quirks_mode
Yes, thanks for the link. For some reason, I had it stuck in my had that "quirks mode" and "compatibility mode" was an IE thing, but apparently it's not just IE.

I bet this issue could be address with the "proper" CSS, however... maybe the line-height setting I posted earlier will do it (hope so).
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
StoweKeller
Rank 0 - Newcomer
Posts: 2
Joined: Fri Sep 25, 2009 12:05 am

Re: differences between Doctype Loose and Strict

Post by StoweKeller »

I'm not seeing any change with the line-height setting you suggested. :(
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: differences between Doctype Loose and Strict

Post by Albert Wiersch »

StoweKeller wrote:I'm not seeing any change with the line-height setting you suggested. :(
That's strange. In my testing it made a difference. If you want to pursue this further, then could you post a couple of public URLs with the test pages, one strict, one loose, and one strict with the line-height property?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
craiglimpo
Rank 0 - Newcomer
Posts: 1
Joined: Wed Apr 03, 2013 3:50 am
Contact:

Re: differences between Doctype Loose and Strict

Post by craiglimpo »

The DOCTYPE statement indicates the particular version of HTML being used in the document.
Here yo can find different Docttypes

http://www.corelangs.com/html/introduction/doctype.html

craig
Post Reply