Adding (!doctype html) BREAKS my website project. Any HTML knowers/advice?

NMario84

I am creating a website using 2 iframes, where the navbar page is on the left, and the main page is on the right. However, when I add in the tag (!doctype html), it BREAKS the website. Apparently from my research, it is a requirement these days to add that tag.

So here's the setup, NO !doctype tag. Working correctly, but with “quirks-mode”.

<HTML>
<HEAD>
<TITLE>Let's Create A Game in Scratch!</TITLE>
</HEAD>
<BODY BGColor=#0064C8 TEXT="White" LINK="Blue" VLINK="Red" ALINK="Cyan"> 
<Table width=100% height=100% border=0>
<TR>
<TD width=20%><iframe src="navigate.html" name="left" width="100%" height="100%" frameBorder="0">
Your browser does not support iframes.</iframe></TD>
<TD width=80%><iframe src="title.html" name="right" width="100%" height="100%" frameBorder="0">
Your browser does not support iframes.</iframe></TD>
</TR>
</Table>
</BODY>
</HTML>

Everything looks perfectly fine here. However, when I add !doctype at the top, the whole setup gets “squished” and misaligned that doesn't make any sense. I feel like either “height” or the % in general got nerfed, or removed, or something

Exact same code as above, WITH !doctype html, but it BREAKS the iframes and/or tables.

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Let's Create A Game in Scratch!</TITLE>
</HEAD>
<BODY BGColor=#0064C8 TEXT="White" LINK="Blue" VLINK="Red" ALINK="Cyan"> 
<Table width=100% height=100% border=0>
<TR>
<TD width=20%><iframe src="navigate.html" name="left" width="100%" height="100%" frameBorder="0">
Your browser does not support iframes.</iframe></TD>
<TD width=80%><iframe src="title.html" name="right" width="100%" height="100%" frameBorder="0">
Your browser does not support iframes.</iframe></TD>
</TR>
</Table>
</BODY>
</HTML>

I have looked around and did some research on the matter, and I got multiple different answers everywhere. None of them have a direct answer for about using multiple iframes using the “standard” !doctype html format.

Any help would be appreciated. Otherwise, I've tried everything else I saw, but I just gave up. So I may just stick with the old “quirks mode” on the matter as the goal is NOT to develop a professional site, but just a simple tutorial guide online for creating a game in Scratch.

mybearworld

It seems to work fine for me with a `<!DOCTYPE html>` – but this is very outdated HTML, so it's possible that it might break in some browsers. Do you really need to use iframes here?

scratchcode1_2_3

Ahhh why is every tag in uppercase that hurts my eyes!!!!1!1!1!!1!1!1!

Anyways, why do you need iframes for that?

Also, what the heck is up with those attribute styles in the body? You have to put css, inside a style tag, like

<body style=“background-color: #FF0000;

Try adding the style attribute to your html and body tags and also giving them 100% height and width.

NMario84

I really don't know any other way to display 2 frames without something like iframes. I was told that the other ways to handle this were either deprecated, or outdated material. So IDK any more.

scratchcode1_2_3

NMario84 wrote:
I really don't know any other way to display 2 frames without something like iframes. I was told that the other ways to handle this were either deprecated, or outdated material. So IDK any more.

..um.. sorry to break it to you… but all the html you have now looks like it was ripped straight outta a website from 2005

i could help you… what are you trying to do with the site?

Last edited by scratchcode1_2_3 (April 12, 2025 16:51:46)

novice27b

You have a lot of invalid syntax here. When you omit the doctype declaration, many browsers operate in “quirks mode”, which is much more permissive of malformed HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Quirks_mode_and_standards_mode

If you want your site to work properly in non-quirks-mode, you'll need to fix your syntax errors (at the very least). A “linter” can be a useful tool to help with this.

NMario84

Well, I was taught “old” html at some computer camps when I was like 10 or 15, or something (now at 40 years). Then in my high school they taught Flash/Actionscript, which is also no longer valid. This was years ago back when I was a kid when Scratch was never a thing. So I don't have much knowledge of current 2025 CSS or HTML they are teaching these days..

Like I said I'm not going for any professional website. I only need something “working” or whatever that is considered “readable” to teach programming a game in Scratch. So I've tested my site on my PC, and on my iphone's safari browser, and it seems to work fine for me. It's just the issue where I add (!doctype html) it breaks a few scripts that I do not understand.

Probably going off topic, but this is why I believe that “nothing matters” to me. When we learn something (For example, like an old form of HTML in this case), then 10 years later it will be overpowered by some new source material invented. So everything we have learned in the past becomes meaningless material.

I'm very sorry for this rant. But IDK how ppl feel about a website still using “quirks mode” in the year 2025 is either “okay” or “illegal”. But this is all I know from age, and all that I have learned growing up back in the day. I really do not know how else to re-create this website in a new “standard” HTML generation.

The best I can do for now is to show the website I am currently working on in progress. Though it is EXATLY how I have envisioned it for the goal in game development, old scripting material, or not.

————————————————————————————————————-

TL;DR -The website works fine without the (!doctype html) tag, but some seem “offended” when it is in quirks mode. So IDK anymore.

I'm Sorry.

scratchcode1_2_3

NMario84 wrote:
Well, I was taught “old” html at some computer camps when I was like 10 or 15, or something (now at 40 years). Then in my high school they taught Flash/Actionscript, which is also no longer valid. This was years ago back when I was a kid when Scratch was never a thing. So I don't have much knowledge of current 2025 CSS or HTML they are teaching these days..

Like I said I'm not going for any professional website. I only need something “working” or whatever that is considered “readable” to teach programming a game in Scratch. So I've tested my site on my PC, and on my iphone's safari browser, and it seems to work fine for me. It's just the issue where I add (!doctype html) it breaks a few scripts that I do not understand.

Probably going off topic, but this is why I believe that “nothing matters” to me. When we learn something (For example, like an old form of HTML in this case), then 10 years later it will be overpowered by some new source material invented. So everything we have learned in the past becomes meaningless material.

I'm very sorry for this rant. But IDK how ppl feel about a website still using “quirks mode” in the year 2025 is either “okay” or “illegal”. But this is all I know from age, and all that I have learned growing up back in the day. I really do not know how else to re-create this website in a new “standard” HTML generation.

The best I can do for now is to show the website I am currently working on in progress. Though it is EXATLY how I have envisioned it for the goal in game development, old scripting material, or not.

————————————————————————————————————-

TL;DR -The website works fine without the (!doctype html) tag, but some seem “offended” when it is in quirks mode. So IDK anymore.

I'm Sorry.

hmmm… just leave it off! I don’t see why anyone would be offended. It’s just the code looks a bit weird when in doc type html. When I said that about it hurting my eyes, that was a joke, mainly, like a funny hyperbole, not meant to offend.
If you feel like the result with quirks mode looks good to you, then keep it that way!
I was just confused because I didn’t know you learned it so long ago. I was like how could you find like an obscure tutorial or something?

It isn’t a requirement to add the tag. That’s the reason why browsers still support quirks mode.

May I ask what is the research that led you to think it is required?

Jonathan50

If you use CSS to set the height of the html tag, body, table, and tr to 100% as well as the iframe, then it's almost fixed except now there's a scrollbar and you can't see the blue border at the bottom without scrolling a little bit.

It looks like FRAMESET would be perfect here but it's probably more outdated and deprecated than anything you've been using. (A modern website would probably not use iframes, and would probably not be written directly in static HTML in the first place if it's a book's worth of content and needed navigation, which would overcome the copy-pasting needed by not using iframes–putting a whole table-of-contents on each page manually would not be a good idea.)

I guess flexbox might sorta be an alternative

Last edited by Jonathan50 (April 12, 2025 23:05:39)

NMario84

Yea… I'm doing some more research online, and I've found my answer. Doing this “DOES” seem to fix my issue with (!doctype html) added..

<!doctype html>
<html>
<head>
<title><title>
<style>
body {
  overflow: hidden; //removes unneeded outside scrollbars.
}
</style>
</head>
<body>
... etc. ....
<iframe src="navigate.html" name="left" style="position:absolute; width:20%; height:100%; border:none">
<iframe src="main.html" name="right" style="position:absolute; width:80%; height:100%; border:none">
... etc. ...
</body>
</html>

For some reason, I have no idea why there were overlapping scroll bars from the outside, and on the iframes (I DO need scroll bars on the iframes alone, though), but adding the overflow: hidden script removes the bars outside, which I do not need.

Maybe there is something else I can do, but maybe the problem is now solved? IDK..

scratchcode1_2_3 wrote:
May I ask what is the research that led you to think it is required?

It seems that the issue is not really “a requirement”. From what I have been reading, it's more along the lines of that they “discourage” the use of webpages with quirks mode. It only exists to preserve legacy websites.

Last edited by NMario84 (April 12, 2025 23:12:17)

Jonathan50

I have no idea why there were overlapping scroll bars from the outside

Because of the space on the top left from margins/padding (but somehow totally removing it doesn't seem to work)

Flexbox and no margins does work if you want blue around (or not):

<!DOCTYPE html>
<html>
<head>
<title>Let's Create A Game in Scratch!</title>
<style>
html, body {
  height: 100%;
  margin: 0 0 0 0;
}
body {
  display: flex;
  flex-direction: row;
}
iframe#left {
  flex-basis: 20%;
}
iframe#right {
  flex-basis: 80%;
}
iframe {
  border: 5px solid #0064C8;
}
</style>
</head>
<body>
<iframe id="left" name="left" src="navigate.html"></iframe>
<iframe id="right" name="right" src="title.html"></iframe>
</body>
</html>

– only difference from quirks mode original is now the bar between the iframes is fat and the bars around are thin instead of vice versa. (Not sure if you had text, link, vlink, alink on body because you were going to add more stuff to the page, or for consistency with other pages; although if your other pages are blue too then you might not need the iframe border)

Last edited by Jonathan50 (April 12, 2025 23:47:41)

NMario84

Well besides the right side iframe's scrollbar being “cut off” a bit on the site (on some browsers?), I don't think I have any other issue with the updated setup using the ‘style’ method. Maybe there is a way to fix the starting positions somehow, IDK. Though it seems to work otherwise.

But thanks anyway guys. I got my answer from doing more research.

snoopythe3

You are using brackets. Use this:

<!DOCTYPE html>

BigNate469

snoopythe3 wrote:
You are using brackets. Use this:
<!DOCTYPE html>

Uhh… no?

They're using the <> syntax…

Me writing stuff using React makes me kinda miss writing webpages in pure HTML

Discuss Scratch