CODEWITHSUNDEEP
htmlcss
fynyky
fynyky

Reputation: 523

Effect of doctype on css

When I do

<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

the div fills the window

but if i add a doctype tag at the beginning

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

the div fills the width, but doesn't fill the height.

Any idea what's going on? I know I'm supposed to put doctype tags, I'm just wondering specifically it's doing in this case thats causing the different behavior.

Upvotes: 3

Views: 716

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

Lack of doctype declaration triggers “quirks mode,” which means that browsers do different things to cope with the document, assuming it to be legacy code that may rely on features that existed in old browsers. Roughly speaking, “quirks mode” means that browser try to behave more or less like Internet Explorer 4. But they do it in different ways; I’ve composed an incomplete list of what happens in “quirks mode.” “Quirks mode” should only be used for legacy pages that need it; conversely, pages that work in “quirks mode” may fall apart in “standards mode,” and you get there just by adding a doctype declaration.

In your case, skipping the theory part here, you need to add some rules to make the div element fill the canvas in “standards mode”:

<style>
  head, body { height: 100%; margin: 0; padding: 0;}
</style>

and

<div style="width:100%;height:100%;background:blue; position: absolute;"></div>

Upvotes: 4

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34150

Actually it does. the problem is, the height of the body is not big enough, so the div's height will be as big as the body height.

Upvotes: 0

Virendra
Virendra

Reputation: 2553

When you add Doctype to you html page, you are instructing your browser to follow the standard specified by doctype. If its not specified, the browser will not know what kind of document it is.

You should always specify a <!DOCTYPE> in your page.

Some links to help you understand what doctype is and why is it important. http://en.wikipedia.org/wiki/Document_Type_Declaration
http://www.w3schools.com/tags/tag_doctype.asp

Upvotes: 0

Sonal Khunt
Sonal Khunt

Reputation: 1894

Please read this you get ideas about doctype, doctype is very important part in web designing

http://www.w3schools.com/tags/tag_doctype.asp

http://htmlhelp.com/tools/validator/doctype.html

Upvotes: 0

Related Questions