Reputation: 10576
I am upgrading doctype for some application and I see the differences in layout. I created small demo to show the problem.
The old doctype
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
New doctype:
<!doctype html>
And I see this difference: notice second line is lower
This is happening when span
element has font-size
css attribute.
What is happening here? How do I debug it? Why layout is different?
Source for the page with old doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Transitional</title>
</head>
<body>
<div>
<h1>
<div>
<div>
<span>
<div><span>Is Your County Obese?</span></div>
<div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
</span>
</div>
</div>
</h1>
</div>
</body>
</html>
Source for the page with new layout:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div>
<h1>
<div>
<div>
<span>
<div><span>Is Your County Obese?</span></div>
<div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
</span>
</div>
</div>
</h1>
</div>
</body>
</html>
Source of the side-by-side view:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div style="display: flex" >
<iframe src="doctype1.html" style="width: 30%; height: 300px;" ></iframe>
<iframe src="doctype2.html" style="width: 30%; height: 300px;" ></iframe>
</div>
</body>
</html>
Upvotes: 0
Views: 500
Reputation: 3178
Here is a properly structured version:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div id="top">
<h1>Is Your County Obese?</h1>
<p>Select your county to see how it compares with other counties in the country</p>
</div>
</body>
</html>
Upvotes: 1