Can't Style Html5 Elements In Ie (despite Shiv And Display:block)

March 31, 2024 Post a Comment

I can't seem to work out what's missing. All the affected elements have display:block Example style for the header element: header { width: 923px; height: 55px; backgr

Solution 1:

IE 6-8 doesn't know about the header tag, so that the styles can't be applied to it. To make IE to understand this tag, add the below script in your head section.

<scriptlanguage='javascript'>document.createElement('header');
</script>

This would solve your problem.

Solution 2:

Solved the issue. What i did was that i put the script-link under the stylesheet link and suddenly IE 6-8 applied my styles.

<linkrel="stylesheet"href="styles/style.css"type="text/css"><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Thank you so much for trying to help me :)

Solution 3:

Maybe just try giving it a class?

Solution 4:

IE doesn't currently allow styling to be applied to these elements. The way I solve it is by wrapping them in another div:

<divclass="header"><header></header></div>

This isn't great obviously, but it beats any solution that relies on JS as it won't display strangely with JS disabled.

Solution 5:

Had this problem myself today, upgraded to latest html5shiv code (now moved to Github here: https://github.com/aFarkas/html5shiv), moved the above the script link, all elements had display:block set but still no luck styling them...

The I realised I had no doctype declaration in my markup - adding:

<!DOCTYPE html>

solved the problem, all styles now applying correctly - so complete solution:

<!DOCTYPE html><html><head><linkhref="/css/styles.css"type="text/css"><scriptsrc="/js/html5shiv.min.js"></script></head><body><!-- html 5 markup --></body></html>

Html5 Dictionary