Turning off the quirks mode affects the web page

Question

At present i am using ie9 to render my web pages. While using the 'margin: 0 auto' css property for one of my requirements, it did not work.So i surfed a lot and found the reason, i did not specify the doctype in order to turn off the quirks mode. So that i added a doctype which was specified in the link. as a result my web page is not seems to be loading as it is. It is omitting some css and scripts [jquery] that was binded with it.

when ever i try to load the webpage by removing the doctype, it is displaying all the contents normally, but margin: 0 auto not seems to be working..

By the way,This link states that jquery will responds differently to quirks mode turned off and on.so i tried to change my scripts too. but same result occured.

I am very confused at this stage. Any clues.?

EDIT:

HTML:

<html>
<head>
<title>Rajaprabhu</title>
<link rel="stylesheet" type="text/css" href="css/PrabhuCss.css">
</head>

<body>

 <div id="DivMenu">
   <div id="DivLogo">R</div>
 </div>

 <div id="DivMain">
   <div id="DivHeader">
   </div>
   <div id="DivContent">
     <div id="DivSlider">
       <div id="DivHome">        
       </div>
       <div id="DivSkills">
       </div>
     </div>
   </div>
   <div id="DivFooter">
   </div>
 </div>

</body>

</html>

CSS: [PrabhuCss.css]

#DivMain
{
position: relative;
width:100%;
height:100%;
z-index:1;
}

#DivFooter
{
position:absolute;
width:100%;
height:5%;
bottom:0%;
left:0%;
background-image: url('../Images/ImgHeaderFooter.jpg');
z-index:5;
border-top: 2px solid #2F2E2E;   
}

#DivHeader
{
position:absolute;
width:100%;
height:10%;
top:0%;
left:0%;
background-image: url('../Images/ImgHeaderFooter.jpg');
z-index:6;
border-bottom: 2px solid #2F2E2E;
}

#DivMenu
{
position:absolute;
border-radius: 999px;
background: #ccc;
border: 2px solid #2F2E2E;
cursor: pointer;
z-index:7;
text-align:center;
width: 4%;
height: 8%;
left: 48%;
top: 6%;
}

#DivLogo
{
font-family: 'Wendy One', sans-serif;
font-size:35px;
position:relative;
top:50%;
margin-top: -18px;
}

#DivContent
{
position:relative;
width:100%;
height:85.02%;
top:10%;
left:0%;
z-index:2;
overflow: hidden;
}

#DivSlider
{
position:absolute;
width:100%;
height:100%;
z-index:3;
}

#DivHome
{
width:100%;
height:50%;
z-index:4;
background-image: url('../Images/ImgBackground.jpg')
}

#DivSkills
{
width:100%;
height:50%;
z-index:4;
background-image: url('../Images/ImgBackground.jpg')
}

body
{
margin:0;
padding:0;
border: 0;
overflow:hidden;
}

If i use <!doctype html> in the top of my Html, the page is not displaying properly.
But with out that there wont be any problems in rendering.

Validate your HTML. There's a good chance that you have errors that quirks mode is letting slide but that aren't acceptable with a doctype. — Chris Herbert, Jan 01 '13 at 09:57
We can't find errors in your code without seeing it. Are you willing to share? — John Dvorak, Jan 01 '13 at 10:01
@JanDvorak I have validated the code in the link you mentioned, it returns no error. but the problem still persists. I have added my html and css with the question. — Rajaprabhu Aravindasamy, Jan 01 '13 at 10:58
Hint: a link to [jsfiddle](http://jsfiddle.net/g5uMp/3/) is a great way to complement the posted code samples with a live sample we can play with. I have already started for you, but it could take some comments (and lorem ipsum). — John Dvorak, Jan 01 '13 at 11:12
I can't see any problem in IE9. It looks the same in IE9 and Chrome - both are centered (note that jsfiddle adds the doctype and everything). — John Dvorak, Jan 01 '13 at 11:16
@JanDvorak [This](http://jsfiddle.net/laraprabhu/g5uMp/4/), is the same case i'm facing here. only that rounded div is displaying properly. (note: i just updated the background in youe fiddle.) — Rajaprabhu Aravindasamy, Jan 01 '13 at 11:23
@Rajaprabhu the fiddle I posted had rounded corners as well. I don't see a difference in rendering (Chrome, IE9). — John Dvorak, Jan 01 '13 at 11:24
@JanDvorak [See](http://i.imgur.com/nRxjx.png) , how your fiddle is looking in my machine. I cant figure out what's wrong.? — Rajaprabhu Aravindasamy, Jan 01 '13 at 11:49
@RajaprabhuAravindasamy this is what I get. What is wrong with it? — John Dvorak, Jan 01 '13 at 11:50
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21987/discussion-between-rajaprabhu-aravindasamy-and-jan-dvorak) — Rajaprabhu Aravindasamy, Jan 01 '13 at 11:52

score 0 · Answer 1 · answered Jan 01 '13 at 10:18

0

You might have included the wrong doctype.

The doctype for modern standards is as simple as <!doctype html> to be used at the beginning of the page.

eg:

<!doctype html>
<html>
    <head></head>
    <body></body>
</html>

answered Jan 01 '13 at 10:18

webextensions.org

731
6
15

"If i use ` ` in the top of my Html ..." – John Dvorak Jan 01 '13 at 10:59
Since the old days of quirk mode, there have been major changes in the browsers for the implementation of CSS "position" style. You should probably start using `position: fixed` instead of `position: absolute` ... I believe you will need to rewrite a lot many things in the mentioned code. – webextensions.org Jan 01 '13 at 11:44

score 0 · Answer 2 · answered Jan 01 '13 at 11:19

I don't see anything in your CSS that has that rule (margin: 0 auto;), but as a rule auto only works for margins when the element has a defined width.

Also, you really should be specifying a character set. The recommendation is to use UTF-8, for the most part:

<!doctype html>
<head>
    <meta charset="utf-8" />
    <!-- everything else... -->

This should be the first element inside the <head> element.

score 0 · Accepted Answer · answered Jan 03 '13 at 17:39

Solution Found,

The child element which is relative to its parent wont get any height untill we assign any fixed height to its parent.So that, in my case DivMenu is relative to body and html tags, but i did not specify any height for it. In Quirks mode, the rendering engine just left the above rule and rendered the page,But in other modes with doctypes (Ex: <!DOCTYPE html>) specified, it cosidered that rule. That is the problem. That's why my page got collapsed.

Live Version: Before - After

CSS:

html,body          //Html tag added
{
height:100%;       //Added this
width:100%;        //Added this
margin:0;
padding:0;
border: 0;
overflow:hidden;
}

Turning off the quirks mode affects the web page

3 Answers3