CODEWITHSUNDEEP
csshtmlcss-selectorsmarkup
Web_Designer
Web_Designer

Reputation: 74530

How to get HTML5 markup elements to display well in IE

What is the best way to get HTML5 markup elements like <header>, <section>, and <footer> to display well in IE?

Usually, when I apply CSS to the HTML5 elements, the styling doesn't take place. But I have seen it done on other sites, like colourfreak.com, and would like some help.

I think it has something to do with the selectors not accepting new tag names. So something like this wouldn't work: 

nav a {
    text-decoration: none;
}

A detailed explanation or nice article would be helpful. Thanks!

Upvotes: 2

Views: 1280

Answers (3)

Arsen K.
Arsen K.

Reputation: 5660

For IE we have to create new HTML5 elements with JS. Create new file, name it for example html5.js and include this script in your <head> area. All will be fine.

document.createElement('article');
document.createElement('aside');
document.createElement('details');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('main');
document.createElement('menu');
document.createElement('nav');
document.createElement('section');
document.createElement('summary');

This is required only for IE, so you can use conditional comments:

<!--[if IE]><script src="js/html5.js"></script><![endif]-->

Because of these elements are displayed as inline elements, you'll probably want to add this rule In your CSS file:

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

Upvotes: 9

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

I'm pretty sure Modernizer will solve your problem and alot of other cross-browser issues with CSS3 as well.

Upvotes: 2

smilly92
smilly92

Reputation: 2443

You can use the HTML5 Shiv... 

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

Also you could use the HTML5 boilerplate... (Includes the HTML 5 shiv)

http://html5boilerplate.com/

Upvotes: 7

Related Questions