Header/Footer/Nav Tags - What Happens to These in Ie7, Ie8 and Browsers Than Don't Support HTML5

html5 new elements (header, nav, footer, ..) not working in IE

You need to include the HTML5 shiv script in order to allow styling of HTML5 elements in older IE browsers: http://code.google.com/p/html5shiv/

To use, include the following script in your element above your CSS:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Nav menu breaks in IE 7/8

Sadly IE7 and IE8 have largely non-existent support for HTML5. The reality is that if you are writing in HTML5/CSS3 you WILL have headaches getting it to work in IE7/IE8, and that's just the way it is.

To actually begin to solve the problems, check out HTML5Shiv. It provides some styling that helps keep older IEs from utterly failing to understand your HTML5 web page.

Related question: Html5: header/footer/nav tags etc, what happens to these in IE7,8 and browsers than don't support html5?

Try that and then use IE9+s F12 Developer Tools to see what's going on in IE7 - especially check the console, where you'll find a ton of jquery errors in ie7 mode.

If that doesn't work outright, at least it will move the process along to figure out what else is going wrong. But don't worry - all HTML5 pages have this sort of problem.

Should I use the new HTML5 semantic elements?

It's good practice to use both, for example

<nav>
    <div>
        <ul>
        <!-- etc -->
        </ul>
    </div>
</nav>

If you need to support those obsolete browsers, I wouldn't do anything more than that. The benefits, such as they are, are not worth the extra effort.

is it ok to use server-side browser detection to ensure graceful degradation of html5 semantic tags in IE7 and IE8

You will need to careful about proxy caching, otherwise a proxy may cache your IE7 page and serve it to more modern browsers, or cache your HTML5 page and serve it to IE7 and your server will never get an opportunity to supply the correct version.

Unless your site already requires that your HTML pages not be cached, whatever you do to avoid this problem will increase the load on your server.

HTML5 and CSS3 for IE7 and IE8

Try this lovely script (.js) :)

And for rounded corners i use an other script (.htc)

use the 1st:

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

use the 2nd like:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

Happy sitebuilding :)

The original link is no longer active and HTML5shiv has moved.

Now available on GitHub

https://github.com/aFarkas/html5shiv

Degradation issues for HTML5 semantic tags (article, footer, header)

As long as you use html5shiv to handle IE, it will work fine.

The browser will treat all unknown tags (including HTML5 tags) as normal inline elements.

You should include the following CSS rule:

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }