What Happens If I Don't Put a <!Doctype HTML> in My Code? Will It Make Any Major Changes

I made a website without a !DOCTYPE what should I do?

Without the <!DOCTYPE html> some browsers will render your website in quirks mode. To have a consistent look across all web browsers it is important to use the DOCTYPE. It's best to put the DOCTYPE in and fix up your CSS to correspond with standards mode.

Is it safe to change to the HTML5 DOCTYPE?

Yes you can change your DOCTYPE,it will not affect anything that you have already done.In HTML 5 you will get some new features which you can use for your future purpose.Just check this link and you will get some idea about the features present in HTML 5

Any reason not to start using the HTML 5 doctype?

Well consider this:

When serving as text/html, all you need a doctype for is to trigger standards mode. Beyond that, the doctype does nothing as far as browsers are concerned.

When serving as text/html, whether you use XHTML markup or HTML markup, it's treated by browsers as HTML.

So, really it comes down to using the shortest doctype that triggers standards mode (<!DOCTYPE html>) and using HTML markup that produces the correct result in browsers.

The rest is about conforming, validation and markup prerference.

With that said, using <!DOCTYPE html> now and trying to make your markup conform to HTML5 is not a bad idea as long as you stick to stable features that work in browsers now. You wouldn't use anything in HTML4 or XHTML 1.x that doesn't work in browsers, would you?

In other words, you use <!DOCTYPE html> with HTML4-like markup while honoring things that have been clarified in HTML5. HTML5 is about browser compatibility after all.

The downside to using HTML5 now is that the spec can change quite often. This makes it important for you to keep up with the spec as it actively changes. Also http://validator.nu/ might not always be up-to-date, but http://validator.w3.org/ isn't always up-to-date either, so don't let that stop you.

Of course, if you want to use XHTML 1.0 markup and conform to XHTML 1.0, then you shouldn't use <!DOCTYPE html>.

Personally, I always use <!DOCTYPE html> for HTML.

Why does the HTML5 DOCTYPE mess with my padding?

This is an interesting and subtle, yet important consideration when using inline-block.

The short answer is: set vertical-align on your ul to anything other than baseline.

The reason this works is that inline-blocks are considered text, and thus are subjected to text-based properties such as line-height and vertical-align.

The longer answer is as follows:

The CSS3 specification goes in to some (perhaps confusing) depth around how the box model works. Here's a quote from the CSS3 box spec, in which I've highlighted the part that's relevant to this problem:

9.5. ‘Inline-block’ or floating, non-replaced elements

... The used value of height is the computed value,
unless that is ‘auto’, when the used value is defined by “‘Auto’
heights for flow roots.”

Let's check what the auto heights for flow roots are:

9.10. ‘Auto’ heights for flow roots

In certain cases (see the preceding sections), the height of an
element is computed as follows:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the
bottommost line box.

...

The line box parts are of interest. What this effectively implies is that anything set to display as inline-block is subject to the implicit box layouts that plain text uses.

You might be able to guess now why setting vertical-align fixes this problem, but let's continue tracing this problem through the spec.

The line-box definition is a little lacklustre, and the example in section 4.2 is only marginally helpful.

Let's go back to the CSS 2.1 spec, which does a far nicer job at explaining line boxes:

The rectangular area that contains the boxes that form a line is called a line box ... [its height] is determined by the rules given in the section on line height calculations.

From this explanation, we see that the line-height and vertical-align properties have something to do with how the heights (of line boxes, thus inline-block elements) are calculated. Reading the calculations of line-height almost make it clear:

...In case [line boxes] are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height.

So our inline-block element's height is being affected by its implicit line box's height calculations, which are in turn subject to these vertical-alignment calculations.

So it would seem that when we don't use baseline as a vertical-align for an inline-block, the box's implicit line box will shrink to the smallest size it can.

Confusing? ...Yeah. Just jump back to the shorter 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.

Css styles not applied properly,if use DOCTYPE

The problem is that the div is set to 100% of 100% (the body) this makes sence to us but not to the browser. If you set the body position to absolute and set it's top, bottom, left, right to 0, you get the same effect and the div's height setting will work the way you expect. Here's the code.

<!DOCTYPE html>

<html> 
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

add favicon - doctype! html not !DOCTYPE html

I don't have enough reputation to leave a comment, but please add more code so I can help you

Update

I looked at your code and I think that you need to change the height in msg-wrapper-body class from 100% to 100vh and it will fix your problem.