Question

I recently refactored my web site to use HTML5. It works Ok with most browsers except, obviously, with IE7 and IE8.

It looks like it result from the use of the <header>, <section> and <article> tags which are apparently ignored by IE7. My css defines specific tag formating subclasses for these.

header { color: #fff;  background: url("background1.jpg"); 
        padding: 10px 40px 20px 40px; margin-bottom: 20px; }
header a { color: #fff; text-decoration: none; outline: none; }
header a:hover { color: #fff; text-decoration: underline; }
header h1 { color: #FFFFFF; font-weight: bold; font-size: 30px; 
          padding-bottom: 20px; padding-top: 0px; }
header h2 { color: #FFFFFF; font-weight: bold; font-size: 16px; padding-bottom: 10px; }
header hr { margin: 10px 10px 0px 0px; }
header .copyright { font-style: italic; font-weight: bold; 
    padding-left: 30px; padding-right: 0px; }

section { padding: 5px 40px 5px 40px; line-height: normal; }

article .main { font-weight: bold; font-size: 20px; line-height: normal; }

I skipped other style definition that don’t cause a problem.

How could I get around this problem ? Do I have to drop the HTML5 tags ?

Answer 1

You can use this script in your head section:

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

Does most of the html5 work in IE for me 🙂