differences between Doctype Loose and Strict

Discussion about HTML and XHTML related issues.
Post Reply
StoweKeller
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 2
Joined: Fri Sep 25, 2009 12:05 am

differences between Doctype Loose and Strict

Post by StoweKeller » Mon Jan 17, 2011 8:51 am

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 21248 times

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 706
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: differences between Doctype Loose and Strict

Post by MikeGale » Mon Jan 17, 2011 3:48 pm

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
Site Admin
Posts: 3407
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: differences between Doctype Loose and Strict

Post by Albert Wiersch » Mon Jan 17, 2011 5:52 pm

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.
Image
Albert Wiersch

Daniel Lacroix
Rank III - Intermediate
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 » Mon Jan 17, 2011 9:09 pm

It's probably because of quirk mode.

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

Daniel.

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

Re: differences between Doctype Loose and Strict

Post by Albert Wiersch » Mon Jan 17, 2011 9:44 pm

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).
Image
Albert Wiersch

StoweKeller
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 2
Joined: Fri Sep 25, 2009 12:05 am

Re: differences between Doctype Loose and Strict

Post by StoweKeller » Wed Jan 19, 2011 12:41 pm

I'm not seeing any change with the line-height setting you suggested. :(

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

Re: differences between Doctype Loose and Strict

Post by Albert Wiersch » Wed Jan 19, 2011 1:06 pm

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?
Image
Albert Wiersch

craiglimpo
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 1
Joined: Wed Apr 03, 2013 3:50 am
Contact:

Re: differences between Doctype Loose and Strict

Post by craiglimpo » Wed Apr 03, 2013 3:54 am

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