vmg vmg - 1 month ago 7
HTML Question

Upgrading Doctype from XHTML 1.0 Transitional to HTML5 causes layout differences in simple html page

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
enter image description here

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>

Answer

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>

Comments