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>
differences between Doctype Loose and Strict
-
- Rank 0 - Newcomer
- Posts: 2
- Joined: Fri Sep 25, 2009 12:05 am
differences between Doctype Loose and Strict
You do not have the required permissions to view the files attached to this post.
-
- Rank VI - Professional
- Posts: 726
- Joined: Mon Dec 13, 2004 1:50 pm
- Location: Tannhauser Gate
Re: differences between Doctype Loose and Strict
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.
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.
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
Re: differences between Doctype Loose and Strict
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:
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.
What if you used something like this in the document:
Code: Select all
<style type="text/css">
img { line-height: 0; }
</style>
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
-
- Rank III - Intermediate
- Posts: 92
- Joined: Sat Dec 11, 2004 2:38 pm
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
Re: differences between Doctype Loose and Strict
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.Daniel Lacroix wrote:It's probably because of quirk mode.
See http://en.wikipedia.org/wiki/Quirks_mode
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
-
- Rank 0 - Newcomer
- Posts: 2
- Joined: Fri Sep 25, 2009 12:05 am
Re: differences between Doctype Loose and Strict
I'm not seeing any change with the line-height setting you suggested.
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
Re: differences between Doctype Loose and Strict
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?StoweKeller wrote:I'm not seeing any change with the line-height setting you suggested.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank 0 - Newcomer
- Posts: 1
- Joined: Wed Apr 03, 2013 3:50 am
Re: differences between Doctype Loose and Strict
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
Here yo can find different Docttypes
http://www.corelangs.com/html/introduction/doctype.html
craig