differences between Doctype Loose and Strict
Posted: 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>
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>