Page 1 of 1

differences between Doctype Loose and Strict

Posted: Mon Jan 17, 2011 8:51 am
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>

Re: differences between Doctype Loose and Strict

Posted: Mon Jan 17, 2011 3:48 pm
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.

Re: differences between Doctype Loose and Strict

Posted: Mon Jan 17, 2011 5:52 pm
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.

Re: differences between Doctype Loose and Strict

Posted: Mon Jan 17, 2011 9:09 pm
by Daniel Lacroix
It's probably because of quirk mode.

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

Daniel.

Re: differences between Doctype Loose and Strict

Posted: Mon Jan 17, 2011 9:44 pm
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).

Re: differences between Doctype Loose and Strict

Posted: Wed Jan 19, 2011 12:41 pm
by StoweKeller
I'm not seeing any change with the line-height setting you suggested. :(

Re: differences between Doctype Loose and Strict

Posted: Wed Jan 19, 2011 1:06 pm
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?

Re: differences between Doctype Loose and Strict

Posted: Wed Apr 03, 2013 3:54 am
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