IE7 not-displaying bug

by gravof

HTML

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<button>Toggle mode</button>
<article class="o-mode">
    <header>
        <nav>
            <ul class="thumbnails">
            </ul>
        </nav>
    </header>
</article>

CSS

nav {
    zoom: 1;
}
.p-mode nav {
    position: relative;
}
.thumbnails {
    width: 300px;
    height: 30px;
    background: red;
}
.thumbnail-list {
    position: relative;
    width: 200px;
    height: 60px;
    background: blue;
}
.p-mode .thumbnails, .o-mode .thumbnail-list {
    display: none;
}

JavaScript

$('.thumbnails').clone().toggleClass('thumbnails thumbnail-list').insertAfter('.thumbnails');

$('button').click(function() {
    $('header').hide();
    $('article').toggleClass('o-mode p-mode');
    $('header').show();
});