CODEWITHSUNDEEP
csshtmlstylessemantic-markup
Matthis Stenius
Matthis Stenius

Reputation: 53

Can't style HTML5 elements in IE (despite shiv and display:block)

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;
    background: #395168;
    margin-top: 25px;
}

Upvotes: 1

Views: 768

Answers (5)

maxscan
maxscan

Reputation: 191

Had this problem myself today, upgraded to latest html5shiv code (now moved to Github here: https://github.com/aFarkas/html5shiv), moved the stylesheet 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" rel="stylesheet" type="text/css">
        <script src="/js/html5shiv.min.js"></script>
    </head>
    <body>
        <!-- html 5 markup -->
    </body>
</html>

Upvotes: 0

Matthis Stenius
Matthis Stenius

Reputation: 53

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 :)

Upvotes: 1

Mohan Kumar
Mohan Kumar

Reputation: 6056

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.

Upvotes: 1

Tom Gullen
Tom Gullen

Reputation: 61739

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.

Upvotes: 0

UniAvenger
UniAvenger

Reputation: 232

Maybe just try giving it a class?

Upvotes: 0

Related Questions