CODEWITHSUNDEEP
csshtmllayoutdoctype
DimC
DimC

Reputation: 515

Doctype and sections

I run into this, and I am not sure why it is happening...

Taking the html below as an example, as it is, it will display grey areas for the sections as instructed by the CSS. However, when I include <!Doctype html> in the first line it breaks down.. Furthermore, the code below does not work at all with IE9.. why? Many thanks in advance.

<html>
<head>

<style type="text/css">
.sec_class{
        width:50%;
        height:15%;
        border:1px black solid;
        padding:0px;
        position:relative;
        background-color:grey;
}
    </style>
</head>

<body>

<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>

</body>
</html>

Upvotes: 2

Views: 91

Answers (2)

Juan G. Hurtado
Juan G. Hurtado

Reputation: 2137

In order to make IE styles HTML5 tags (section, nav...) you must use a polyfill, because it can't by default. You can use: http://code.google.com/p/html5shiv/

It's just a JS file that you must include on your HTML (using IE conditional comments):

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Also you should not use single quotes:

<section class="sec_class"></section>

Also, of course, if you are setting a porcentual height on your section elements, his parent must have also a defined height. On your case, a 15% height of nothing (body has no height) is… nothing.

Upvotes: 1

kapa
kapa

Reputation: 78731

Your sections have basically no height, because height given in the percentage (height: 15%;) will always be relative to the parent's height. body has zero height in your case, and the 15% of that is still zero.

This should help:

html, body { height: 100%; }​

jsFiddle Demo

Be sure to ALWAYS include the doctype.

Upvotes: 3

Related Questions