CODEWITHSUNDEEP
htmlxhtml
vmg
vmg

Reputation: 10576

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>

Upvotes: 0

Views: 500

Answers (1)

junkfoodjunkie
junkfoodjunkie

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

Related Questions