Can't Style HTML5 Elements In IE (despite Shiv And Display:block)

September 29, 2022 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.

<script language='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.

<link rel="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:

<div class="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>
        <link href="/css/styles.css"  type="text/css">
        <script src="/js/html5shiv.min.js"></script>
    </head>
    <body>
        <!-- html 5 markup -->
    </body>
</html>

Html5 Development