Why does this work without a and not with one?

Question

I use JS to generate a sidebar that contains a list of things. The problem is that sidebar only works without a <!DOCTYPE html>. With one, it takes the height of the list of elements, when without one, it takes the height of the body (which is what I want). Here is the code (with <!DOCTYPE html>):

<!DOCTYPE html>
<html>
  <head>
    <title>Why does this work without a doctype and not with one?</title>
    <meta charset="UTF-8"/>
    <style>
        body{margin: 0; overflow-y: hidden; background-color: #aaaaaa}
        .sidebar{width :18%; height: 100%; background-color: #333333;}
        .lesson{background-color: #2fbfc0; padding: 5px; border-bottom: 2px solid #111111; font-size: 20px;}
    </style>
  </head>
  <body>
    <p>With &lt;!DOCTYPE html&gt;</p>
    <script>
        var sidebar=document.createElement("div");
        document.body.appendChild(sidebar);
        sidebar.className="sidebar";
        var parts="Intro\\index.html\nFirst\\first.html\nSecond\\second.html".split("\n");
        var len=parts.length;
        var i;
        for(i=0;i<len;i++){
            var section=document.createElement("div");
            var segments=parts[i].split("\\");
            segments[1]=segments[1].trim();
            section.innerHTML=segments[0];
            section.id=segments[1];
            section.onclick=function(){location.assign(this.id);}
            section.className="lesson";
            if(segments[1]==(location.href.slice(-1)=="/"?location.href+"index.html":location.href).split("/").slice(-1)[0])
                section.style.color="#3f5890";
            sidebar.appendChild(section);
        }
        sidebar.childNodes[0].style.borderTop="2px solid #111111";
    </script>
  </body>
</html>

Here's the code without <!DOCTYPE html>:

<!--DOCTYPE html-->
<html>
  <head>
    <title>Why does this work without a doctype and not with one?</title>
    <meta charset="UTF-8"/>
    <style>
        body{margin: 0; overflow-y: hidden; background-color: #aaaaaa}
        .sidebar{width :18%; height: 100%; background-color: #333333;}
        .lesson{background-color: #2fbfc0; padding: 5px; border-bottom: 2px solid #111111; font-size: 20px;}
    </style>
  </head>
  <body>
    <p>Without &lt;!DOCTYPE html&gt;</p>
    <script>
        var sidebar=document.createElement("div");
        document.body.appendChild(sidebar);
        sidebar.className="sidebar";
        var parts="Intro\\index.html\nFirst\\first.html\nSecond\\second.html".split("\n");
        var len=parts.length;
        var i;
        for(i=0;i<len;i++){
            var section=document.createElement("div");
            var segments=parts[i].split("\\");
            segments[1]=segments[1].trim();
            section.innerHTML=segments[0];
            section.id=segments[1];
            section.onclick=function(){location.assign(this.id);}
            section.className="lesson";
            if(segments[1]==(location.href.slice(-1)=="/"?location.href+"index.html":location.href).split("/").slice(-1)[0])
                section.style.color="#3f5890";
            sidebar.appendChild(section);
        }
        sidebar.childNodes[0].style.borderTop="2px solid #111111";
    </script>
  </body>
</html>

(Side note: in reality, it does not have a fixed array called parts. In the real version, it uses an AJAX request to get it.)

As you may notice, there are only two differences between the two snippets:

The second one has the doctype commented
The second one says without instead of with

It looks like it doesn't show the difference in the Stack Overflow code snippets, but if you copy the code and put it somewhere else (such as an HTML file on your device), it won't work.

Here is the code to copy and paste into your own file:

<!DOCTYPE html> <!-- Remember to comment/uncomment to change it! -->
<html>
  <head>
    <title>Why does this work without a <!DOCTYPE html> and not with one?</title>
    <meta charset="UTF-8"/>
    <style>
        body{margin: 0; overflow-y: hidden; background-color: #aaaaaa}
        .sidebar{width :18%; height: 100%; background-color: #333333;}
        .lesson{background-color: #2fbfc0; padding: 5px; border-bottom: 2px solid #111111; font-size: 20px;}
    </style>
  </head>
  <body>
    <p>With/Without &lt;!DOCTYPE html&gt;</p>
    <script>
        var sidebar=document.createElement("div");
        document.body.appendChild(sidebar);
        sidebar.className="sidebar";
        var parts="Intro\\index.html\nFirst\\first.html\nSecond\\second.html".split("\n");
        var len=parts.length;
        var i;
        for(i=0;i<len;i++){
            var section=document.createElement("div");
            var segments=parts[i].split("\\");
            segments[1]=segments[1].trim();
            section.innerHTML=segments[0];
            section.id=segments[1];
            section.onclick=function(){location.assign(this.id);}
            section.className="lesson";
            if(segments[1]==(location.href.slice(-1)=="/"?location.href+"index.html":location.href).split("/").slice(-1)[0])
                section.style.color="#3f5890";
            sidebar.appendChild(section);
        }
        sidebar.childNodes[0].style.borderTop="2px solid #111111";
    </script>
  </body>
</html>

So my question is, why does it do that? To me it seems like it should be the other way around (with doctype should make it work, without shouldn't make it working).

I have been playing around with it and have never had a similar issue even with all my web development experience. it is quite odd. — Alex Lowe, Dec 14 '20 at 22:21
@TemaniAfif: thanks for showing me the answer to the question! I guess I had to apply `width: 100%` to all of the `sidebar`'s *parents (parents, grandparents, ...). — Lakshya Raj, Dec 14 '20 at 22:23
@AlexLowe because nowadays the doctype is something added automatically everywhere unless you start your own project from scratch and your forget it (when I say from scratch, I mean a blank page in an editor) — Temani Afif, Dec 14 '20 at 22:29

Why does this work without a and not with one?

0 Answers0