Padding not working when using
tag in IE

Question

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 display:block; with the section style but its not useful...

any solution?

ajsharma · Accepted Answer

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;
    }

jcuenod · Answer

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.

Padding not working when using <section> tag in IE

Tags:

html

css

balanv

2 Answers

ajsharma

jcuenod

Recent Activity

Donate For Us