I am using HTML5 < section > tag in my application, padding for < section > tag works fine in chrome,ff and safari but its not working in IE..
I tried adding displ
Many older browsers don't understand HTML5 tags like section
and use the fallback of treating them as inline items in the flow of the document.
IE goes a step beyond this and totally ignores HTML5 tags. To fix this, you'll need to add the tags to the document via Javascript. Fortunately, there's a very nice HTML5Shiv that you can embed in the head of your html like so:
<!DOCTYPE html>
<head>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Any IE less than IE9 will now use this script to enable the common HTML5 blocks.
You will still need to use CSS to make the tags display as blocks. I use:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
As others have mentioned, the <section>
element is one of the new HTML5 elements that is not supported in IE versions lower than 9.
I'm not sure how accurate this article is, but they are able to pull of the effect you are after using XHTML5. However, there's a lot of caveats that have to be taken into account of very carefully to get it to work (such as not serving the XML declaration to IE as it will make IE go into quirks mode, but you need to serve it to other browsers, etc.)
However, the benefits of this approach are that you require no Javascript to get it to work, and therefore can serve to users with Javascript disabled.
My answer would just be that the <section>
tag is not supported in older versions of IE and so something like padding is not possible without ajsharma's suggestion of javascript or, the better option, using a tag that is supported like <div>
or even <p>
depending on what you're wanting to do.