Change in Doctype Causes Webpage to Render Differently

change in doctype causes webpage to render differently

You'll need to set the height of the <html> and <body> tags (and any other tags that contain #thediv to 100% as well:

html, body {
    height: 100%;
}

The doctype causes the page to render in standards mode rather than in quirks mode. I recommend reading about quirks mode on the blog of the same name and on the doctype page.

The short summary of the issue is this: in the heady days of the internet when none of the browsers still around today were above version 4 every browser distinguished itself by being different - not by being more spec compliant. When the browser manufacturers agreed to all abide by the same spec they also decided to continue to support older ways of building web pages (the quirks mode) so that the old pages would still render properly in the new browsers. This quirks mode is still built into most browsers - they activate it when they detect a page that looks like it was built in those heady days. Each browser's detection and resolution method is different - here's an example of IE 8's.

Why is this HTML form sometimes rendering differently just by reloading the page in the browser?

This is something specific to your current setup, and without more information it is really difficult to say exactly why it is happening...

That said there are some obvious reasons as to why it could be happening.

Extensions. It could be that you have an extension or plugin that is altering the page rendering. For example Greasemonkey customizes the way a web page displays or behaves, by using small bits of JavaScript.

To ascertain if this is the case, Start Firefox in Safe Mode. Safe Mode temporarily disables all extensions, uses the default theme, and turns off hardware acceleration. To do this; Click the menu button, click "Help" and select "Restart with Add-ons Disabled…" Firefox will start up with the Firefox Safe Mode dialog. If this fixes it then note it could be either an extension or hardware acceleration - to isolate which try step 3 below.

Zoom. It could be that you are inadvertently changing the zoom level of the browser thus causing the font and box sizes change.

To ascertain if this is the case reset the zoom level when you notice the change in rendering. Click the menu button on the right. The customization menu will open and you will see the zoom controls at the top. Make sure that zoom level is set to 100%

Hardware acceleration. With some GPUs and drivers, Firefox can have trouble showing text or objects on pages.

To ascertain if this is the case, you can try turning off hardware acceleration to see if it fixes the problem. Click the menu button and select "Preferences".
Select the "General" panel. Under "Performance", uncheck "Use recommended performance settings". Additional settings will be displayed. Uncheck "Use hardware acceleration when available".

Other than that providing screen-shots of the issue would go a long way towards isolating the cause of the rendering issue you are seeing.

Why is !DOCTYPE html changing page layout?

This should get you a single image showing at the full size of the browser, even if you have a <!DOCTYPE> (which I recommend you do include, as it's better practice):

html, body {  width: 100%; height: 100%;  margin: 0; padding: 0;}body {    image-rendering: pixelated;    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");    background-size: contain;    background-position: center;    background-repeat: no-repeat;}

DOCTYPE html versus html - rendering problems firefox and chrome

Whoever who told you that DOCTYPE is deprecated is either playing a prank on you or is plain ignorant.

W3C on its article HTML5 differences from HTML4 on the section Syntax, sub section 2.2 clearly states this.

The HTML syntax of HTML5 requires a doctype to be specified to ensure
that the browser renders the page in standards mode. The doctype has
no other purpose and is therefore optional for XML. Documents with an
XML media type are always handled in standards mode. [DOCTYPE]

The doctype declaration is <!DOCTYPE html> and is case-insensitive in
the HTML syntax. Doctypes from earlier versions of HTML were longer
because the HTML language was SGML-based and therefore required a
reference to a DTD. With HTML5 this is no longer the case and the
doctype is only needed to enable standards mode for documents written
using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

And as to, why the behavior when you set <!DOCTYPE html> in your example.

This behavior is expected. This is because body is a block level element. So it has height, by default, in a shrink-to-fit model and width, by default, in an expand-to-fit model. Setting style="height:100%;" in the body tag allows body to take up the whole of the height available and displays your two divs.

Content overlapping when change doctype from HTML to XHTML

See: http://hsivonen.iki.fi/doctype/

This doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

puts your page into Quirks Mode.

Unfortunately for you, your site has been made to work with Quirks Mode enabled - this was a fatal mistake.

The only sensible thing to do is to change the doctype to one that triggers (Almost) Standards Mode (such as the XHTML doctype in your question, or simply <!DOCTYPE html>).

Then, you'll unfortunately have to go through the laborious task of fixing your site.

Doing this should help your site to render more consistently between different web browsers, and that's a worthy secondary incentive.

why does the page display differently in IE than google chrome?

You forgot to add a doctype, so your page is in Quirks Mode.

Add this (the HTML5 doctype) as the very first line:

<!DOCTYPE html>

and it should look better.

Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.

The most pertinent problem (after escaping Quirks Mode) is this:

<body style="margin: 0; padding; 0;background-color: 4DA2CA;">

Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)

This will work:

<body style="margin: 0; padding: 0; background-color: #4DA2CA">

But you shouldn't be using inline styles in the first place..

This would be better:

<body>

with CSS in your stylesheet:

body {
    margin: 0;
    padding: 0;
    background-color: #4DA2CA
}

Website renders differently in different browsers

This is because, you haven't used a reset.css. A CSS Reset resets all the browser styles and the best one is Eric Meyer's CSS Reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

The content of the above reset is:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Or, if you want a simple reset, you can do this:

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    list-style: none;
}

Browser Rendering Difference Between strict/transitional DOCTYPEs

It would appear that by default in 'strict' mode an image is displayed as an inline element. Inline elements are given a space at the bottom to account for descender characters such as g or q. Since an image will not have any descender characters this was considered strange behaviour which led to the introduction of 'almost strict' mode. In 'almost strict' mode all img tags are rendered as display: block rather than inline. Further details can be found here.

The final piece of the puzzle is that all modern browsers render pages with a strict DOCTYPE in 'strict' mode and pages with a transitional DOCTYPE in 'almost strict' mode. More details can be found here.

Many thanks to both Moses and Riley, some of the information they provided helped me find the answer.

What is the functionality of !DOCTYPE?

The most significant use of DOCTYPE is to switch a browser between Quirks Mode and Standards Mode rendering.

This functionality came about because of the "broken" rendering in old versions of IE. It was realised that if Microsoft just "fixed" the IE rendering engine lots of existing sites would not render properly. So the way it works is if you put any valid DOCTYPE declaration at all in your page the assumption is that you know what you're doing and your browser will render in a standards compliant way, and if you don't put one in it will render in the old "wrong" way.

This was originally done in IE for the Mac, but this behaviour is the same in all versions of IE since IE5, and Firefox, Chrome, Safari and Opera.

What the DOCTYPE is supposed to be is a Document Type Definition. HTML is subset of SGML (as is XML). The DTD tells a parser which syntax you are using. So in a webpage your DOCTYPE should match the version of HTML you are using.

Change in Doctype Causes Webpage to Render Differently