1

An annoying problem I'm having with the modernizr script. This script is supposed to enable Internet Explorer to style the new HTML 5 tags, but in my code the header tag is styled, but the article tag is not. If I use a DIV with the ID "article" and apply the styles, they are visible, so it seems as if modernizr doesn't work for article tags? I am using IE 8 to test this.

<!DOCTYPE html>
<meta charset="utf-8"/>
<html class="no-js">
<head>
    <title>Title</title>
    <script src="~Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <style>
    header,footer,nav,section {display: block;}
    article, #article {border:1px solid red;}
    header {height: 95px;border-bottom: 8px solid #6b6b6d;}
    </style>
</head>

<body>

<div class="page">

    <header>
        LOGO | Title
    </header>

    <article>
        <h2>article element</h2>
    </article>

    <nav>
        <ul id="menu">
            <li>Link 1</li>
            <li>Link 2</li>
        </ul>
    </nav>

    <div id="article">
        <h2>div with id article</h2>
    </div>

</div>

<footer>
    footertext
</footer>

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Erik Oosterwaal
  • 4,272
  • 3
  • 44
  • 64

2 Answers2

4

Add article { display: block; } to your CSS. You could just change the first line of your CSS to:

header, footer, nav, section, article { display: block; }

That will solve the problem.

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
  • 1
    +1. I was having exactly the same problem. FYI, I also added `aside, hgroup` as Chrome's user-agent stylesheet has these defined as `display:block;` as well. – ggutenberg May 06 '11 at 10:09
  • Thank you, that was it! It had to be something simple, but I didn't think of defining article as a block type element. (And I hadn't noticed it was missing from the css declarations) – Erik Oosterwaal May 06 '11 at 10:13
  • It seems, with the latest Modernizr (2.5.2) it automatically injects the necessary styles to do this. – Richard Jun 01 '12 at 18:28
-4

I think you're using the wrong library.

"Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities." http://www.modernizr.com/

If you're interested in what you can do with Modernizr, ALA has a clear article on how to effectively use it: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

Please read the top answer to this other question: HTML5shiv vs Dean Edwards IE7-js vs Modernizr - which to choose?

I think the html5shiv library might be more fitting to your issue.

Community
  • 1
  • 1
Mushimo
  • 154
  • 1
  • 4