How to make my web page look Ok with IE7+?
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 &lt;header&gt;, &lt;section&gt; and &lt;article&gt; 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 ? 
How to make my web page look Ok with IE7+?
===

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 &lt;header&gt;, &lt;section&gt; and &lt;article&gt; 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 ? 